[thelist] dangerous CSS, was: Netscape... why?

[Samir M. Nassar]

Erik,

Well it does seem impossible to me too sometimes. And I can spend hours
on a style sheet to get it 'just so' with as many browsers as possible.

However, 'just so' doesn't always do the job and some calculated
flexibility is in order.

If I may give an example:

For reference:

the site is RedConcepts.NET http://redconcepts.net
the style sheet can be found at http://redconcepts.net/styles/screen.css

I wanted to play with with a tabbed interface using only CSS and DIVs. I
found out about style-switching with .class:hover from A List Apart
(Again that Eric Mayer fellow ;) ) so I thought to myself 'ooh goody'.

What I wanted to achieve was to have the 'tabs' (just anchors with
borders) look like tabs and not like boxes over the content area. This I
tried with z-index. Now, my main development browsers have been Opera
and Konqueror (Linux) and they manage to implement z-index quite nicely.
And even with z-index off they render the pages like I 'want' them to. I
gather that this is also the correct way to do it since it is my
impression that a preceding DIV should get covered by a following DIV if
they overlap and no z-index is indicated. However I could be wrong, and
more to the point, it doesn't matter that much.

When it came to rendering the pages in IE 5 and 5.5 (Windows) the
z-index must have been considered a suggestion at best, because z-index
wouldn't put my tabs below the content area. I didn't research whether
this was a known "MSFT Feature (tm)". In Mozilla (0.9.7 - 1.0.0) (Linux
+ Windows) it didn't fare any better. But from what I could tell when I
researched it it was a known bug.

So I am actually implementing things correctly and yet I am confined to
a very small browser base with the intended look.

So what do I do? Bloat things with JavaScript and sniffers? No. Why?
Because after all the work I could just have gone with tables and made
my life easier. But who 'chooses' tables? Urg! Gaak!

The next revision will see the 'tabs' replaced by boxes floating a few
pixels over the content area. This gets rid of cross-browser issues and
it actually ends up looking better than what I have now, correct
rendering or not. As a side benefit I am actually getting better visual
integration with the new logo since it was mentioned that the current
one isn't exactly 'original'.

Ok, this is a longer post.

So did I get what I wanted to start out with? No.

Is this bad? Yes and no. Yes it sucks, because all browsers should
render CSS2 without bugs. Then again, it isn't exactly a deal killer,
since it is actually giving me a better UI than I started out with in
planning as an end effect.

In the end the version I am working on now looks just as fine in IE, NN,
Moz and Opera. It has a Fluid layout, and goes down to 550 pixels in
width without horizontal scroll.


Samir M. Nassar
RedConcepts.NET - http://redconcepts.net