Forum Moderators: not2easy
In page at <snip>
I have a table on left that has a "float:left" style.
The problem is with the lists at right of the table : they have lost
their margins.
I read somewhere that adding STYLE="overflow: auto;" to the UL will
solve the problem.
In fact it does, for all browsers,... except IE.
Curiously enough, this is a bug I would qualify as bad, but I cannot
find any reference of it in the web.
Is anyone aware of some workaround ?
[edited by: swa66 at 6:57 pm (utc) on Mar. 18, 2009]
[edit reason] No personal URLs, language please see ToS [/edit]
I typically remove the default and use padding on the <ul> myself:
* {
padding:0;
margin:0;
}
ul {
padding-left:2em;
}
But in this case that brings no salvation.
If you look at this:
<!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>
<title>untitled</title>
<style type="text/css">
* {
padding:0;
margin:0;
}
ul {
background-color: yellow;
padding-left: 2em;
}
li {
background-color: orange;
}
.test {
width: 100px;
height: 100px;
border: 1px solid red;
float: left;
}
p {
background-color: green;
}
</style>
</head>
<body>
<div class="test"></div>
<p>ipso</p>
<ul>
<li>one</li>
<li>two</li>
</ul>
<p>ipso</p>
</body>
</html>
Note how the yellow part of the <ul> still sticking out of the orange part, but it's all disappeared under the red bordered floated element.
A regular element does exactly the same, but there it hurts much less as the paragraph doesn't have that sticking out bullet.
It stikes that the foat is only pushing aside the inline content, so why not try to make the <ul> inline itself:
Adding display: inline-block to the ul solves it in safari, FF and opera; although there is a risk that depending on your content surrounding the <ul> this might still yield problems. (the ul now basically is inline, as long as it's sandwiched between blocks it'll do ok ...)
Checked in IE6 and IE7: works there too, although the collapsing is a bit different, bu as long as you dont need background or broders on the list it'll do I guess.
<!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>
<title>untitled</title>
<style type="text/css">
* {
padding:0;
margin:0;
}
ul {
background-color: yellow;
display: inline-block;
}
li {
margin-left: 2em;
background-color: orange;
}
.test {
width: 100px;
height: 100px;
border: 1px solid red;
float: left;
}
p {
background-color: green;
}
</style>
</head>
<body>
<div class="test"></div>
<p>ipso</p>
<ul>
<li>one</li>
<li>two</li>
</ul>
<p>ipso</p>
</body>
</html>
Haven't tested with IE8, need to upgrade that virtual image first.
Sure, but here "different ways" means buggy or not buggy.
[edited by: swa66 at 2:32 am (utc) on Mar. 21, 2009]
[edit reason] ToS [webmasterworld.com] #25, and ToS #24 [/edit]
