Sent by Gunlaug_Sørtun on 15 February 2005 04:04
Andrew Mason wrote:
> http://www.pandamouth.org/randolph/
> I'm having a hard time getting this vertical list nav menu to stick
> together.
Me to. :-)
It's the default line-heights and display-properties that causes most
problems here. And IE/win adds in some "white-space in source-code"
problems (just for fun, I guess).
This will do in FF, Op and IE6 (and probably most others):
HTML:
<div id="buttons">
<img style="float:right; margin-left: -130px;" src="feature_.jpg" alt="" />
<ul>
<li><img src="woodtop0.gif" alt="" /><br /></li>
<li><a href="http://www.pandamouth.org/randolph/index.html"><img
src="home0002.gif" alt="Home" /></a></li>
<li><a href="http://www.pandamouth.org/randolph/shop.html"><img
src="shop0000.gif" alt="Shop" /></a></li>
<li><a href="http://www.pandamouth.org/randolph/delivery.html"><img
src="delivery.gif" alt="Delivery" /></a></li>
<li><a href="http://www.pandamouth.org/randolph/events.html"><img
src="events00.gif" alt="Events" /></a></li>
<li><a href="http://www.pandamouth.org/randolph/contact.html"><img
src="contact9.gif" alt="Contact" /></a></li>
<li><img src="woodbott.gif"/></li>
</ul>
</div>
CSS:
div#buttons ul,div#buttons ul li, ul li a,div#buttons ul li a img {
display: block;
line-height: 0;
}
@media all {
*html div#buttons ul li {
display: inline;
}
}
Note the <br /> in the first <li> only. It has no line-height, and kills
the last gap in IE/win.
Note also this 'margin-left: -130px;' on the floating image. That makes
the <div id="buttons"> flow up in IE/win and Opera-- just like in FF.
And don't forget to include those alt-attributes on *all* images.
regards
Georg
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/