Forum Moderators: not2easy
I get a weird error with the following code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Foo</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
ul {
list-style: none;
}
li {
border: 1px solid red;
display: inline;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Foo</a></li>
<li><a href="#">Bar</a></li>
</ul>
</body>
</html>
I tried triggering hasLayout with "height: 0;", tried playing with line-height, tried different height values. Finally, the only way I could get it to work was to add enough padding to the ul to give room for the li's padding + border.
I tried changing the doctype, but that didn't seem to change anything. Does anybody have any idea what this bug is? Is there a better way to fix it than adding padding to the ul?
Thanks,
Ian
Try this definition for the li element
li {border: 1px solid red; display:inline-block; float:left}
See the display and float rules.
It may be a better way to solve it. I only test it on IE7.
Good luck.
Miguel Gonzalez.
Miguel Gonzalez.
li {
border: 1px solid red;
float: left;
margin-right: 10px;
}seems to work in both IE and firefox.
Interesting: it works, but then FF and IE disagree on the positioning of the list items.
I can't see in the w3.org specs why this works. Nonetheless, I think I kinda prefer setting the padding different for IE, so that it's semantically clear what's going on, rather than floating an element that really doesn't need to float.
Thanks!
This may helps, W3C - CSS - 10.6 Computing heights and margins [w3.org]
You actually don't need to make those div to float, you could do...
<ul style="border:1px solid white">
If your background is white.
To see what's going on, run the following code on IE and FF.
<!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=utf-8" />
<title>Untitled 1</title>
<style type="text/css">
div{border:1px solid aqua}
ul{display:inline}
li{border:1px solid lime;display:inline;width:10px;padding:4px}
</style>
</head>
<body>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
</html>
Have a look at how those li elements overflow the div element.
The different between IE and FF is the way they compute the height. As the CSS recommendation says, to compute an element height it depends of if it is a inline, block, float...... and also the way IE and FF count where a block starts, at the margin, at the border, at the padding......
Anyway, this is part of the CSS and browsers fun, I hope you enjoy it.
