IE and FF/Chrome css difference, Help with padding |
  |
 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/ |
|
|
|
|
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> |
|
|
|
|
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> |
|
|
|
|
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> |
|
|
|
|
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> |
|
|
|
|
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
|
|
|
|
|
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members: