[RESOLVED] CSS code differences for IE and FireFox, Netscape

[kralspace]

ok, I'll try another script,

I've been reading where my style definitions will work in IE need to be written differently for Firefox and Netscape, are there changes in these three I need to make so they will display in FF and Net?

thanks, Kathy



dl {
width: 590px;
margin: 0px 0px 20px 20px;
background: #fff url(images/bottom.gif) no-repeat bottom left;
}

dt {
margin: 0px;
padding: 5px;
background: #fff url(images/top.gif) no-repeat top left;
}

dd {
margin: 0px;
padding: 5px;
}

thanks, Kathy

[Weedpacket]

Have you tried them? The main thing to keep in mind with margins and padding is that IE's implementation is broken, and puts padding inside the content box making the effective dimensions of the box (where the content goes) smaller, instead of outside as specified by the standard.

In other words, the total width of a box as specified by the CSS standard is
margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right
But IE measures it

margin-left + border-left-width + width + border-right-width + margin-right

With the effective width of the content being reduced by the amount of horizontal padding.

A similar botch-up happens vertically.

I added a bit of colour to your css to make the parts more visible:

dl {
width: 200px;
border:1px solid red;
margin: 0px 0px 20px 20px;
}
dt {
border:1px solid blue;
margin: 0px;
padding: 5px;
background: #ccf;
}
dd {
border:1px solid green;
margin: 0px;
padding: 5px;
background: #cfc;
}

, and attached a comparison of the two (IE above, Gecko below). Note how the IE box is slightly narrower (mainly due to the 1-pixel borders I added), and how the content is more tightly packed vertically.

However, rumour has it that IE7 might be better at getting this part of the standard right at long last.


One way of hacking this is to use the fact that IE doesn't fully implement CSS selectors. Give the "IE width" (i.e, the width you actually want, plus space for the padding) in the CSS rule:

dt{width:592; padding:0px 1px;}

and then add a rule specifying the element as a child of its parent, and put the real width in that:

dl>dt{width:590;}

IE will ignore that because it doesn't understand child selectors.

[bpat1434]

Adding on to what Weedpacket said, you need to hide the "Gecko" browser code from IE/Mac too. Whatever code you want hidden from IE (Win & Mac), and only viewable by Gecko browsers, you wrap it in something like this:

/** Hide \*/
Your css code here!
/** **/

What that does is exploit another glitch in IE/Mac which "escapes" the */ to end the quote, so realy it won't end until the **/ 2 lines down.

Just remember, CSS is read in a top-to-bottom fashion. So if you put this code above your other CSS, the lower CSS will override your "Gecko Only" code. So the general format would be:

<!--
All CSS Code Here!!

/* Hide \*/
Fixes for IE crap specified above
/*******/

Just remember, fixes for IE crap is for Gecko browsers. If you need more help, you can read up on it over at csscreator.com

~Brett

[kralspace]

thanks so much Señor Curmudgeon and bpat. I'm going to spend this morning working on your suggestions. You both have a knack for being able to not only write the code but be able to explain it to a fairly new CSS newbie too!

thanks, Kathy

[bpat1434]

Great, glad to hear we could help. On a side note, here's a tip from me as I find this to be easiest:
Code for gecko-based browsers first.

You may wonder why that is and I'll tell you. It's because they are the most standards compliant. If you write all your CSS code out, (without commenting anything out or selecting anything out like our previous posts suggest), and get it to look right in a gecko browser, it's much easier to go into IE, and start fixing from top to bottom all the code. As you fix, you just set up your commented area (like I showed you) and you use the selector class (like Weedpacket showed you) to preserve the gecko layout.

Here's an example of how I code:
code to gecko browsers:

body{
	text-align: center;
	margin: 0;
	padding: 0;
	background: url('images/bg_body.jpg') repeat-x top left fixed;
	display: block;
}

#wrap{
	width: 750px;
	margin: 10px auto;
	padding: 0;
	border: 2px groove #666;
	color: #fff;
	background-color: #535353;
}

#header{
	width: 750px;
	height: 100px;
	margin: 0;
	padding: 0;
	float: left;
	
	border-bottom: 2px solid #666;
	background: url('images/bg_head.gif') no-repeat top left;
}

#content{
	width: 577px;
	padding: 0;
	margin: 5px;
	float: left;
	display: block;
	background-color: #535353;
	color: #000;
}

div.citem{
    width: 577px;
	float: left;
	padding: 0;
	margin: 0 0 5px 0;
	background-color: #000;
	border: 2px inset #f7f7f7;
}

Works in Gecko, but not i.e... uh oh

Add spot for geckos

body{
	text-align: center;
	margin: 0;
	padding: 0;
	background: url('images/bg_body.jpg') repeat-x top left fixed;
	display: block;
}

#wrap{
	width: 750px;
	margin: 10px auto;
	padding: 0;
	border: 2px groove #666;
	color: #fff;
	background-color: #535353;
}

#header{
	width: 750px;
	height: 100px;
	margin: 0;
	padding: 0;
	float: left;
	
	border-bottom: 2px solid #666;
	background: url('images/bg_head.gif') no-repeat top left;
}

#content{
	width: 577px;
	padding: 0;
	margin: 5px;
	float: left;
	display: block;
	background-color: #535353;
	color: #000;
}

div.citem{
    width: 577px;
	float: left;
	padding: 0;
	margin: 0 0 5px 0;
	background-color: #000;
	border: 2px inset #f7f7f7;
}

/* Here's my gecko preserving code \*/

/******************************/

Now, all I do is fiddle with the code to get IE to look right, and place the corresponding gecko proper value in the commented area:

"Standardinzing" to all browsers:

body{
	text-align: center;
	margin: 0;
	padding: 0;
	background: url('images/bg_body.jpg') repeat-x top left fixed;
	display: block;
}

#wrap{
	width: 750px;
	margin: 10px auto;
	padding: 0;
	border: 2px groove #666;
	color: #fff;
	background-color: #535353;
}

#header{
	width: 750px;
	height: 100px;
	margin: 0;
	padding: 0;
	float: left;
	
	border-bottom: 2px solid #666;
	background: url('images/bg_head.gif') no-repeat top left;
}

#content{
	width: 577px;
	padding: 0;
	margin: 5px;
	float: left;
	display: block;
	background-color: #535353;
	color: #000;
}

div.citem{
    width: 570px;
	float: left;
	padding: 0;
	margin: 0 0 5px 0;
	background-color: #000;
	border: 2px inset #f7f7f7;
}

/* Here's my gecko preserving code \*/

#content > div.citem{
    width: 577px;
}

/******************************/

3 steps, and now I've got working IE & Gecko css!!!

[Weedpacket]

Originally Posted by bpat1434

Code for gecko-based browsers first.....it's much easier to go into IE, and start fixing

Not to mention, as it is more compliant (not perfect, but you'd have to be doing something more esoteric to make Gecko break), the standard becomes more useful as a reference.

[kralspace]

Thanks so much for all the help. I'm in the process of changing all our pages to standards compliant and will take your advice to start Gecko friendly.

One thing I ran across that solved a lot of problems with disappearing divs was if there was a negative z index the item wouldn't show, if I changed it to positive, there it was!!!!

Onward thru the fog,
Kathy