[web] CSS debugging tips?

There is not much you can do. Mozilla is 100% (or close to it) compliant to the CSS standard. IE is notoriously non-compliant to CSS as well as HTML. You have to try to figure ways around it.

Have you tried NOT specifying the height? (Then the height is generated from the heights of the elements.)

You can look at this page:
Mozilla and IE (My work)
Compare yourself! (Not my work)

We should all respect cross-browser websites. :)

Well, I've spent a couple of hours last night ripping it *all* out and starting again (the style sheet, that is) and I built each one up in turn, viewing it in both browsers as I went.

I now think I understand the subtle differences between IE and Mozilla and can now make a page that looks how I generally what. The main difference is indeed how IE handles height: 100%. Mozilla, rightly specifies it as 100% of the parent element, whereas IE seems to do as it pleases.

It's annoying me, because I'm adhering to the CSS 1.0 and XHTML 1.1 STRICT specifications, yet it's IE that's forcing me to compromise on how I wanted my page to look. For example, I wanted a border on a certain element, but IE wouldn't scale the height properly, so I had to put the border on the adjacent element.

I know it's picky, but it can really annoy me. I guess the 'browser wars' are back.

Quote:

Original post by evolutional It's annoying me, because I'm adhering to the CSS 1.0 and XHTML 1.1 STRICT specifications, yet it's IE that's forcing me to compromise on how I wanted my page to look. For example, I wanted a border on a certain element, but IE wouldn't scale the height properly, so I had to put the border on the adjacent element. I know it's picky, but it can really annoy me. I guess the 'browser wars' are back.

It's not picky, browsers generally are teh suck. I've been updating my site recently and I came across what you describe. I believe it's something to do with MS not implementing the "box-model" correctly, i.e. whether an elements width and height includes padding, border and margin. I'm willing to bet my site looks crappy on anything not IE at the moment.

Quote:

Original post by pan narrans I believe it's something to do with MS not implementing the "box-model" correctly, i.e. whether an elements width and height includes padding, border and margin.

Yeap, that's the consensus among people I've spoken to. IE 6 is a few years old, maybe they'll implement better standards compliency in v7? Hahah.

Here's a page that details some hacks for IE, it may be useful if you're doing a redesign. The best way I found is to build it up and test in both browsers at the same time, less headachy then - but still a PITA.

Either way, it's annoying that we are being encouraged to learn and use the W3C standards that aren't even supported properly in the main browsers.

Oops, forgot to log in. That above reply is mine.

Andy

Another tip: if you use fonts like Comic Sans MS, add a filter; to your CSS to anti-alias the text.

.text {
filter; /* anti-alis for IE */
}

Mozilla AA's the text automatically.

Sorry, again. The article of which I was talking is here. Very useful. This should help a lot evolutional. Judging by your source, you're not using a doctype at all.

Andy

I was using a doctype on my original site, I neglected it on the 'test' page I've been playing with (I forgot to add it to the XSL template).

Thanks for the tip Andy, I'll see if it makes a difference to my documents.

Quote:

Original post by evolutionalThanks for the tip Andy, I'll see if it makes a difference to my documents.

I'll be waiting for the result. :)

Well, I must say that adding a !DOCTYPE declaration does make a difference. For instance, omitting it makes IE act a little strange with it's positioning (under XHTML 1.0 STRICT / CSS 1.0). Mozilla / Firefox displays the same results with or without it.

I also noticed that IE 6 doesn't recognise the page as valid XHTML when you have the declaration. This is clearly in breach of the W3C XHTML spec which says that an XHTML page can omit it, but it's considered best practice to include it.

Aside from a few quirks in the MSXML processor (it seems to like outputting UTF-16 encoded html, even though you tell it to encode as UTF-8), my sites are now looking the same across the two main browsers.

:)

Thanks for the tips y'all, the only real way to ensure compatibility is to a) follow the standards b) include the doctype declaration c) accept that you may have to compromise on your design to ensure cross-compatibility and finally d) test in both browsers as you develop - don't code for IE and expect it to be ok in others, the only way to ensure it'll work in all is to test in all as you build the site.

Just a word of forewarning.

I've been designing and coding web pages almost for 5 years now and have come to see that heights are tedious creatures. The only safe way to be with heights is to set it to auto or a specificed height in pixels. If you try making it span the whole way down, it's not going to work. If you're going to have to require that for some reason, you'll be best off with tables (even though tables are deprecated now for a variety of reasons, namely speed). If you're designing, it's best to go through a Mozilla browser and IE because those are the two that have differences. Other browsers such as Safari for Macs, Firefox/bird, Mozilla, Opera, and Netscape (the newer versions) are all very similar. They are very close to being perfectly standards compliant. What you're doing now is good.

As someone said, there's no easy way to debug css other than building it right the first time and knowing exactly what part of the css controls what.