Log In · Register

 
IE and FF/Chrome css difference, Help with padding
phoenixpyre
post Jul 19 2009, 02:43 PM
Post #1


Senior Member
*****

Group: Member
Posts: 793
Joined: Jun 2006
Member No: 425,250
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/
 
 
 Start new topic
Replies (1 - 5)
synapse
post Jul 19 2009, 02:50 PM
Post #2


Live long and prosper.
********

Group: Staff Alumni
Posts: 10,142
Joined: Apr 2007
Member No: 514,926
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" />
    <!--[if lt IE 7]><link href="script/ie.css" rel="stylesheet" type="text/css" /><![endif]-->
    <!--[if IE 7]><link href="script/ie7.css" rel="stylesheet" type="text/css" /><![endif]-->
</head>
<body>
</body>
</html>
 
fixtatik
post Jul 19 2009, 03:02 PM
Post #3


Senior Member
******

Group: Member
Posts: 1,237
Joined: May 2008
Member No: 648,123
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
<div id="header">
  <div id="header-text">
  Blah, blah, blah
  </div>
</div>
 
phoenixpyre
post Jul 19 2009, 04:27 PM
Post #4


Senior Member
*****

Group: Member
Posts: 793
Joined: Jun 2006
Member No: 425,250
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" />
    <!--[if lt IE 7]><link href="script/ie.css" rel="stylesheet" type="text/css" /><![endif]-->
    <!--[if IE 7]><link href="script/ie7.css" rel="stylesheet" type="text/css" /><![endif]-->
</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
<div id="header">
  <div id="header-text">
  Blah, blah, blah
  </div>
</div>
 
phoenixpyre
post Jul 19 2009, 04:30 PM
Post #5


Senior Member
*****

Group: Member
Posts: 793
Joined: Jun 2006
Member No: 425,250

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" />
    <!--[if lt IE 7]><link href="script/ie.css" rel="stylesheet" type="text/css" /><![endif]-->
    <!--[if IE 7]><link href="script/ie7.css" rel="stylesheet" type="text/css" /><![endif]-->
</head>
<body>
</body>
</html>
 
synapse
post Jul 19 2009, 04:35 PM
Post #6


Live long and prosper.
********

Group: Staff Alumni
Posts: 10,142
Joined: Apr 2007
Member No: 514,926
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
 
« Next Oldest · Webmasters' Corner Resolved Topics · Next Newest »
 

Closed TopicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Switch to: Standard · Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic