View Full Version : CSS Layout help, works in IE6, problems in others

06-02-2005, 03:47 PM
the following links to the html and css http://www.ecisive.com/clients/FCCDHH/dev/index2.htm
css driven layout. It looks perfect in IE6, in other browser it has various problems. Netscape, Opera, Firefox don't like the right hand content, in these browsers i lose background colors, padding, and white space shows between divs. Also in opera i lose the bottom nav bar. In netscape and FF and Opera the text in the nav bars seem to shift down. Any help greatly appreciated

06-02-2005, 07:07 PM
Well, as a general rule of web design, you want to design in the *most* standards-compliant browser first, then tweak the design for less-compliant browsers.

This pretty much means you should design for browsers in this order:
1) Firefox (or Mozilla, or Camino, or K-Meleon)
2) Safari
3) Opera
4) Internet Explorer (Windows)
5) Internet Explorer (Mac)

This way, you have a much better chance of having it look right in all browsers. If you start with one of the worst (in terms of compliance) browsers, then it gets harder to tweak it for better (in terms of compliance) browsers.

That being said, I think your problem is one of a bad CSS box model on IE. My best advice for making this work is to tweak your CSS so that it looks right in Firefox, then I would suggest checking out the Box Model Hack (http://www.tantek.com/CSS/Examples/boxmodelhack.html) to get IE to play nice with everyone else.

06-02-2005, 09:23 PM
make sure you set the margin: 0px; and padding: 0px; on everything that you don't set a margin and padding for, most browsers have different defaults