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?