Sent by Big John on 19 March 2003 16:04
Mike Combs wrote:
> I'm trying to represent our main menu semantically as a list of links, but
> visually as a horizontal row of tabs. Something like this:
>
> * home
> * section 1
> * section 2
>
> Becomes:
> /home\/section 1\/section 2\
-snip-
> The solution I've got works great in Mozilla, but fails in IE. In IE, the
> tabs won't line up horizontally. They either stack vertically, or form a
> downward staircase, depending on the vertical size of the tabs.
>
> The approach I've tried is to represent each list item as a block. This
> gives me the ability to set the size of the block to match a background
> image, and specify the image, all from the CSS. To make them line up
> horizontally, I just plugged in float:left. Any solution I tried that
> didn't make the list item a block didn't give me width and height control
> over the tab size.
> http://www.kangooz.com/tabskins-css.html
Mike, if you apply a 1px border to the <li>'s, you will see
what's going on. In mozilla, the list items in your demo
are 0px in height, and since the <a>'s are floated,
and there are no 'cleared' elements following the links,
the <li>'s just stack up at the top of the <ul> in an
0px tall batch.
The floated links hang down from that dimensionless line, so
it appears to work fine. IE and Opera however, give the <li>'s
one line height by default, so each float hangs down from a
lower level. Normally they would stack vertically, but because
the floats are slightly taller than the default height of the
<li>'s, each one is lifted up to the top of the containing <li>,
then slid along to the left, until it bumps into the protruding
bottom edge of the preceeding float, where it comes to rest.
Thus the 'staircase'.
If the floats are shorter, then indeed they stack vertically.
This does not mean that Opera and IE are 'buggy', rather that
lists are quite variant across browsers.
Try removing the float rule from the links and putting it on the
list items, along with a width. To space them horizontally,
give the items 'margin: 0 0 0 3px;'. IE has a default space there
already, so use the child hack to hide this margin from IE:
ul {margin: 0;}
html>body ul {margin: 0 0 0 3px;}
HTH
Big John
=====
^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-
| Perennial student + Impractical joker + CSS junkie = Big John |
| XXXXXXXXXXX <http://www.positioniseverything.net> XXXXXXXXXXXXXXXXX |
| XXXXXXXXXXXXX <http://users.rraz.net/mc_on_the_rocks/> XXXXXXXXXXXX |
-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^
__________________________________________________
Do you Yahoo!?
Yahoo! Platinum - Watch CBS' NCAA March Madness, live on your desktop!
http://platinum.yahoo.com
