Forum Moderators: not2easy
In IE, there are gaps that appear in between the list items, which I don't think should happen given the CSS I've written. The gaps don't occur in Mozilla Firefox. I have put the various borders and background colors in for debugging purposes.
Even more strangely, when I set the border in the li (border: 0px solid green;) to anything other than 0px, the gaps disappear!
Could someone try saving my code and running it in the two browsers? I have absolutely no idea what's going on.
Thank you very much
My code is below:
<html>
<head>
<style>
.sidebar2 {
font-family: Arial;
font-size: 11pt;
font-weight: bold;
background-color:pink;
width:175px;
}
.sidebar2 ul {
border: 1px solid blue;
list-style-type: none;
margin: 0;
padding: 0;
width:175px;
}
.sidebar2 li {
padding: 0px;
margin: 0px;
background-color: yellow;
border: 0px solid green;
}
.sidebar2 a {
display: block;
color: #000000;
background-color: #FFFFFF;
padding-top: 4px;
padding-right: 8px;
padding-bottom:4px;
padding-left: 2px;
margin:0px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="sidebar2">
<ul>
<li><a href="asdf">Header</a></li>
<li><a href="asdf">Link 1</a></li>
<li><a href="fdsa">Link 2</a></li>
<li><a href="fdsa">Link 2</a></li>
<li><a href="fdsa">Link 2</a></li>
<li><a href="asdf">Link 1</a></li>
</ul>
</div>
</body>
</html>
[edited by: Ohioian at 1:58 am (utc) on May 10, 2005]
<ul><li><a href="asdf">Header</a></li><li><a
href="asdf">Link 1</a></li><li><a
href="fdsa">Link 2</a></li><li><a
href="fdsa">Link 2</a></li><li><a
href="fdsa">Link 2</a></li><li><a
href="asdf">Link 1</a></li></ul>
There that looks more like what I wanted to convey!
In IE, there are gaps that appear in between the list items,
This is the IE Whitespace in Lists Bug.
While removing the carriage return from between the list items in the source is one solution, it also renders the code virtually unreadable by human eyes.
A better solution (IMO) is cure the bug with a display:inline on the list items...
.sidebar2 li {
display:inline;
padding: 0px;
margin: 0px;
background-color: yellow;
border: 0px solid green;
}
cEM
I had a similiar problem where I removed the surrounding block border to just a bottom line and things went awry when I just opened the page with the associated link... Read here:
[webmasterworld.com...]
