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

Lee kowalkowski lee.kowalkowski at googlemail.com
Tue Dec 19 09:17:04 CST 2006

On 18/12/06, Joel D Canfield <joel at spinhead.com> wrote:
> It's not breaking in the CSS styling the navlist; it's breaking in the
> header somewhere. Here's how I'm styling #wrapper and #header:

But I still get your problem if those styles are commented out, and if
I move your navcontainer element out of the wrapper altogether.

> For the life of me, I can't see why IE is chopping off the tops of the
> tabs.

Neither can I, but then again, this isn't the approach I would have
taken at all.  Because conceptually, I have a problem understanding
why the bottom-border of the A elements would overlap the border of
your UL element.

Perhaps this is the effect of adding a border to an inline element.  I
can't recall that as being documented behaviour.  I'd love to see any
pointers on that one.  If I had done it, the overlap would be explicit
in the CSS via relative positioning.

> While I certainly don't wish to seem unappreciative of the many people
> here who've taken time (sometimes quite a bit) to look at this and come
> up with ideas, in the end, it really seems like we're all guessing.

Yeah, I spend more time than I ought to guessing how browsers might
have implemented CSS, but for your problem I was more inclined to
experiment with margin, padding and float than font-style or text
alignment.  So it's not complete guesswork.

> Is CSS really this complicated? I mean, I'm new at this kind of thing,
> so I'm not entirely surprised that I'm not finding the problem.

It depends how complicated you make it.  I certainly found it helpful
to limit my use of CSS to only the things which are available on all
my target browsers - and not to abuse known undocumented features of
certain browsers - particularly hacks based on the ability (or not) of
certain versions of certain browsers to parse CSS.

However, I do allow IE's conditional comments (because it is a
documented feature), but so far, have only needed it for IE5.5 and
under, because the box model is significantly different.

> But when
> I've clearly identified that the problem is *not* the navigation code,
> which works *perfectly* in the source page, but when copied *verbatim*
> to my page, breaks - well, it seems like everyone is trying to solve the
> wrong problem, or just plain guessing.

But the example page has no style on the navcontainer, your page does.
 If you take all that away, it works, but is subject to the
"peek-a-boo" bug (because of the background on the header element),
and giving your navcontainer a width then solves the "peek-a-boo" but
introduces your problem.

This is the point at which I would stop looking for a prevention, and
start to work on a cure, because it's almost there.  I find adding
margin-top:1px to the navlist works wonders for me, how about you?


More information about the thelist mailing list