CSS AUTOPSY
>>UPDATE! This page is out of date. And some of the ie5/5.5 fix info is plain wrong. Use the new box lesson dealing with a full set of boxes from simple to complex. 28Mar01 <<
This is a travelogue of the problems I'm running into while building a 3 column page with a full width top box using only CSS. It has to run on modern browsers, and show all others a style-less page with a helpful Browser Upgrade banner across the top. Have look at the longer explanation on the example page itself, and you probably want to pop open a window with the css file too.
So far:
IE5Win Weird Pixel Shift Bug - 3/3/01 16:13:10
Top Box Problem with P Margin - 3/3/01 14:56:23
IE4.5Mac Problem - 3/4/01 23:31:49 *unsolved*
Update 07-Mar-01: Eric Costello is grouping attempts at 3 column CSS over here. Right on.
IE4.5Mac Problem - 3/4/01 23:31:49
This is depressing.
Although I can make a page that runs on IE5Win, N6, O5, it breaks badly on IE4.5Mac. And IE4.5Mac knows enough css to find the style sheet, so it doesn't show a style-less page with the Upgrade Banner across the top.
Which is a bit of a "so what" for personal sites, but it's a concern for commercial site builders. Clients won't like this. Someone with a relatively new Mac can end up with a scattered page and no idea why. Someone who may indeed be a potential customer. That's enough to scare clients back to tables. Which will slow the WaSP's campaign right down. And damn me to fudging tables for two more years.
So it's not trivial. A solution for the problem is important.
Here's what it looks like.
I don't have a mac, so I'm making guesses from a screenshot that was sent to me. Looks like IE4.5Mac doesn't understand absolute boxes. That's the right hand box over on the left. I presume the left-hand box is below or underneath. Other than this, the alignments appear to be spot-on. I've spent a good part of today trying to get three columns in other ways, but without success. And for the moment I don't know what direction to go in.
Suggestions anyone? Right now I'm digging through bug charts and the CSS1 specs, looking for clues.
IE5Win Weird Pixel Shift Bug - 3/3/01 16:13:10
There's a special IE5/Win glitch that's not in IE5.5/Win and gave me some grey hair trying to figure it out. See the big text I'm using for the title "Box Lessons" in the tutorial/example page? Every time I put that in, the middle box rose just a few pixels, sliding under the top box and ruining my aligned image. Turns out you have to keep all line-height to font-size ratios the same, or this bug appears. So to get the words close together again I used a negative value in the first word's bottom-margin.
Top Box Problem with P Margin - 3/3/01 14:56:23
Okay, There's three columns and a box across the top. For clarity, BG is now blue, And all columns are white except the right one which is transparent. There are no borders.
All my playing around in css to get the top box and three columns rendered the same in all three browsers worked great UNTIL I put text in the top box. Opera took the P margin-bottom and compressed the 100px high top box.
I don't know why. Netscape didn't do this. Why Opera? Which one is doing what differently and why? The fix is set P margin-bottom to zero, and use an empty P line for breaks. (Using BR is dicey because IE5Win gives it a different size) But that's pretty limiting in an already limited area... I'm trying to reduce the amount of specialized markup because that's at odds with the idea of css. So if someone can figure out what's going on then perhaps we can have a better fix.
The other gem I got wrong is the alignment in IE5Win. You can see in the three piece airplane image that it's off about a pixel left and up. Might be a typo in my special sizes for IE5Win. I'll get to that next. (Got it. See update.)
