Forum Moderators: not2easy
I'm making a CSS site with list menus and got problems with an annoying extra space in Internet Explorer 6 and 7. It looks fine in Firefox and Opera.
Google and Webmaster World searches tells me that this is a known and common problem and there are solutions. Unfortunately these solution didn't do it for me, therefore I'm looking for some extra help.
The menu area on the site looks like this:
<div class="leftcol">
<div class="menustart"></div>
<div class="menu">
<ul>
<li><a href="#">Video</a><li>
<li><a href="#">Video</a><li>
<li><a href="#">Video</a><li>
<li><a href="#">Video</a><li>
<li><a href="#">Video</a><li>
<li><a href="#">Video</a>
<div>
<ul class="sublevel">
<li><a href="#">Action</a></li>
<li><a href="#">Comedy</a></li>
</ul>
</div>
</li>
<li><a href="#">DVD</a>
<div>
<ul class="sublevel">
<li><a href="#">Blu-Ray</a>
<div>
<ul class="sublevel2">
<li><a href="#">HD-DVD</a></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="menuend"></div>
</div>
.leftcol { float:left; height:450px; }
/* navigation */
.menustart { width: 200px; height: 68px; margin: 0 0 0 0; padding: 0 0 0 0; clear: both; background-image: url(images/menu_top.jpg); }
.menuend { width: 200px; height: 31px; margin: 0 0 0 0; padding: 0 0 0 0; clear: both; background-image: url(images/menu_bottom.jpg); }.menu { float: left; width: 200px; height:auto; background-image:url(images/menu_bg.jpg); }
.menu ul { padding: 0; margin:0; list-style:none; }
.menu h2 { color: #5A5A43; font-family:Verdana, Arial, Helvetica, sans-serif; line-height: 10px; margin: 0; padding: 0; }
.menu li { /*display: inline*/ padding:0; margin:0; }
.menu li a { font-size: 11px; color: #000000; display: block; padding: 0 0 0 7%; text-decoration: none; width: 95%; }
.menu li a:hover { font-size: 11px; color: #6e6e6e; display: block; padding: 0 0 0 7%; text-decoration: none; width: 95%; }
.sublevel li { text-indent: 1.4em; }
.sublevel a { font-size: 11px; color: #000000; display: block; padding: 0 0 0 7%; text-decoration: none; width: 95%; }
.sublevel a:hover { font-size: 11px; color: #6e6e6e; display: block; padding: 0 0 0 7%; text-decoration: none; width: 95%; }
.sublevel2 li { text-indent: 2.3em; }
.sublevel2 a { font-size: 11px; color: #000000; display: block; padding: 0 0 0 7%; text-decoration: none; width: 95%; }
.sublevel2 a:hover { font-size: 11px; color: #6e6e6e; display: block; padding: 0 0 0 7%; text-decoration: none; width: 95%; }
I tried to implement the solution found in this guide (but not with success): [456bereastreet.com...]
Anyone have a working fix for this problem, please? =) I don't know what to do or where to start now after spending too many hours on this.
Please, all help appreciated.
EDIT: I've also tried the "fish fix" for CSS lists, but no luck here either.
[edited by: Floating at 10:15 am (utc) on Aug. 6, 2007]
<li><a href="#">Video</a></li>
<li><a href="#">Video</a></li>
<li><a href="#">Video</a></li>have this:
<li><a href="#">Video</a></li><li><a href="#">Video</a></li><li><a href="#">Video</a></li>or... if you want them on separate lines to make them easier to read, do something like this:
<li><a href="#">Video</a>
</li><li><a href="#">Video</a>
</li><li><a href="#">Video</a>
</li>the important thing is that there is no space between </li> and <li>
[edit... i've just noticed, you haven't closed some of the <li>'s properly near the top of your code. you have put <li> instead of </li>. maybe that has something to do with it as well]
I need to say; this is the most embarrassing forum moment in history. You were right. The list tags looked like this: <li>Test<li> without the slash in </li> to end it. I will never understand how I couldn't see this.
Well, however, now it's working flawless! Thanks for the help!
Delete thread? =)
