I’ve been working on my web site again. Among other things, I’m trying to take
better advantage of Cascading Style Sheets (CSS). The results are alternately
pleasing, frustrating, and confusing. Browser support of CSS seems to be
all over the map. (I know, this is not news) I get the look I want in one browser
only to be stymied when I view the same page in a different browser.
For the curious amongst you, take a look at this
page. Internet Explorer, at least the version I’m running, renders the grey
division down the entire side of the page. Mozilla renders it part way down,
but eventually stops and wraps some of the main content underneath the grey
bar. Opera (7.02) collapses the empty, grey division to about one line of height,
and wraps the main content underneath it. This is all incredibly frustrating,
and it’s frustrating because I don’t know which of the following is true:
- Is my understanding of CSS styles flawed?
- Is Internet Explorer rendering my content incorrectly?
- Is Mozilla rendering my content incorrectly?
- Is Opera rendering my content incorrectly?
- Is it #2 and #3 above?
- Is it #3 and #4 above?
- Is it #2 and #4 above?
- Is it #1, #2, and #3 above?
- Is it #1, #3, and #4 above?
- Is it #1, #2, and #4 above?
- Is it all of the above?
I’m adrift on a big ocean, and I don’t know where to drop anchor. If
only I had a reference implementation, or some other way to know with certainty
that my CSS styles are correct for the effect that I want to achieve. If I could
know for certain that my CSS is wrong, then I could work the problem from that
angle. If I could know for certain that my CSS was correct, then I could consider
whether I wanted to accommodate broken browsers, or whether I just wanted to
wait for them to catch up. The BIG, FRUSTRATING THING is that I don’t even know
from which of the 11 possibilities (above) to start.
Writing a simple web page should just not be this difficult.
A reference implementation of CSS would almost have to be a full-blown browser, so maybe that’s not practical. For those of you who write CSS, how do you go about verifying that your understanding of what your CSS should do is, in fact, correct?
Validate!
Firstly let me say that the answer is almost certainly 11: all of the above.
However, it is fruitless attempting to track down errors in HTML + CSS if your code isn't validating first.
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/
It looks like you need to add a doctype declaration and fix a few minor typos in your CSS before you really start working on the cross-browser issues.
Another approach is to take advantage of the many resources where you can find various 2 or 3 column layouts (with or without headers, footers etc.) from which you can build as you enter the world of CSS.
Mozilla first
Another rule of thumb to bear in mind:
Get it working in Mozilla first, then 'fix' it for IE.
From your description it sounds like IE is closest to you vision for the page. People generally recommend working in Mozilla as it is closer to the specs in many regards and there are usually well documented work-arounds for the more egregious problems you'll discover after proofing in IE.
CSS Zen Garden
Take a look at http://csszengarden.com and the CSS Resources link on that page for some really good references on all things CSS including layouts.
Yes, Yes, No, No
Is my understanding of CSS styles flawed? : Yes, but only slightly, according to the W3C CSS Validator Results for http://gennick.com/BikeRide.html
Is Internet Explorer rendering my content incorrectly? : Yes Developers gripe about IE standards inaction, and attempt work arounds such as Dean Edwards E7 stylesheet
Is Mozilla rendering my content incorrectly? : NO
Is Opera rendering my content incorrectly? NO
In both the two latter cases, it's up to the developer how to interpret flawed style sheets and [X]HTML
Tables are nice :-)
At times like this you can always rely on a table :-)
Tables are nice :-)
LOL! Now, now. I'm trying to "get religion" here and not use tables. At least, I'm trying not to use them in place of columns.
Yes, Yes, No, No
Thanks. I'll check out the W3C validator. Someone else, btw, pointed me towards HTMLValidator.com, which has also been helpful in this particular instance. Adding a DOCTYPE tag to my page seems to make the behavior across browsers more consistent. At least, IE now renders the page the same as Opera, making it rather obvious that I not quite understanding some aspect of CSS. (I haven't posted a new version of the page yet).
In general though, does no one really wish for at least one, true browser that rendered CSS completely correctly? Or am I the only one who has trouble sometimes deciding whether some aspect of a page's rendering is my bad CSS or the browser's bad interpretation of it?
Miscellaneous advice
What is really lacking is a good, human readable introduction to the CSS box model.
If you read the spec often enough and read eough articles on design with CSS, you will eventually get it, as well. But that's not an effective way to acquaint people with CSS, and yes, the box model is not really obvious, whether it may seem so or not.
It also has some grave limitations (only a few of which aren't shared by HTML tables). In general it can be a frustrating experience if you can only guess.
The best environment available right now is Firefox 0.9, as Gecko adheres to the standards the closest, along with the Devedge toolbars for CSS and HTML to be able to quickly look things up in the spec, and also the Web Developer extension that offers you a host of debugging and validation tools and lets you edit the CSS inside the browser so you can see the effect instantly.
Also, google "CSS box model" and read some of those articles. Don't be afraid if you don't get it all at first, it'll eventually click.
Seriously, we need someone to write some good introductory overview style articles and tutorials..
Yes, Yes, No, No
I use one of the Gecko-based browsers (currently Mozilla Firefox) as a reference browser: standards support as good as any other browser's; developer's committed to web standrads; on-going updates; cross-platform; free. I then tweak to address other browsers bugs (notably IE's), and implementation differences (parts of CSS are not clearly defined, so user agents have some latitude in implementation).
Your basic understanding of CSS seems solid (the one error the validator found looked like a typo), so I'll mention two things I noticed playing with your style sheet that lead to two of the differences you see between browsers.
The blank space at the top in Mozilla: Mozilla always applies the top margin to block-level elements (p, h1, h2, etc.). IE doesn't when the block-level element is the first child of it's parent. One way around this is to use the rule h1:first-child {margin-top: 0;} to remove the top margin from any h1 element that is the first child of its parent. (As a side note, IE doesn't recognize the first-child psuedo-class at all.)
The gray sidebar differences: IE just gets this wrong, period. Floated elements are not considered part of the normal document flow, so setting height to 100% should not cause it to be the hieght of its HTML parent (which is what IE is doing, so in this case you get the behavior you want because IE gets the spec wrong). Workarounds exist--I have recently needed to do something similar, and the same CSS rules would apply to your site. I can e-mail you my solution if you like.
Yes, Yes, No, No
re your comment about floating elements not being part of the doc flow. I added a DOCTYPE declaration of "strict" to a copy of the page on my local PC, and now IE is rendering the page consistently with Opera. So it would seem that my initial lack of a DOCTYPE declaration led IE to use an alternate interpretation of CSS that led me to think I had a solution that worked, further leading me to replicate that "solution" to all my pages. Yet now I realize I need to go back and start over. Thankfully, I'm using Dreamweaver templates and library objects, so fixing that whole bunch of pages won't be as bad as it could be.
Sure, if you have a good solution, I'd love to see it.
Yes, Yes, No, No
Correct. IE will take a best guess at your intentions where the CSS specs were incomplete at time of code freeze.
What the typical anti-Microsoft crowd doesn't realise is that Microsoft is a major player on the CSS standards comitee and often incorporates non-final specs into browser versions.
Most likely the behaviour you got was part of such a spec which was later changed in the final code and Microsoft decided to leave both implementations in place so as not to break existing websites making use of the earlier draft.
In fact, you can probably consider IE combined with XHTML strict documents to be as much of a reference implementation as anything. IE has the largest percentage implementation of CSS of all browsers and the smallest number of defects (the same is true for other related specs like ECMAscript as well).