While digging through the box positioning samples you would have noticed the text starting at different heights in the different types of boxes, in different browsers, and whether on mac or pc.
If you're a veteran designer, you may have shrugged this off. Since when did anything work across browsers and across platforms? That was some HTML dream back in the idealistic youth of the net, right?
Well no, dammit, this isn't going to happen any more. With 1996 CSS we can declare where everything is to the pixel. And what my pages are all about is writing correct code and getting the exact same result on IE, Netscape, and Opera, on PC and on Mac. I haven't gone through box debugging hell just to let the trio-nonconformity screw me over on content placement.
Yes, you can build a page and know how its going to look cross browser/platform. This section is about finding out where the trio mis-steps in content placement, and finding the common ground where they don't.
"We will fight you on the beaches, we will fight you in the fields, we will fight you in the streets. We will never surrender!"
So,
There are three box types,
Plain
Float
Absolute
There are seven browser/machine combinations,
ie5win
ie5.5win
o5.02win
n6.02win
ie5mac
o5mac
n6mac
There are two sub-types of boxes,
Those using margins and borders.
Those that do not.
In the box positioning samples I used a common box margin of 20px, padding 10px, and border 5px, so I could see errors fast. Font size was always 12px, line height 22px, paragraph margin top 20px. Hence text should start 40px below the top of the border.
It gets hard to measure this depending on the actual letter type you're measuring to, which is why I used multiples of 5. If you measure something and get 36, you can presume 35.
For boxes that touch, that is, boxes without borders and exterior margins, text should start at 35px below the top of the browser window.
That gets even harder to measure precisely because it's hard to decide what the browser is calling the top of the window. Seems to vary a little between browser makers, but only a pixel or two. Again, round off to 5.
Here's what we get,
Netscape in Win and Mac came out correct in everything except the plain box. Ie5mac gets everything right. Hurrah! This bodes well for ie6win. Opera Win/Mac screws up but is consistent across machines. Ie5win and ie5.5win screw up and don't even agree with each other.
[Quick Relevant Review note: Back in the box placement test we found Netscape ignores box top margin for a Plain box. This was fixed by setting box top margin to 0px and using the body top margin instead. When you have three columns, you combine a Plain box with a pair of Absolutes, but Absolutes are using 'top:0px' so are unaffected by this change. Floats, if you ever combine a Float and a Plain, would notice, so they would also need their box top margin set to 0px.]
Let's identify where and why each fail.
Boxes with margins and borders first.
Explorer
If I start playing with the numbers to isolate the problem, I find ... oh my good god. Paragraph margin top is always outside the box, and the paragraph margin top, box margin top, and body margin top all slide under each other. So if your paragraph margin top ever exceeds those two, the whole box top gets pushed down. Which means also means, yes, you can't use both body margin top and box margin top to get anywhere. Netscape's box problem in this area stuck us with just using body margin top anyway, but jeeze.
Any fix would have to use a variation on the box width trickery, but because the only damn thing they fixed on 5.5 was this, the new trick would fail in the newer version. In ie5.5win the Plain box starts the text at 40px. [Update: I am referring to the old box width trickery. The new one would work, but continue reading.]
So what's happening in the Floats and Absolutes?
What's happening there is paragraph margin top is now inside the box but overlaps the padding. Whichever is greater is which will decide the space.
But what's a designer to do? Making a three column box needs one plain and two absolutes. How to get the texts to all start at least at the same height, even thought they will always be a little higher in Explorer?
There is a way, but it's ugly. Change all of paragraph margin tops to zero, add that to paragraph margin bottom to preserve your formatting. You'll have to do this for any and all content that might appear first in a box of course. Padding is treated correctly across the boxes. Yes, that's an ugly approach. Bizarre code and we don't even get the texts to start at the right height, just even with each other.
UNLESS, oh my yes, unless we make the code even uglier and make a special top padding size for Explorer only, using the box width trickery. Yes, that's it! Woohoo.
Or so I thought. Then I looked into Opera.
Opera
Opera is starting both Float and Absolute content 20px high. That's a lot. And Plain boxes are okay. What's going on here?
Hm. In Floats the paragraph margin top appears to be outside the box again, and underneath box margin.
It's fixed if you use body margin top instead of either box margin top or paragraph margin top... What? When body margin top is used the box margin pushes the text down but not the box! Sweet. That's just special.
So what if I try the Ugly Explorer Fix Part I? Change all paragraph margin tops to zero, add that to paragraph margin bottom to preserve formatting. Then use padding to set the space in the top of the box and body margin top for above. Then I don't need Part II of The Ugly for Explorer either; you know, that bit with declaring a special padding for Explorer using the box width trick.
[insert noise of tippy-tap of keyboard]
Yup. It works. Here's pages modified from the box tests. A Float, and Plain with Absolutes. That's The Ugly Fix whereby the pages come out exactly the same on all browsers and machines. Score 1 for the unpaid independent designer against the Trio-Noncomformity.
On to boxes without margins or borders.
It appears we've got the same thing except for Opera. Why? Well, borders were never an issue, and neither was padding. The problem is margins being misplaced and overlapping. Here there are no top margins except for the content's. In Opera the content margin top isn't inside or outside the box. It doesn't know the box is there. It just goes up till it hits something it recognizes. So since the box is doing the same thing, Opera starts the content at the right height.
So do we need to do all that ugly code again? Well, yes. Any time it matters that text doesn't start higher when viewed in Explorer and any time at all you are going to use a Plain box because ie5win will put the content margin top above the box, shoving the box top down.
I'm sorry. I'm not happy about this either. It's really not my fault. I'm just the code monkey and this is my fix for the whole mess. I look forward to all three browsers being obsolete and unused, but that's going to be a few years. Meanwhile this is how we can make legitimate, if convoluted, code that will always work on compliant browsers, not just the junk we have now.
Did you come here from somewhere else? Not sure what is going on? Start at the beginning.
Last updated: 05 Apr 2001