Matt Robinson of MossyBlog has "a small challenge to those who contend that Mozilla Firebird supports CSS better than IE."
IE renders his calender correctly, Firefox doesn't. If you can't fix it, why not post a challenge so some poor schmuck solves it for you. Does this ploy work?
I don't know, but Firefox's honour is at stake.
Looking at his code, Matt's got something going for him, a commitment to using CSS, and two things against, invalid mark-up and a bad attitude. To think IE supports the CSS standard better than Mozilla!
In the MossyBlog comments, Claus Wahlers quickly explained why Moz made such a mess of Matt's calendar:
Mozilla does this perfectly right.
IE fails because it does not ignore width and height on inline elements:http://www.w3.org/TR/CSS2/visudet.html#q4
10.3.1 Inline, non-replaced elements
The 'width' property does not apply. [..]http://www.w3.org/TR/CSS2/visudet.html#q15
10.6.1 Inline, non-replaced elements
[..] The 'height' property doesn't apply [..]
So what's the quick fix to get the calendar working?
Matt declares a half DOCTYPE of HTML 4.01 Transitional flavour, yet
the way he closes his <link> tag reveals a hidden desire
to work in XHTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
...
<link href="calendar.css" rel="stylesheet" type="text/css" media="all"/>
An invalid DOCTYPE puts IE into Quirks mode instead of Standards mode, so setting it right is our first order of business.
1. Declare a valid doctype in the HTML file. I like XHTML, so:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Take a squizz at the calendar in IE now it's in Standards mode. Egads! It looks like it did in Firefox!
Now we need to make two simple adjustments to the CSS file:
2. Replace all occurrences of "position: relative; display: inline;" with "float:left;"
3. Set the correct width for .calmonth, "width:99px;"
Now both IE6 and Firefox 0.8 render the calendar properly. How does it look it Opera?
Posted by bunster at 07:39 PM | Permalink
Trackback: http://blog.daemon.com.au/cgi-bin/dmblog/mt-tb.cgi/220
Yep, Ben.
That would've probably taken me a year to figure out! I thought CSS was suppposed to be simple?
Well, it has been until now....
Thanks, Ben.
Posted by: Matt Robinson on March 8, 2004 09:42 PM
CSS is as simple as you make it :)
Come check out the Web Standards Group (http://webstandardsgroup.org) for support, advice and CSS goodness.
Everyone is generous with their time and knowledge.
Posted by: bunster on March 9, 2004 12:48 AM
A big Daemonite welcome to the bunster, first post and he's stirring things up already...
Andrew
Posted by: Andrew Muller/rebel on March 9, 2004 11:27 AM
Bunster might wanna fix his link in the comment the ) is being included with the actual link of http://webstandardsgroup.org/
Posted by: Todd on March 16, 2004 06:55 AM