Complete Browser Compatibility & W3C XHTML, CSS Compliance

My site looks great in Internet Explorer and the code is 100% XHTML 1.0 and CSS compliant; however, the site just looks bad in Opera and FireFox. What can I do to get my sites to look good in other browsers?
LVL 14
EMB01Asked:
Who is Participating?
 
TheKyleCommented:
There's really no maintenance for conditional comments.  Just add the comments to your html pages, and then all future modifications can just be made to the css file.

Here's some of my own example html code.  Just add something like that to your <head> section, and you shouldn't have to touch it ever again...
<link media="screen" rel="stylesheet" type="text/css" href="/styles/main.css" />
<!--[if lt IE 7]>
    <link media="screen" rel="stylesheet" type="text/css" href="/styles/main_ie6.css" />
<![endif]-->
<!--[if IE 7]>
    <link media="screen" rel="stylesheet" type="text/css" href="/styles/main_ie7.css" />
<![endif]-->

Open in new window

0
 
TheKyleCommented:
The first bit of advice I can give is that you should always design a website for a standards-compliant browser first.  However, since a completely compliant browser doesn't exist, you should pick one that's at least close.

Your best bet would probably be Firefox at this point.  Your last choice should be Internet explorer.  Once you have your site built for the standards compliant browser, then you should do what you have to do to make it work in IE.

Even though your code is 100% compliant, that doesn't mean that all browsers are going to interpret it correctly.  So, you might as well start with the majority of browsers that get it almost right and then worry about modifying your site to work in the remaining browsers.

That being said, I know that doesn't help with your current site, so here's a start...

div#container, div#contentwrapper, div#footer
{
    margin: 0 auto;
}

Open in new window

0
 
TheKyleCommented:
It looks like your <object> element has a specified height of 358px.  It should only be 213px.

That will get rid of the big gaps above and below your flash animation.

...you might also look at something like swfobject for embedding your flash content in a standards friendly way...
http://blog.deconcept.com/swfobject/
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Göran AnderssonCommented:
I agree with TheKyle. Internet Explorer has several rendering bugs, and your design relies on these bugs to look as you intended. You should treat these bugs as bugs, and first make the site work with a more standards compliant browser (e.g. Firefox), and then you can tweak the site to circumvent the IE bugs.
0
 
EMB01Author Commented:
So I will need multiple CSS files and probably JavaScript to determine which to use per browser?
0
 
Göran AnderssonCommented:
In my opinion, that is not the best path to choose. I recommend that you try to create a CSS file that works with all browsers. In most cases that is absolutely possible.

If you start making separate css files, you will have separate versions to maintain, and for every new version of any browser, you may need to add another...
0
 
TheKyleCommented:
The best practice that I have found is to have one main css file for most browsers, and then use conditional comments (http://www.quirksmode.org/css/condcom.html) to link a secondary IE stylesheet.

I've been using this method for a long time, and I've never had a problem with maintaining multiple stylesheets.   I have never had an IE stylesheet that was more than 10-20 lines long, and most of them have only been a few lines.  And, at most, I've had 2 extra stylesheets: one for IE7 and one for IE6 and below.

So, the maintenance on the IE stylesheets is minimal, and not even an issue in my opinion.

Also, it's virtually impossible to create a stylesheet that works in all browsers without resorting to using CSS hacks, which is a really bad idea.  CSS hacks rely on known bugs in browsers to target them specifically.  Hacks may work now, but in future browsers the hack may be fixed, and then you'll have to go back and re-edit all of your stylesheets to make your site work again.  Talk about maintenance!

With conditional comments, you're pretty much guaranteed that IE will continue to support them.  If you use conditional comments to specifically target IE6, then you'll never have to worry that IE8 might end up using that targeted code.
0
 
EMB01Author Commented:
So is there anyway; for example, to distinguish why the DIV is centered on IE, but not centered on FireFox?
0
 
TheKyleCommented:
My first comment should solve the centering problems.  You can read more about using auto margins for centering here...
http://www.simplebits.com/notebook/2004/09/08/centering.html
0
 
Göran AnderssonCommented:
There is a rendering bug in IE, where it applies text-align to block elements even though it shouldn't.

For example:

<div style="text-align:center">
   <div style="width:100px">inner</div>
</div>

In IE the inner div will be centered, eventhough text-align should only apply to inline elements, not block elements. Firefox handles this correctly, and doesn't center the inner div.

You can read more about IE rendering bugs here:

http://www.positioniseverything.net/explorer.html
0
 
EMB01Author Commented:
My CSS sheets are used on multiple pages and are server-side included. Since the conditional comments require to be in the HTML page and not the CSS file; what's the most efficient way to maintain the conditional comments?
0
 
EMB01Author Commented:
So, are main_ie6.css and main_ie7.css modifications of main.css or do they essentially pick-up where main.css left off?
0
 
TheKyleCommented:
main.css is my main stylesheet.  That is the standards compliant, working version of my design.  It's almost 700 lines long.

main_ie6.css only contains a couple rules that slightly modify my design so that it works in IE6.  And main_ie7.css is basically the same as main_ie6.css, but for IE7.

For example, sometimes IE6 doubles the left and right margins for no apparent reason.  So, my main css file might contain a rule that says "margin-left: 50px".  Then my IE6 stylesheet would have another rule that says "margin-left: 25px" so that when IE6 doubles the margin, it becomes 50px just like I want it to.  :)

