Leading Space Problem

Difference in the way IE vs. others treat hard return

[MrMcTerse]

After searching WebmasterWorld, I've found no other posts relating to this "leading space" problem. It has to do with the difference in the way IE treats hard returns versus Opera, NS and Mozilla.

I have a fixed length horizontal menu made up of a series of divs. In IE I am permitted (perhaps wrongly) to insert hard returns between divs so that they line up nicely in the listing, making it possible to see all the menu items.

eg.

<div id="nv">
<div><a>Stercus</a></div>
<div><a>Accidit</a></div>
</div>

The menu still displays horizontally, with the desired spacing between objects. However, Opera, NS7 and Mozilla (Firebird & Firefox) all add a leading space to each object, which has a cummulative effect of adding several space-widths to the overall menu, and forcing the last item to wrap.

The CSS is quite ugly for this menu, but it's the only code I've come up with so far that agrees with all the browsers. See below...

The only cure I've found so far is to remove the HR's and keep all the divs on one line of source code, making it difficult to read/modify the menu code. This effectively removes the leading spaces that occur in Op7,NS7 and Moz.

eg.

<div id="nv">
<div><a>Stercus</a></div><div><a>Accidit</a></div>
</div>

Is there a cure for this problem that will permit me to keep the tidy list?

Addendum: (added 2004-04-01:1340 -7GMT)
I should add that if the menu is treated as a list (with slight style rule differences), the result is the same.

eg.

<div id="nv"><ul>
<li><a>Stercus</a></li>
<li><a>Accidit</a></li>
</ul></div>
 versus
<div id="nv"><ul>
<li><a>Stercus</a></li><li><a>Accidit</a></li>
</ul></div>

CSS Reference

#nv{
height:26px;
text-align:center;
background-image:url(../images/bg1.jpg);
background-repeat:repeat-x
}
#nv div {
display:inline;
font-family:sans-serif;
font-size:12px;
text-align:center;
line-height:25px
}
div#nv a{
padding:5px 0;
text-decoration:none;
color:#108;background:inherit;
background-image:url(../images/bg1.jpg);
background-repeat:repeat-x
}
div#nv a:hover{
padding:5px 0;
color:#a02;background:inherit;
background-image:url(../images/bg2.jpg);
background-repeat:repeat-x
}
#nv ul {
margin:0;
text-indent:0;
text-align:center
}
#nv li {
display:inline;
font-family:sans-serif;
font-size:12px;
text-align:center;
line-height:25px
}
li#nv a{
padding:5px 0;
text-decoration:none;
color:#108;background:inherit;
background-image:url(../images/bg1.jpg);
background-repeat:repeat-x
}
li#nv a:hover{
padding:5px 0;
color:#a02;background:inherit;
background-image:url(../images/bg2.jpg);
background-repeat:repeat-x
}
.av{
padding:5px 0;
font-weight:bold;
color:#a02;background:inherit;
background-image:url(../images/bg1.jpg);
background-repeat:repeat-x
}

[edited by: MrMcTerse at 10:39 pm (utc) on April 1, 2004]

[john_k]

I think it is IE that is not following the standard that all whitespace equals one space. So any of these character combinations should be rendered as a single space:

- a single space
- two spaces
- twenty spaces
- a return
- a tab
- any combintation of the above