;
Agreed, ie6 is a pain. So many rendering bugs... left margin with floating blocks, vertical spacing between titles and paragraphs, lack of support for fixed...
But Mozilla does have a few of its own. Say you have a large block, which you're filling with smaller blocks, horizontally, from left to right. The first block in the sequence gets its height and width dimensions ignored. If you put nothing inside it, it disappears. If you put text, say just "x", the block on the right will creep under the the x. The solution I found was to put a 1 pixel wide dummy block as the first:
/* a bug with Mozilla causes the
first block to be lost so s_dummy
is here so that it's not here, just
so that the next block really *IS*
here... */
div#s_middummy
{
height: 400px;
width: 1px;
margin: 0;
padding: 0;
float: LEFT;
clear: none;
background: none black;
}
Another is... Okay, say you have blocks b and c within another block a. Now, you define H2, for example, as a specialization for a. The specialization should be inherited in blocks b and c, and in ie it is. In Mozilla, well, sometimes it is, sometimes it isn't.
In my case, for instance, b and c are my 1st and 2nd columns. They are contained within another block called "s_content" for which there is an h2 specialization. At one point, the specialization was showing for the 2nd column, but NOT showing for the first, even though the code for the two was identical. The only way to make it work was to explicitly specialize h2 for s_column1 and s_column2, as well as for s_content.
Yeah, so, compatibility blues we're talking... Well, I've finally got this template to look fairly the same in ie6 and Moz, but it was the kind of work I would not recommend to anyone who's quit smoking in the past year. I guess most HTML writers are a bit less picky than myself or something. The closest thing I found on the net as compatibility fixes go dates back to ie5. Here we are in ie6 days, and his hack doesn't work exactly as advertised.
Allright, I'm blabbing too much. To the point: I can't explain to you how exactly this hack works, and I can't even tell you exactly what it was supposed to do. So, what CAN I tell you? Well, for one thing, it works! To make a long story short: It seems to me ie5 used to push everything to the right to make room for something. 16 pixels I believe. Again, I found somewhere someone who said that the b.. er.. 'feature' applied only to floated blocks. And, yes, I noticed in ie6, if you float a block left to the edge of the screen, it does not go all the way to the edge. But that wasn't MY problem, as I only used absolute-position'ed blocks to split the screen into a top, middle and bottom parts, and then injected smaller blocks floted left inside the larger blocks, and then that bug doesn't seem to apply. So, what was MY problem?
Simply put: I have a background texture that draws the vertical lines. If I adjusted my borders, margins and paddings so that the text in the two columns was centered in Mozilla, in ie6 it was shifted. Which way I don't remember any more. So I tried this old hack for ie5 vs. Netscape compatibility, and managed to make it work; but instead of adding 16 pixels I had to subtract four. Don't ask me why.
Anyways, the way it works, as far as I understand it, is that a wrapper div is defined, which has a closing brace in the middle, commented-out in a way some browsers don't understand. Then a declaration is made using inheritance notation (from body) which yet other browsers don't get right, and BINGO! Two wrongs do make a right, sometimes... ;-)
You'll see that besides the 0/-4px of left margin switcharoo, I also flip between 120 and 128 pixies of top-side padding. That's to get the top of the text in the columns look the same in Moz and ie6.
So here's the code: Oh, by the way, the relevant comments aren't mine. They are as they were in the original published hack.. and sorry, I've lost the link to it..
/* set a left margin to comp- ensate for IE/Win always making room for a scrollbar */ div#middlewrap { min-height: 640px; width: 100%; /* set left margin and bottom padding for IE5/Win */ padding: 120px 0 64px 0; margin-left: 0; /* set left margin and bottom padding for others */ voice-family: "\"}\""; voice-family: inherit; padding: 128px 0 0 0; margin-left:-4px; } /* set left margin for modern browsers */ body>div#middlewrap { padding: 120px 0 64px 0; margin-left: 0; } div#s_content { min-height: 640px; width: 976px; margin: 0 auto auto 0; padding: 0 0 64px 0; float: left; clear: both; line-height: 120%; text-align: justify; color: #ccc; } /* a bug with Mozilla causes the first block to be lost so s_dummy is here so that it's not here, just so that the next block really is here... */ div#s_middummy { height: 400px; width: 1px; margin: 0; padding: 0; float: LEFT; clear: none; background: none black; } div#s_column1 { min_height: 640px; width: 295px; padding: 10px 0 0 43px; } div#s_column2 { .........
I put in a bit of extra code so what's being changed becomes more obvious.
NOTE: This page passes W3.org XHTML validation, except for code added to it on the fly by the GeoCities server (see bottom 3 lines in View Source), which is not under my control.
This paragraph should appear in column 3, unless, of course, HTML and CSS are broken, my browser is broken, and I'm broken...