[thelist] CSS again: suspected IE funkiness on inline UL

ben morrison morrison.ben at gmail.com
Fri Dec 15 04:47:13 CST 2006

On 12/14/06, Rob O'Rourke <rob at sanchothefat.com> wrote:
> Joel D Canfield wrote:
> >> No bottom border instead of a white one, relative position, shifted
> >> down a pixel to overlap the bottom border of the UL element, so in
> >> your .currentpage rules:
> >>
> >>   border-bottom: 0;
> >>   position:relative;
> >>   top:1px;
> >>
> >
> > then, go look at it in FireFox, which gets the existing rules right :)
> >
> > yeah, tried that, hoping somehow FireFox would read my mind. It didn't.
> > If I can only have it right in one browser, I'm stubborn enough to make
> > it FireFox (at least this afternoon I am) and I'd really really prefer
> > not to resort to IE hacks, but I also realize that, in the real world,
> > sometimes that's what you do. I just don't know what that would be, and
> > I don't even wanna know unless there's not a 'unhacky' fix.
> >
> > joel
> >
> Hi Joel,
> Unless you want that navlist centred I'd reccommend floating those list
> items left instead of displaying them as inline elements. That way you
> can treat the anchor tags as block level elements and things should be
> more consistent in IE.
> Take a look at some of the examples on listamatic for guidance:
> http://css.maxdesign.com.au/listamatic/
> You will probably need to float the <ul> to contain the <li>s and then
> use a clear: both; rule on your main content area.
> Also watch out for IEs doubled float margin bug, use display: inline; on
> the <li>s themselves then display: block; on the links within.

I'd agree with this approach as well, floating them gives you much
more control over the layout. To achieve the bottom border you may
find it easier to use a background image.

I've knocked up a quick example here:



Ben Morrison

More information about the thelist mailing list