Margin-top ignored by all except IE6
Regular
Posted: Sat, 2008-05-10 09:55
Hi
I have a div with a bunch of content in it at the top of my page:
<div id="pqcontainer">
<p>
Bunch of content here
</p>
</div>Style as follows:
div#pqcontainer
{float: left;
clear: both;
margin-left: 20px;
_margin-left: 10px}The div is 100% wide which isn't specified but it contains floated left and right elements within it, thus making it 100%.
Below that is a 'spacer' div intended separate this top div from the next content div:
<div class="hr"> </div>
Styled as follows:
div.hr {width: 90%;
clear: both;
line-height: 0;
height: 0;
border: 1px dashed #f00;
margin: 10px auto;
display: block;
overflow: hidden;
position: relative;
margin-top: 50px}However, the margin-top is ignored by all browsers I've tried except IE6. I've changed it to margin-left, margin-bottom etc to see what happens and this is all picked up by the other browsers, but margin-top does nothing. Any suggestions??
Leader
Posts: 841
Joined: 2008-02-04
Location: Netherlands
Ack! Spacer divs!
Posted: Sat, 2008-05-10 11:24
Ack! Spacer divs! Aaaaaah!
Okay, anyway, have you tried simplifying the code you have first? Second, do you know it's not margin-collapse (meaning have you checked to see if it is?)?
If this code were given to me and I needed to make it work, I'd start with this:
div.hr {width: 90%; <--if you don't say anything it will be 100% as it's a divclear: both;
font-size: 0px; <--for IE
border: 1px dashed #f00; <--with no line height and no height I'm not sure what you got here,
margin: 50px auto 0;
If nothing worked, I'd test for collapsing margins by adding
padding-top: 1px;
as this can force a browser to acknowledge the margin too.
Though what I find easier with floats, even when I'm clearing them, is to put bottom margin on the float instead of top margin on the clearer. Esp since if for some reason the clearing didn't work, modern browsers (not counting IE7) will let that margin sit UNDER the floats above, while IE, being a float-wrapper, starts at the bottom of the float (well, the float's container). I should try to find that article Paul O'B wrote about it, it has some images with a px measuring tool that really explains IE nicely.
I'm no expert, but I can fake one on teh Interwebz
Guru
Posts: 2833
Joined: 2004-09-01
Location: MA, USA
floats are taken out of the
Posted: Sat, 2008-05-10 12:23
floats are taken out of the document flow and so the margin on the .hr is from the previous in flow element. I'd be willing to bet that your #pqcontainer is taller than 50px, hence you're not seeing the margin-top. You could contain the float inside the previous element, OR apply a bottom margin of 50px to the float.
Just for the record, a div will take up all available space (100%) whether it contains left or right floats or not, without a width declaration, by default.
Incidentally, IE6 is wrong...
Regular
Posts: 31
Joined: 2008-03-11
Thanks both, very helpful
Posted: Sat, 2008-05-10 12:45
Thanks both, very helpful indeed. I'll try your suggestions and see what comes out.
Incidentally, the idea was to have a red dotted line between the two content divs, with a height of 1 or 2px and width of 90%. Like a custom hr I guess. Basically trying to force CSS to create a little graphic effect for me, which I know is totally morally wrong in every way! I'll see how I feel at the end of the day, might abandon it and do something more worthwhile...
Cheers
Leader
Posts: 841
Joined: 2008-02-04
Location: Netherlands
Nah, I've done it... was
Posted: Tue, 2008-05-13 13:17
Nah, I've done it... was replacing a real HR on a TABLEd site and since everything above the line was kinda in the same box, I could simply put a bottom border on that container which had almost the same effect (one thing about hr is that you can set a width, while on borders you can't... stinks). Almost makes me think you want a real hr since that's the only way I know of that you can have it not as wide as the container...
I'm no expert, but I can fake one on teh Interwebz
Enthusiast
Posts: 283
Joined: 2008-02-22
Location: Providence, RI
I am not sure if you have
Posted: Tue, 2008-05-13 13:36
I am not sure if you have fixed this but:
div.hr {width: 90%;clear: both;
line-height: 0;
height: 0;
border: 1px dashed #f00;
margin: 10px auto;
display: block;
overflow: hidden;
position: relative;
margin-top: 50px}
you are missing the ";" at the end of "margin-top: 50px"
http://ifohdesigns.com - Web Design That Is Neat.
http://ifohdesigns.com/blog - Read it please.
Leader
Posts: 841
Joined: 2008-02-04
Location: Netherlands
lawlz
Posted: Tue, 2008-05-13 14:10
That right there might have done it. Even though by the specs, the last line is not required to have the ; I have seen on a menu I did for someone that leaving it off can make browsers ignore it as a CSS error... a border-bottom did not show until the ; was added to the end of it.
I'm no expert, but I can fake one on teh Interwebz
Regular
Posts: 26
Joined: 2007-06-08
Location: San Diego
I don't know if this will
Posted: Mon, 2008-05-19 18:07
I don't know if this will help at all, and you've probably already fixed it, but IE6 is almost always wrong
If you use padding instead of margin and fake the look of margin [like if you have a background, apply coordinates for the bg to start where it really should], it will be the same across all browsers. IE6 reads margins a bit differently and will cause inconsistencies.