IE zero width borders

Forum Moderators: not2easy

Message Too Old, No Replies

IE zero width borders

milosevic

6:31 pm on Nov 8, 2010 (gmt 0)

I'm designing an experimental theme for a photo gallery with lots of CSS3 and have made a fluid layout that degrades when narrowed in steps.

However, this meant every single element on the page had to have a fluid width and even 1px borders on the grids of images caused things to break.

I had problems using outline:, eventually I found that a CSS3 1px wide drop shadow worked well as an alternative.

That's all well and good for CSS3 browsers - but what about IE, the design needs some sort of faux border too - has anyone got any ideas?

Major_Payne

12:08 am on Nov 9, 2010 (gmt 0)

CSS 3 is not totally supported in all browsers [en.wikipedia.org]. Make sure you have a fall back to CSS 2.1 [w3.org]. Might also look at this: CSS contents and browser compatibility [quirksmode.org]

IE has bugs [positioniseverything.net] so you might want to use IE's Conditional Comments [msdn.microsoft.com].

You could also check it in IE 9 Beta [windows.microsoft.com].

TheKiller

12:39 pm on Nov 24, 2010 (gmt 0)

i can say i have that problem myself as i use alot of CSS3 Ina a page i wrote
the alternative i know is use images as boarders etc
that way the page will look the same in all browsers

SuzyUK

6:02 pm on Nov 24, 2010 (gmt 0)

You could use the box-sizing property [css3.info] which has support in IE8 and other browsers

then for IE7 and below you could (but I wouldn't recommend it) trigger quirks mode which uses the "wrong" box model, the "wrong" Box-model is the same as border-box value of box-sizing [w3.org].

or if your site is already compliant and you're looking for a degradation fallback - you could use an calculating expression fed to only IE6/7.. expressions need javascript to work, and are not recommended in the "page speed" bibles ;) but IMHO if they are being fed to a dwindling browser share they might have a small place left. if they do turn out to have a noticeable performance impact you could just change the widths completely (make the width for IE6/7 something like 40% instead of 50% in the example below) id this is purely an aesthetic effect IE6/7 users won't be comparing the pretty perfection they're missing will they ;)?

here's a theoretical example using fully supported code for current support conditions.. I personally would use inline-block for flexible conditions which won't work for this due to whitespace between blocks, I'll try to see if there's a more flexible way using it.. with this you could use your drop shadow, degrading to the box-sizing for IE8, degrading to expressions for IE7 and below if you like the drop shadows too..

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Page Title </title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css" media="screen">
#wrapper {
width: 76%;
background: #cfc;
overflow: hidden;
}

.preview {
float: left;
width: 50%;
border: 1px solid #000;
padding: 5px;
/* you don't want the above width, border and padding to add up to more than 100% of container so change the box model! */ 
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
</style>
<!--[if lt IE 8]>
<style type="text/css" media="screen">
.preview {
/* javascript expression calculates width by dividing the wrapper width by 2 then taking off the 2px for the borders and 10px for padding */
 width: expression(wrapper.offsetWidth/2 - 12 + "px");
 }
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div class="preview">1st image preview</div>
<div class="preview">2nd image preview</div>
<div class="preview">3rd image preview</div>
<div class="preview">4th image preview</div>
<div class="preview">5th image preview</div>
</div>
</body>
</html>

Demaestro

6:14 pm on Nov 24, 2010 (gmt 0)

Since you are using CSS3 have you played with border-image? A simple image can be used to create your border.

Not sure if that will resolve your issue though.

milosevic

9:16 am on Nov 25, 2010 (gmt 0)

Thanks a lot @SuzyUK, I had no idea about the box-sizing property and I'd put this issue on the back burner until now.

It looks like just that will do exactly what I need as I'm not really caring about IE6 or 7 for this design - partly because of the target demographic (so far 90% of visitors use Firefox) and because it's my own personal interest site so they can get stuffed ;)

It's good to know there is an option for these browsers though.

The other advantage of this code is it will reduce the number of drop shadows on the page which should make the site a little more responsive on slower PCs.

I will try out the code tonight and let you know how I get on. Thanks again!

milosevic

8:44 pm on Nov 25, 2010 (gmt 0)

I just tried it out on my design Suzy and it doesn't look like it will work in this situation, because the elements that need to use the border-box model collapse to the width of their content - but my design needs percentage width on them.

Damn, I was really hoping that was going to solve the problem!

@Demaestro, I haven't tried border-image but have been meaning too though! Unless it doesn't take up space on the page it won't be that much help in this situation though.

The only other thing I can think of is JavaScript to take 2px off the width of each element but that would mean the layout was automatically broken with JS disabled. :/

The expressions I will try out however and see what difference it makes to page speed.