Hi I'm developing a web tool but I'm having trouble with css compatibility accross different browsers.

 

First question actually is, do you prefer inline css ou in a different file, I prefer in a different file and then putting the reference with:

 

<link rel="stylesheet" type="text/css" href="index.css"/>

 

But the problem is that some css code work fine to firefox and it doesn't for internet explorer, and viceversa.

 

Just to illustrate, if I have a <div> in my page and that div has border-left and border-right properties with "1px solid" as value,

in firefox I have to shrink 2 pixels from the width of the div otherwise it would be bigger then the image above it...

 

Like this:

top_image.jpg has 800px

 

in Firefox I have to put width to 798 pixels due to the borders

but in Internet explorer I leave it with 800 pixels

 

Maybe I'm doing a newbie mistake in my css, but apparently I have to do one indexFF.css and one indexIE.css to fix this, and other, problems...

 

Any help, tip or comment would be appreciated.

It's not a mistake, there's a difference between how Firefox and IE calculate the "box model". There are several methods of dealing with this, but here's one:

 

http://webdesign.about.com/od/css/a/aaboxmodelhack.htm

What i find is that IE that is all IE adds padding and margin to everything wither you tell it to or not and firefox does not.

 

the best way to look at it is firefox shows you your code how it is writen and IE shows you how it thinks you want to see the code.

 

make sure u set padding and margin to 0px

that helps alot

What i find is that IE that is all IE adds padding and margin to everything wither you tell it to or not and firefox does not.

 

the best way to look at it is firefox shows you your code how it is writen and IE shows you how it thinks you want to see the code.

 

make sure u set padding and margin to 0px

that helps alot

 

I totally agree with you.

I hate the way IE "unfixes" your coding, which is why I prefer to work always with Firefox (though I do check within other browsers and keep check on the design and layout)

Keep the #body paddings and margins set at 0 and just add the margins and paddings to each <div> sections as required. Usually works best for me personally.

 

Cheers......Jay

Eric Meyer's Css reset

 

http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/