As much as some FF fanboy is going to defend and deny, and putting the blame on the coder, this is still going to be a BUG!
When an HTML document includes the doctype declaration at the top of the page, the swf embeded in the document will not render properly when the its height is set to 100%. The result is an swf rendered beyond the top border of the window as though the CSS top attribute has been set to a negative value. However, when the doctype is removed, the swf will render correctly just as IE does.
I only realised this issue after serveral hours of debugging and totally hate it when its not my fault. So I went ahead to search online to confirm if it is a bug indeed. I came across a forum (which I will not point out) where another poor victim posted this same issue. One guy came along, whom I presume is an FF fanboy, and replied along the lines of “its your own fault” without proposing any solutions! I totally hate this kind of posters who just come along to insult you on something irrelevant to the issue at hand.
After the poor guy replied, the FF fanboy went on to argue that without specifying the container’s width and height, firefox (or the swf) is not going to know how big is 100%. So you need to set the width and height for all the parent and grandparent containers including the body and html tag!
Well, so that is the solution in overcoming the BUG! And yes, it’s a bug because if you just removed the doctype, everything renders fine.
The CSS :hover event is only supported for the anchor element <a> and hence to simulate the correct :hover behavior for other elements such as td:hover, we need a javascript hack.
The idea is to change the class of the hoverable element so that the CSS can be applied to the class i.e. td.hoverable.
To do this, we attach a function to the onmouseover and onmouseout events of the element to add an remove the class name respectively.
c FireFox will glady center the div with just
div {
width: auto;
}
but IE7 will keep the div aligned at its default. Hence we need a little trick here to make it the way we want it. What we do is we create a div wrapper using another div, and have the css code like this
div.wrapper {
text-align: center;
}
div.wrapper div {
text-align: left;
width: auto;
}
The text align left is optional and is used to explicitly redefine the text alignment for the inner div so that it is independant of the wrapper div’s text align attribute value.
Had been playing around with CSS a lot lately just to practice conforming to the WC3 best practices. Especially for the past few projects I have done, I try very much to use 100% CSS for layouts. And only define HTML tags in a top down fashion to markup the content. I think i’ve improved very much since the first time I’ve done this.
One of the things that frustrates me is that there are a lot of obscured CSS properties and strange behaviors in different browsers. One such element is the table. For all the times I used a table with CSS, a strange margin will always appear around the table even though margins and borders are set to 0px. Just keep in mind that tables have an extra border-collapse property and setting it to “collapse” will give you more intuitive results.
