Cross-browser Box-Model question

[StateRd84]

I use Safari on a Mac to check my code. I am running into a problem with my CSS layout not rendering the same in different browsers. My solution was to create stylesheets for each browser and use a JavaScript to detect and switch stylesheets. It works great on all browsers but Firefox. Chrome works great, Opera's app.name is opera, but Firefox's app.name is netscape (same as Safari, so it chooses the Safari stylesheet). Below is my code. Please any suggestions. Oh yea, I am new here. so "Hello World"! if ((navigator.appName).indexOf("Microsoft")!=-1) { document.write('<link rel="stylesheet" href="FileName_IE.css" type="text/css">');}else if ((navigator.appName).indexOf("Firefox")!=-1) { document.write('<link rel="stylesheet" href="FileName_fox.css" type="text/css">');}else if ((navigator.appName).indexOf("Opera")!=-1) { document.write('<link rel="stylesheet" href="FileName_opera.css" type="text/css">');}else { document.write('<link rel="stylesheet" href="FileName.css" type="text/css">');}

[Ingolme]

I don't recommend this. If you give a proper <!DOCTYPE> then the box model should work the same across all browsers.

[thescientist]

As mentioned, the box model is consistent across all browsers given you are using a DTD and have valid code. A better solution would just be to address the differences (which you haven't explained) and tweak the HTML/CSS accordingly. One of the simplest things you can do is add the universal selector reset to your stylesheets to remove all default margins and paddings, thus allowing you set them explicitly, and iron out some of the differences that way.

*{  margin: 0;  padding: 0;}

Edited May 11, 2012 by thescientist

[StateRd84]

The differences are with the layout of my divisions. When using absolute positioning with percentage values there are big differences in IE, Firefox and Opera. This is most prevelent with margin-top. I suppose I should switch over to the CSS forum to continue this. I have tried using pixels and there seems to be no problem. I appreciate the responses, thank you.

[thescientist]

If you are using positioning for your layout, then you are not using the box model. Read the CSS tutorials so you can familiarize yourself with the box model. It is the preferred/standard way to layout a page.http://www.w3schools.com/css/css_boxmodel.asp

[ShadowMage]

Chrome works great, Opera's app.name is opera, but Firefox's app.name is netscape (same as Safari, so it chooses the Safari stylesheet).

This is part of why browser sniffing is so frowned upon. It's very unreliable. Opera can imitate any of the other browsers by changing certain settings. I believe Chrome can also imitate other browsers. And by imitate, I mean altering the user agent strings or whatever else that identify the browser, not the rendering engines they use.So, while your Opera may say that it is Opera, someone else may have theirs configured to say that it is IE (though it still uses Opera's rendering engine). Edited May 11, 2012 by ShadowMage