The best part is that other browsers will completely ignore everything in between the conditional comments!
0
 
EMB01Author Commented:
Will I have to test by trial-and-error to see which tags are causing what in each browser - one by one?
0
 
TheKyleCommented:
More or less... but that's pretty much what you have to do anyway when you create a design.  Eventually most, if not all, of the trial-and-error will be replaces with experience.  You'll start to recognize certain browser bugs when you see them.

As for the bugs in your current design, my first two comments on this question should go a long way toward fixing your design.
0
 
Göran AnderssonCommented:
> For example, sometimes IE6 doubles the left and right margins for no apparent reason.

Here is an explanation when and why that happens, and a perfectly safe fix that doesn't require a browser specific style:

http://www.positioniseverything.net/explorer/doubled-margin.html

Most IE problems can be handled without a browser specific style, mostly by simply using a different method to accomplish the same result, so that you avoid constructions that IE has problems with.

Fixing problems this way makes it more likely that the css will work with future versions of browsers also, reduing the maintainance.

IE 8 will soon be released, so everyone using browser specific styles is up for another update, and not only in the css files (as the accepted solution claims), as another file specific for IE 8 is probably needed.
0
 
TheKyleCommented:
"IE 8 will soon be released, so everyone using browser specific styles is up for another update, and not only in the css files (as the accepted solution claims), as another file specific for IE 8 is probably needed."

Yes, when a new browser comes out, you may have to create a new css file for that browser, but if you do the conditional comments correctly, then nothing should have to be changed in any of the existing stylesheets.  IE8 will ignore all of this code...

<!--[if lt IE 7]>
    <link media="screen" rel="stylesheet" type="text/css" href="/styles/main_ie6.css" />
<![endif]-->
<!--[if IE 7]>
    <link media="screen" rel="stylesheet" type="text/css" href="/styles/main_ie7.css" />
<![endif]-->

If you want to target IE8, then you'd just create another comment like this...

<!--[if IE 8]>
    <link media="screen" rel="stylesheet" type="text/css" href="/styles/main_ie7.css" />
<![endif]-->

Nothing else has to change.

Also, there are many IE problems that can't be solved without browser specific style.  You should do everything you can to not use browser specific styles, but sometime it just can't be avoided.  

My example of the doubled margins was just an example, and apparently it was a bad example.  I actually wasn't aware of the double margin solution that GreenGhost posted, so I will definitely start using that for my sites.  Thanks!

There are many other problems that can't be fixed so easily, though.  For those, I recommend using conditional comments.  
0
 
Göran AnderssonCommented:
> Also, there are many IE problems that can't be solved without browser specific style.

Do you have any example? I haven't yet found anything that can't be solved without a browser specific style...
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.