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/ |
|
|
|
 |
Replies
|
Jul 19 2009, 04:27 PM
Post
#2
|
|
|
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> |
|
|
|
Posts in this topic
phoenixpyre IE and FF/Chrome css difference Jul 19 2009, 02:43 PM
tcunningham Just set up a different style sheet for IE?
CODE... Jul 19 2009, 02:50 PM
phoenixpyre NEVERMIND I GOT IT! :D
thanks
QUOTE(tcunning... Jul 19 2009, 04:30 PM fixtatik IE7, I assume? It looks the same in IE8 & FF.
... Jul 19 2009, 03:02 PM tcunningham While you're making a style.css for firefox, s... Jul 19 2009, 04:35 PM |
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members: