css help
- Started
- Last post
- 15 Responses
- meisterschueler
I kinda feel stupid, but why is the <div> object in the following example in IE6 higher than 8px, and how can i achieve that it is?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html>
<head>
<style type="text/css">
.bl{
float:left;
height:8px;
width:10px;
background-color:#0000FF;
}
</style>
</head>
<body>
<div class="bl"></div>
</body>
</html>
- matt310
try setting your padding to 0
- matt310
oh and and your margins as well
- bulletfactory0
create a group of 'reset' attributes setting all paddings and margins to 0. it will help w/ better cross browser results.
- 4hero0
like :
* {margin:0; padding:0}
- meisterschueler0
thanks fo teh fast replies, but i did use a browser reset i just deleted it for the post.
So it seems like it has nothing to do with margins and padings!?
- jonatne0
hasLayout
- matt310
is the bl class wrapped in any other classes or ID's? it might be inheriting a style from one of those if so. post a link so we can see the whole thing, otherwise it is shots in the dark
- meisterschueler0
hi matt, just save the code above as html file.
- 7point340
is there text in the div? or anything else? an image? it will expand if there is. is there anything inside the div that could be expanding it?
how about your doctype? is it a standard complaint declaration? it could bet that ie6 is in quirks mode otherwise
- Also - there should be something in the div, too - even a comment or Gordy22
- matt310
I thought you said there was other styles you cut out of that example?
- Witt0
Well in the html example you've posted it would be nice to have some text content inside the div.
- Gordy220
I agree with the reset idea - I think its Erik Meyer who's got a really good one:
http://meyerweb.com/eric/thought…Also - it could be something to do with the float perhaps? Use a clearfix style:
http://www.positioniseverything.…
- meisterschueler0
Hi, even in the example above (without any further content) and with a browser reset css there is still the problem that the div is larger than 8 px in IE6.
I just found out that {overflow: hidden;}
seems to fix that.Though i am still a bit confused where the overflow is coming from, i appreciate your help!
Thanks a lot
- thismanslife0
I'm a little rusty with CSS but I think it's because IE "imagines" there is text (a space character) in your DIV, even when there isn't any, and so the box is stretched out to the default text height (body text). That's (probably) why the overflow trick works, it tells the DIV to let the contents spill over and not stretch out the box.
Try setting your body text to some huge size and see if the box gets bigger (don't forget to remove the overflow fix first)... just to test my theory. If it does get even bigger, I'm right. Then put back your overflow fix (or set the font size / line-height of text in the div to be tiny) and you're done.
For the record, all those reset things wont help you in this case, a DIV has no padding, no margin etc etc to be reset, they're all already zero.