[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

Complete Browser Compatibility & W3C XHTML, CSS Compliance

Posted on 2007-11-21
18
Medium Priority
?
331 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 5
  • 5
18 Comments
 
LVL 6

Expert Comment

by:TheKyle
ID: 20332434
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
ID: 20332448
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
ID: 20333685
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 14

Author Comment

by:EMB01
ID: 20334449
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
ID: 20334751
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
ID: 20335295
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
ID: 20336678
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
ID: 20336958
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
ID: 20337021
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
 
LVL 14

Author Comment

by:EMB01
ID: 20338617
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 750 total points
ID: 20340063
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
ID: 20340136
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
ID: 20340175
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
ID: 20340207
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
ID: 20340233
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
ID: 20340664
> 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
ID: 20340721
"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
ID: 20340852
> 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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

#Citrix #Internet Explorer #Enterprise Mode #IE 11 #IE 8
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

656 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