IE/Firefox compatability problems, style sheet's?

Alright, I've been in charge of designing a new site for internal use with our company (I'm an intern, CS major, so HTML coding and web design was not the basis for my education, so I might be missing something obvious). I've used a lot of div blocks to position items, and linked them to buttons that hide and show each piece of information. The problem I get (i'm designing in dreamweave) is that firefox and IE don't agree on placement. I have it optimized for IE right now, and can easily reposition everything to look good in firefox, but not both.

Again, all the positioning is done using div id's, in a large style block at the top. I had read about using different style sheets for different browsers, though I'm not sure how to do that. it seems like it should be possible to detect the browser, and then use the style tags (for instance #misc { position:absolute; left:93px, top:328px }, one set for IE, the other for firefox. Any idea's? Am I making sense? :)

IE/Firefox compatability problems, style sheet's?windows live messenger

Yeah, this is the designer's dilemma. Firefox is closer to being standards-compliant, but more people use Explorer. Boo!

You can use javascript to detect the browser and point to your stylesheet custom-made for that browser:

http://javascript.internet.com/snippets/...

Or, simple-like, you can use a # in front of the attribute to make firefox ignore it and explorer use it.

For example:

#myDiv {

border: 1px solid #FFF;

float: left;

width: 30%;

margin-left: 30%;

#margin-left: 31%; %26lt;!-- firefox will ignore this and explorer will use it --%26gt;

}

Good luck!

IE/Firefox compatability problems, style sheet's?microsoft money internet explorer

You can try using relational positioning as opposed to absolute. Meaning you use percentages instead of fixed sizes.

You can also use a simple Javascript snippet to find the web browser when the user loads the site. Then have it include one css file for IE and another if it is Firefox, and another for Safari, etc.

Code:

%26lt;html%26gt;

%26lt;body%26gt;

%26lt;script type="text/javascript"%26gt;

var browser=navigator.appName;

var b_version=navigator.appVersion;

var version=parseFloat(b_version);

%26lt;/script%26gt;

%26lt;/body%26gt;

%26lt;/html%26gt;

You can then use an IF statement to check the browser value, if it is Internet Explorer, then include......css

and so forth
You can create 2 separeted CSS files depending on a browser. You detect what browser is in use and include relevant file like this (in PHP):

%26lt;?php

$browser = strtok($_SERVER['HTTP_USER_AGENT'], "/");

switch($browser){

case Opera:

echo "opera";

include "opera.css";

break;

case MSIE:

echo "Microsoft Internet Explorer";

include "ie.css";

break;

case Mozilla:

echo "Mozilla";

include "firefox.css";

break;

case Safari:

echo "Safari";

include "safari.css";

break;

}

?%26gt;
I recommend developing the site/page for Firefox first as it is a more web/css standards compliant browser. Put all your CSS into one stylesheet and link to it in the header per normal.

To handle CSS for IE issues, you will need to apply additional CSS in a separate stylesheet. I suspect the problem that is affecting you is known as the "IE Box Model Effect". Google it to find out more. You can detect the browser in the header with the code below. Add a link to the second stylesheet within the if statement for fixing the problems in IE.

%26lt;!--[if lte IE 6]%26gt;

%26lt;style type="text/css"%26gt;

@import "http://www.yoursite.com/style_ie.css";

%26lt;/style%26gt;

%26lt;![endif]--%26gt;

I set the if statement to check the version number as well. IE7 fixed a lot of the major standards issues but there are a few that remain. So applying hacks for all IE versions may break it in version 7. Typically, the default stylesheet for Firefox will work for IE7 with no issues. You can add a third stylesheet for IE7 with a similar if clause:

%26lt;!--[if gte IE 7]%26gt;

%26lt;style type="text/css"%26gt;

@import "http://www.yoursite.com/style_ie7.css";

%26lt;/style%26gt;

%26lt;![endif]--%26gt;

I believe this is the best way to handle CSS hacks for browsers as it works with standard HTML. The other methods posted here primarily use javascript which works until you have a user that has javascript disabled. Using PHP only works if you are developing in PHP and have PHP installed on your web server. The other method using # is workable too but can make your stylesheet very difficult to follow/update and breaks in Apple's Safari. The good news is that IE8 will be CSS-compliant but unfortunately, it will take years to get all the users off these old versions of IE even if they have better features and signifcantly better security.

Best of Luck. :0)