Forums > IE and FF/Chrome css difference

phoenixpyre

Jul 19 2009, 02:43 PM

I can situate my coding as perfect as I would like it, and then I remember... I have to look at it in Internet Explorer, and there's always an issue.

I padded the left side of the container div layer by 21px and nothing but the header is affected incorrectly in IE. I don't understand what's wrong and I'm getting too frustrated to deal with it. Can anyone help?

this is the style for the body, container, and header:
body {
margin-top: 0;
padding-top: 0;
background-color: #4aa5ff;
text-align: center;
background-image: url(images/body-background.gif);
background-repeat: repeat;
background-attachment: scroll;
}

#container {
width: 991px;
height: 900px;
background-image: url(images/content-background.gif);
background-repeat: repeat-y;
margin: auto;
padding-left: 21px;
padding-top: 0;
}

#header {
padding: 0;
margin-left: 0;
width: 949px;
height: 177px;
background-image: url(images/header.jpg);
background-repeat: no-repeat;
background-align: center center;
}

and the site is @ http://pyr0tech21.webs.com/

tcunningham

Jul 19 2009, 02:50 PM

Just set up a different style sheet for IE?

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <link href="script/style.css" rel="stylesheet" type="text/css" />
    
    
</head>
<body>
</body>
</html>

fixtatik

Jul 19 2009, 03:02 PM

IE7, I assume? It looks the same in IE8 & FF.

IE7 and earlier (or IE6, I don't remember), treated padding in fixed-width elements differently. Where if you gave something a width of 900 pixels and added a padding of 10 pixels on either side, IE would keep that element 900 pixels wide. FF, Opera, Safari, Chrome, any standards-compliant browser would add 10 pixels to either side, making it 920 pixels wide.

To fix the problem, you just put another element inside and give it a margin of 10 pixels:

CODE

#header { width:900px; }
#header-text { margin:0 10px; }

CODE

phoenixpyre

Jul 19 2009, 04:27 PM

If I do this way how do I set up the .css files? do i just put the coding in there or do i have to have the <style> tags or what?

QUOTE(tcunningham @ Jul 19 2009, 02:50 PM)

Just set up a different style sheet for IE?

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <link href="script/style.css" rel="stylesheet" type="text/css" />
    
    
</head>
<body>
</body>
</html>

This didn't do anything...

QUOTE(fixtatik @ Jul 19 2009, 03:02 PM)

IE7, I assume? It looks the same in IE8 & FF.

IE7 and earlier (or IE6, I don't remember), treated padding in fixed-width elements differently. Where if you gave something a width of 900 pixels and added a padding of 10 pixels on either side, IE would keep that element 900 pixels wide. FF, Opera, Safari, Chrome, any standards-compliant browser would add 10 pixels to either side, making it 920 pixels wide.

To fix the problem, you just put another element inside and give it a margin of 10 pixels:

CODE

#header { width:900px; }
#header-text { margin:0 10px; }

CODE

phoenixpyre

Jul 19 2009, 04:30 PM

NEVERMIND I GOT IT! :D

thanks

QUOTE(tcunningham @ Jul 19 2009, 02:50 PM)

Just set up a different style sheet for IE?

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <link href="script/style.css" rel="stylesheet" type="text/css" />
    
    
</head>
<body>
</body>
</html>

tcunningham

Jul 19 2009, 04:35 PM

While you're making a style.css for firefox, safari, opera, ie8.. you'll also create additional 2 stylesheets for ie browsers less than ie 6, 5.5, 5.0 and for ie 7. Where you'll make sure that your style.css makes everything look perfect in firefox, safari, etc. Then you'll basically start over for the ie.css and the ie7.css

Mike

Jul 19 2009, 05:04 PM

I'm guessing this is resolved. Matt, PM me if you need this reopened. Topic closed & moved.