Sign in to follow this  
evolutional

[web] CSS debugging tips?

Recommended Posts

I'm slowly going crazy trying to make my CSS (1.0) stylesheets display correctly in IE6 and Firefox 0.9. Does anyone have any tips or links to sites that will help with CSS debugging? It seems like a simple change makes no difference in IE, but the world of difference in Mozilla. For example, IE seems to take { height: 100% } to mean 100% of the element, but Mozilla seems to like it as 100% of the screen. Compare this page in IE 6 and then in Mozilla/Firefox. You'll see that in IE, it's nicely compact - but in Mozilla it fills the whole screen. I'm going insane trying to fix it and it doesn't seem to be anything obvious. A little help, please?

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
Guest Anonymous Poster
Quote:
Original post by evolutional

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.

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.


Main browsers? I think IE is really the only browser that manages to mess up CSS in such a large way.

A little while ago, I was having similar problems. Apparently, if you do not include a proper doctype in your file, it can cause IE to enter "Quirks" mode, which, judging just by the name, spells trouble. You might want to check out this article. When I implemented those suggestions, it solved a lot of my problems.

Andy

Share this post


Link to post
Share on other sites
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 <?xml version="1.0"?> 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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this