Jump to content
  • Advertisement
Sign in to follow this  
evolutional

[web] CSS debugging tips?

This topic is 5068 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

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
Advertisement
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.

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
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.

Share this post


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

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

Participate in the game development conversation and more when you create an account on GameDev.net!

Sign me up!