Jump to content

Cross-browser Box-Model question


StateRd84
 Share

Recommended Posts

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">');}

Link to comment
Share on other sites

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 by thescientist
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 by ShadowMage
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...