CSS Niggles

[David]

Don't get me wrong, I love CSS but boy can it be annoying.

I'm currently trying to develop a tabbed global nav menu for the expanded CADTutor website. All was going well, the CSS looks very straightforward and the resulting code rendered perfectly in IE (see below).

http://www.websitearchitecture.co.uk/watson/postimages/css-pah1.gif

I didn't expect any problems because the CSS seemed perfectly logical and the results I expected are the ones I got. Until, that is, I rendered the page in Firefox (see below). Notice the annoying gap to the left of the tab and the option seperators have dropped on pixel.

http://www.websitearchitecture.co.uk/watson/postimages/css-pah2.gif

I thought I'd better check Opera (see below). Same annoying gap but this time the option seperators have dropped 2 pixels.

http://www.websitearchitecture.co.uk/watson/postimages/css-pah3.gif

I know I'm repeating myself here and I'm sure IE is probably wrong and either Firefox or Opera are right but the fact remains that IE is a far more logical browser to render for.

Of course, I'm not going to stop here, even though 85% of my users are using IE, there is now a solid 10% using Firefox. I can't have the site looking broken for 1 in 10 of my visitors. :(

For your utter enjoyment, the relevant CSS is shown below:

.PageHeader .globalnav
{
background-color: #EBECE0;
}

.PageHeader .globalnav ul
{
list-style:none;
padding:9px 15px 4px 15px;
margin:0;
}

.PageHeader .globalnav li
{
display:inline;
text-align:center;
padding: 2px 15px 5px 15px;
margin:0;
}

.PageHeader .globalnav li.sep
{
background: url(Images/nav-sep.gif) top right no-repeat;
}

.PageHeader .globalnav li.here
{
background: url(Images/nav-here.gif) top right no-repeat;
}

.PageHeader .globalnav li a
{
text-decoration:none;
color:#4C5869;
border-bottom:2px none transparent;
}

.PageHeader .globalnav li a:hover
{
border-bottom:2px solid #DA7C20;
}

Note that I do not recommend the use of CSS classes for unique divisions of a page (as used in this code). They should really be IDs but I'm working with an off the peg CMS and I'm not minded to rewrite all the CSS and change every template file. :P

[francis]

Are you using someone elses code? I've used Douglas Bowman's sliding doors (http://www.alistapart.com/articles/slidingdoors) and have never had a problem with it. There's also sliding doors 2 (http://www.alistapart.com/articles/slidingdoors2), but I haven't really looked at that.

[James]

I think the problem is that IE and Firefox have their own DEFAULT positions, before user-defined CSS is applied. I have found this countless times with redesigning my site and it's infuriating. I think that all HTML tags have default padding, margins and line heights etc, but they're not the same in IE and Firefox. Do you know what I'm trying to explain?

To be frank, I don't care whether IE / Firefox is right / wrong. All I know is they render code differently and it makes what should be a beautiful science a junk science.

[francis]

They do (all browsers define their own margin and padding), which is why people have started flattening down all HTML elements at the beginning of a CSS file (you can have a look at the screen stylesheet for my brother's site (http://www.willstorr.co.uk/screen.css) for an example at the top). Some people have started to say that using the * selector is over-zealous (http://kurafire.net/log/archive/2005/07/26/starting-css-revisited), but it works for me. You'll also notice that I use the * selector to remove the bullets from all ordered and unordered lists.

[David]

Thanks for the sliding doors link Francis, I will certainly give it a go. Why struggle when someone else has already sorted it out. Of course, there are benefits to the struggle but I think on this occasion I'll just grab the code and run :o

BTW sliding doors 2 has some fixes for inconsistencies and adds rollover states. They are a pretty neat pair of articles.

[francis]

Indeed! Sliding Doors was orignally developed for Apple's site, but they didn't use it. Douglas Bowman is a CSS-god - weird that he doesn't have a book out. His site, stopdesign, is very pleasent and, if you fire up anything other than IE and take a look at his photo galleries (http://www.opera.com/support/search/supsearch.dml?index=800), there's some very nice CSS going on with the "next photo"/"previous photo" thing.

[David]

I'll check that out. In the meantime, what do you think of the ALA makeover? I always thought the previous version a bit dull and Zeldman seems to agree (http://www.alistapart.com/articles/ala40). I think this is an improvement but I'm not sure I really like it. It is very erm... American.

[francis]

The new ALA has been live for a few weeks now - I was wondering if/when anyone else here would notice :)

When I first saw it, I really didn't like it - there wasn't anywhere for the eye to settle on and I felt the colours where very muted. Turns out that that's exactly what Jason Santa Maria (http://www.jasonsantamaria.com/archive/2005/08/23/a_list_apart_redesign.php) was after (good interview here (http://www.stuffandnonsense.co.uk/archives/a_list_taken_apart.html)). There's a big hoo-haa about the site as it's fixed width and doesn't support 800x600 - the argument being that their audience doesn't use that resolution and, as technology increases, neither will anyone else. From a technical point of view I would have been more impressed if they'd implemented a liquid CSS site - fixed is so much easier to code for.

I felt, and still slightly feel, that using one of the four columns on the logo is a waste. On the other hand, it's a design that I haven't seen before and, like the best albums, is growing on me. Not sure about the laurel wreath behind the text - it feels quite narcissistic (mmm, Opera's spell checking can't cope with that word).

I've grown to like it over the past few weeks as I've dipped in and out of it for reference material. The most annoying thing was seeing a post on Eric Meyer's site where he was stuck on a CSS printing bug for the site. I had struggled and eventually de-bugged exactly the same thing for work a few days earlier, but someone else beat me to posting the fix :( I could have been "famous" for helping a CSS guru out. Oh well...

Launch spiel here: http://www.alistapart.com/articles/ala40

[David]

Yes, I was very surprised at the fixed width but not by the lack of 800px support. I've now come to that same conclusion about the CADTutor site. I agree that the new design does seem to lack a bit of focus but it is extremely clear and well laid out. Again I agree about the waste of space in the logo column, it does seem a bit profligate. Still, I do like the print media CSS - works very well and again is clear but a quick test did result in a few orphans. I'm not sure if current CSS can handle this - I know it's something considered for the future. So there's good and bad in this design. I'd just like to have seen a flash of orange somewhere for interest.