Forum Moderators: not2easy
I'm trying to accomplish a series of boxes (3 in a row, 3 rows down) with CSS, all goes well, UNTIL the dreaded margin on the left doubles with IE ,now I fixed that problem with display: inline; but now my margin on the bottom has dissapeared
Does someone know the anser?
Here's my full sample code, ready to copy -> paste
THANKS!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#wrapper {
width: 354px;
float:left;
border: 1px solid #666666;
}
.a {
width:100px;
height: 100px;
margin: 4px;
background-color: #0066FF;
}
.b {
float: left;
width:108px;
height: 108px;
margin: 4px;
border: 1px solid #e5e5e5;
/* ie5 bug fix */
display: inline;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div class="b">
<div class="a"></div>
</div>
<div class="b">
<div class="a"></div>
</div>
<div class="b">
<div class="a"></div>
</div>
<div class="b">
<div class="a"></div>
</div>
<div class="b">
<div class="a"></div>
</div>
<div class="b">
<div class="a"></div>
</div>
<div class="b">
<div class="a"></div>
</div>
</div>
</body>
</html>
<div class="b">
<div class="a"></div>
<br clear="all" />
</div>
</div>
</body>
</html>
Thanks for your reply but the <br clear="all" /> is not allowed in XHTML STRICT :(
Thanks!
But here, this is allowed:
<br style="CLEAR: both;" />
I've ... put[ting] spacers in between as for margins (empty divs) which fixed it ...
<br clear="all" /> is not allowed in XHTML STRICT :(
One could make an argument that using what essentially amounts to a 'table-hack' (i.e., using 'spacer' <div>s is no different than using spacer gifs) in order to avoid losing XHTML STRICT validity is an oxymoron. The point of validation is not so much to make sure all the minute details are in order, but to ensure that standards-based practices are being used. Hacking around standards-based practices in order to achieve validation defeats the purpose.
Personally, I think it's better to lose STRICT validity but maintain a clean layout, than to keep the validity but dirty up the code.
But the point is that even <br style="CLEAR: both;" /> did not work in my case, which was the reason I used spacer div's (which isn't hacking at all- merely positioning), as spacer gif's can be used for positioning.
So is there a real solution to my problem for IE?
concidering that <br style="CLEAR: both;" /> doesn't work either?
Ow, and strict has got some good guidelines in the course of usability for users forcing webdevelopers to program a way FOR the end-user which I am a strong supporter of. - STRICT XHTML just makes sense but has nothing to do with the problem.
STRICT XHTML just makes sense but has nothing to do with the problem
I cut and pasted your code. Changing the border color on .b makes it clear what's happening...IE is collapsing the bottom margin on that last <div>. The problem is, IE isn't supposed to collapse those margins because .b is floated and margins on floats don't collapse in the specs. In fact, the W3C says,
Vertical margins between a floated box and any other box do not collapse (not even between a float and its in-flow children).
The bold is mine and points out that CLEARLY .a and .b's margins should both remain intact, as they do in Firefox, but not buggy IE.
There may be tricks out there to make IE follow the collapsing margin rules, but I don't know what they are. I tried the various ways I know of to prevent collapse in compliant browsers and none of them worked. (Big shock.)
So although I can't give you a bug fix, here's something you might want to consider. It's a work-around (hack?), but involves only one extra <div> as opposed to many...
Wrap all the .b/.a <div>s in one container <div>, as in...
<div id="wrapper">
<div id="box">
<div class="b"> ...ETC... </div>
</div>
</div>
Remove the 4px margin from .b and style the new #box to have one instead. Also float it left and give it a 100% width. This will prevent it's margin from collapsing with .b's (and, oddly, it actually does).
#box {
float: left;
width: 100%;
margin: 4px;
}
This puts the borders of all the .b <div>s touching, but you've built 8px between them on all sides anyway so it looks fine. You could always add more width and height to .b if the space needed to grow.
You will need to re-tweak the width of the #wrapper <div> to compensate for the loss of all those 4px margins between .b <div>s, but that should be easy.
The result is a box inside the wrapper with a 4px, non-collapsing margin, plus 4px of margin all around from each of the 'outer-edge' .b <div>s. It looks uniform on my system in both IE6 and Firefox.
Thanks m8!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#wrapper {
width: 354px;
float:left;
border: 1px solid #666666;
}
.a {
width:100px;
height: 100px;
margin: 4px;
background-color: #0066FF;
}
.b {
float: left;
width:108px;
height: 108px;
/*margin: 4px;*/
border: 1px solid #fff;
/* ie5 bug fix */
display: inline;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#box {
float: left;
width: 100%;
margin: 4px;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="box">
<div class="b">
<div class="a"></div>
</div>
<div class="b">
<div class="a"></div>
</div>
<div class="b">
<div class="a"></div>
</div>
<div class="b">
<div class="a"></div>
</div>
<div class="b">
<div class="a"></div>
</div>
<div class="b">
<div class="a"></div>
</div>
<div class="b">
<div class="a"></div>
</div>
</div>
</div>
</body>
</html>
Peace.
I applied the display:inline; to the #box otherwise there will be a double margin on the left (8pixels instead of 4) but comes close to what I'm trying to accomplish
Well thank you very much,
I'll be doing some more work on it and will also post any results (might be only up till the weekend :(
Respect :)
#box {
float: left;
width: 100%;
margin: 4px;
/* ie5 bug fix */
display: inline;
}
must've been my test version then posting :D
' got me on that one ;) '
