Solved

Complete Browser Compatibility & W3C XHTML, CSS Compliance

Posted on 2007-11-21
18
324 Views
Last Modified: 2013-11-19
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?
0
Comment
Question by:EMB01
  • 8
  • 5
  • 5
18 Comments
 
LVL 6

Expert Comment

by:TheKyle
Comment Utility
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
 
LVL 6

Expert Comment

by:TheKyle
Comment Utility
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
 
LVL 29

Expert Comment

by:Göran Andersson
Comment Utility
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
 
LVL 14

Author Comment

by:EMB01
Comment Utility
So I will need multiple CSS files and probably JavaScript to determine which to use per browser?
0
 
LVL 29

Expert Comment

by:Göran Andersson
Comment Utility
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
 
LVL 6

Expert Comment

by:TheKyle
Comment Utility
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
 
LVL 14

Author Comment

by:EMB01
Comment Utility
So is there anyway; for example, to distinguish why the DIV is centered on IE, but not centered on FireFox?
0
 
LVL 6

Expert Comment

by:TheKyle
Comment Utility
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
 
LVL 29

Expert Comment

by:Göran Andersson
Comment Utility
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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
LVL 14

Author Comment

by:EMB01
Comment Utility
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
 
LVL 6

Accepted Solution

by:
TheKyle earned 250 total points
Comment Utility
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
 
LVL 14

Author Comment

by:EMB01
Comment Utility
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
 
LVL 6

Expert Comment

by:TheKyle
Comment Utility
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
 
LVL 14

Author Comment

by:EMB01
Comment Utility
Will I have to test by trial-and-error to see which tags are causing what in each browser - one by one?
0
 
LVL 6

Expert Comment

by:TheKyle
Comment Utility
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
 
LVL 29

Expert Comment

by:Göran Andersson
Comment Utility
> 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
 
LVL 6

Expert Comment

by:TheKyle
Comment Utility
"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
 
LVL 29

Expert Comment

by:Göran Andersson
Comment Utility
> 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

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Suggested Solutions

Citrix XenApp, Internet Explorer 11 set to Enterprise Mode and using central hosted sites.xml file.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now