[web] CSS debugging tips?
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?
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. :)
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.
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.
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
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.
.text {
filter; /* anti-alis for IE */
}
Mozilla AA's the text automatically.
This topic is closed to new replies.
Advertisement
Popular Topics
Advertisement
