[headbirth]

Question:

I have several images lined up in a row (not using tables) and when I apply a "span class" to everything except the the first item the spanned items are returned and placed below the unspanned item.

<div id="nav" class="nav">

<p class="navBar" >
<img src="Site/Art/Navigation/NomadicMind.jpg" alt="NomadicMind" width="201" height="39">
<span class="navGround">
<img src="Site/Art/Navigation/Mag.jpg" alt="?" height="13" width="13" border="0" vspace="5">
<img src="Site/Art/Navigation/LevelSep.jpg" alt="|" height="9" width="9" border="0" vspace="8">
<a href="javascript:toggleID(4);"><img src="Site/Art/Navigation/Whereabouts.jpg" alt="Whereabouts" height="9" width="79" border="0" vspace="8" name="whereNav"></a>
<img src="Site/Art/Navigation/LevelSep.jpg" alt="|" height="9" width="9" border="0" vspace="8">
<a href="javascript:toggleID(3);"><img src="Site/Art/Navigation/Work.jpg" alt="Work" height="9" width="32" border="0" vspace="8" name="workNav"></a>
<img src="Site/Art/Navigation/LevelSep.jpg" alt="|" height="9" width="9" border="0" vspace="8">
<a href="javascript:toggleID(2);"><img src="Site/Art/Navigation/NewsOn.jpg" alt="News" height="9" width="31" border="0" vspace="8" name="newsNav"></a>
</span>
</p>

</div>



I would like to avoid using tables to create this. But I'm actually having troubles with the table version in Netscape and IE. Neither seems to respect the cell settings.

<div id="nav" class="nav">

<table height="39" width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td width="5"></td>
<td width="201"><img src="Site/Art/Navigation/NomadicMind.jpg" alt="NomadicMind" width="201" height="39"></td>
<td align="left" valign="bottom" class="navGround2">
<img src="Site/Art/Navigation/Mag.jpg" alt="|" height="13" width="13" border="0" vspace="5">
<img src="Site/Art/Navigation/LevelSep.jpg" alt="|" height="9" width="9" border="0" vspace="8">
<a href="javascript:toggleID(4);"><img src="Site/Art/Navigation/Whereabouts.jpg" alt="Whereabouts" height="9" width="79" border="0" vspace="8" name="whereNav"></a>
<img src="Site/Art/Navigation/LevelSep.jpg" alt="|" height="9" width="9" border="0" vspace="8">
<a href="javascript:toggleID(3);"><img src="Site/Art/Navigation/Work.jpg" alt="Work" height="9" width="32" border="0" vspace="8" name="workNav"></a>
<img src="Site/Art/Navigation/LevelSep.jpg" alt="|" height="9" width="9" border="0" vspace="8">
<a href="javascript:toggleID(2);"><img src="Site/Art/Navigation/NewsOn.jpg" alt="News" height="9" width="31" border="0" vspace="8" name="newsNav"></a>
</td></tr></table>

</div>

these are the classes used:


.navBar {
height: auto;
clip: rect;
display: block;
}

.navGround {
border-bottom: 1px solid #404040;
display: block;
background: #e0dedf;
height: 39px;
}

Any input would be appreciated.

[registered_user]

.navGround {
display: block;
}

causes the browser to put .navBlock on its own line.

I think that's your issue.

[Millennium]

If you change <span class="navGround"> tag from a span to a div, you can get rid of all the CSS for it; this is the kind of thing that divs are for.

However, as registered_user points out, that doesn't seem to be what you want. It would be better to remove display:block from the navGround class; that will force it to inline. Is there any reason that this won't work?

[headbirth]

Thanks guys! I'll give them both trys and let yah know how it comes out.