1. Home
  2. Forums Index
  3. Browser Side / CSS 4:27 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Unwanted spaces between LI's

menu breaks in IE (Win)

         

dcrombie

2:31 pm on Dec 11, 2003 (gmt 0)



I've been beating my head against wall on this one - main problem is that I don't have a Windows box available for testing. Does anyone know why IE is inserting spaces between the menu items (and how to stop it) in: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
 <TITLE>Menu Test</TITLE>
 <STYLE type="text/css">
 BODY {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 background-color: #999;
 }
 UL#nav {
 margin: 0;
 padding: 2px;
 position: absolute;
 top: 95px;
 left: 17px;
 width: 120px; /* only req'd for MSIE */
 background-color: black;
 list-style-type: none;
 }
 UL#nav LI {
 margin: 0;
 padding: 0;
 }
 UL#nav A {
 display: block;
 margin: 0;
 padding: 3px 3px 3px 12px;
 background-color: #f90;
 border-bottom: 1px solid black;
 border-left: 10px solid #fc6;
 color: #fff;
 font-size: 14px;
 text-align: right;
 text-decoration: none;
 }
 UL#nav A.last {
 border-bottom: none;
 }
 UL#nav A:after {
 content: " >";
 }
 UL#nav A:hover {
 color: black;
 }
 </STYLE>
</HEAD>
<BODY>
<UL id="nav">
 <li><A title="home" href="index.html">home</A></li>
 <li><A title="links" href="links.html">links</A></li>
 <li><A title="contact us" class="last" href="contacts.html">contact us</A></li>
</UL>
</BODY>
</HTML>

Surely this is a simple fix... Anyone?!?

stever

2:44 pm on Dec 11, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Take out the display : block and give the link a width instead?

dcrombie

2:49 pm on Dec 11, 2003 (gmt 0)



Without "display: block" all the block-formatting for the A goes out the window...

stever

2:57 pm on Dec 11, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



How about just the width then?

aevea

3:12 pm on Dec 11, 2003 (gmt 0)

10+ Year Member



You might try putting the list items all on a single line in the html. Sometimes the whitespace messes up ie 's formatting.

Adam

stever

3:37 pm on Dec 11, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Here's the relevant CSS that works for me on a similar menu (code is based on the Uberlink Menu System);

#hire ul {
margin: 0; /*removes indent IE and Opera*/
padding: 0; /*removes indent Mozilla and NN7*/
list-style-type: none; /*turns off display of bullet*/
}
#hire li {
margin: 0 0 10px 0;
}
#hire a {
/*/*/display: block;
padding: 2px 2px 2px 15px;
border: 1px solid #333;
width: 130px;
background-color: #999;
background-image: url(images/buttonnormal.gif); /* */
}

dcrombie

5:08 pm on Dec 11, 2003 (gmt 0)



aevea's tip has done the trick. I needed to remove all line breaks following the </li>'s.

ie.
<UL id="nav">
<li><A title="home" href="index.html">home</A></li><li><A title="links" href="links.html">links</A></li><li><A title="contact us" class="last" href="contacts.html">contact us</A></li></UL>

I know IE is a pretty useless browser - but that's INSANE!
Is there any CSS option that would have the same effect?

aevea

6:01 pm on Dec 11, 2003 (gmt 0)

10+ Year Member



Not that I know of.

Adam

dcrombie

6:23 pm on Dec 11, 2003 (gmt 0)



I've found a thread on another site that suggested:

LI {display: inline}
A {display: block}

but I can't test it from here.

dominicc

10:03 pm on Dec 11, 2003 (gmt 0)

10+ Year Member



I had a fiddle cos I have absolutely not had to take care of spaces in the HTML since I stopped using table based layouts. The result is quite different to what you had because I had trouble getting my head around your style, which is like opposite to mine. Whereas I always go for the first most opportunity to achieve the style (top down), you seem to work bottom up. I haven't seen that before. It's all good!

The code was tested on IE6SP1, Mozilla 1.2.1, Opera 7, and Konqueror 3.1: 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<HTML> 
<HEAD> 
 <TITLE>Menu Test</TITLE> 
 <STYLE type="text/css"> 
 BODY { 
 font-family: Verdana, Arial, Helvetica, sans-serif; 
 background-color: #999; 
 } 
 UL#nav {
 display:block;
 position:absolute;
 top: 95px;
 left: 17px; 
 width:110px;
 margin:0;
 padding-left:10px; 
 border:2px solid black;
 background-color:#fc6; 
 list-style-type: none; 
 } 
 UL#nav LI { 
 display:block;
 width:100%;
 margin:0; 
 padding:2px 0px 3px;
 border-top:1px solid black;
 background-color:#f90;
 text-align:right;
 }
 UL#nav LI.first-child {
 border-width:0px;
 }
 UL#nav A {
 padding:0px 3px;
 color:#fff;
 font-size:14px;
 text-decoration: none; 
 }
 UL#nav A:after { 
 content: " >"; 
 } 
 UL#nav A:hover { 
 color: black; 
 } 
</STYLE> 
</HEAD> 
<BODY> 
<UL id="nav">
 <li class="first-child"><A title="home" href="index.html">home</A></li>
 <li><A title="links" href="links.html">links</A></li>
 <li><A title="contact us" href="contacts.html">contact us</A></li>
</UL>
</BODY> 
</HTML>

dcrombie

9:03 am on Dec 12, 2003 (gmt 0)



The original version came from: Taming Lists [alistapart.com] which (IMHO) is way more scarey than what I ended up with (-;

Your code is probably a bit more reliable, but doesn't quite look the same in Safari (my browser of choice). If you compare them on Dan Vine's iCapture site (free Safari screen-shots) you'll see that the 1px black dividers are meant to fade out to the left instead of stopping all-of-a-sudden as they do in other browsers.

Thanks everyone for your help.
;)

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 4:27 pm May 1, 2026