coldkill Posted February 19, 2007 Share Posted February 19, 2007 Hey folks, I've got a problem with IE7 in that it pushes the background image of my main content to the right by about 5 pixels. This makes the divider at the bottom of the content area look displaced. Anyone know how to solve this? It only happens in IE (go figure ¬¬) but it's not going to be a problem to have IE run off a seperate style sheet. Thanks, Cold Note: The style for this isn't done yet hence the warning stripes and crappy looking nav bar. Link to comment https://forums.phpfreaks.com/topic/39194-solved-backgrond-image-problem/ Share on other sites More sharing options...
joder Posted February 19, 2007 Share Posted February 19, 2007 Just a suggestion since I don't use IE 7. However, in my experience (I ususally play with the style sheet code), is to add margin:0 and padding: 0 in the CSS for the main content section. It is likely a margin/padding issue that Firefox would not set where IE does. For this, you shouldn't need another stylesheet. Link to comment https://forums.phpfreaks.com/topic/39194-solved-backgrond-image-problem/#findComment-188828 Share on other sites More sharing options...
coldkill Posted February 19, 2007 Author Share Posted February 19, 2007 Nope still nothing. Problem is I use both padding and margins to get the site to center and to make the content display how I want it to. Cold Link to comment https://forums.phpfreaks.com/topic/39194-solved-backgrond-image-problem/#findComment-188877 Share on other sites More sharing options...
ToonMariner Posted February 19, 2007 Share Posted February 19, 2007 what doc type are you using? is there a borer on this panel? FF and IE still differ in how they render background images when an element has a border; once places teh background behind or under the border the other doesn't start rendering until the border is drawn... Link to comment https://forums.phpfreaks.com/topic/39194-solved-backgrond-image-problem/#findComment-188943 Share on other sites More sharing options...
coldkill Posted February 19, 2007 Author Share Posted February 19, 2007 There's no border it's part of the image. Thinking about it there are no borders on that page. I'm using xHTML 1.0 Transitional. Cold ::EDIT:: Wait yes there is but that's above the content/underneith the header image. Link to comment https://forums.phpfreaks.com/topic/39194-solved-backgrond-image-problem/#findComment-188946 Share on other sites More sharing options...
coldkill Posted February 20, 2007 Author Share Posted February 20, 2007 Anyone? It still doesn't work and I've applied the margin, padding and border attributes to html with the value of 0 pixels. Cold Link to comment https://forums.phpfreaks.com/topic/39194-solved-backgrond-image-problem/#findComment-189901 Share on other sites More sharing options...
ToonMariner Posted February 21, 2007 Share Posted February 21, 2007 try a strict doctype or xhtml 1.1 Link to comment https://forums.phpfreaks.com/topic/39194-solved-backgrond-image-problem/#findComment-190477 Share on other sites More sharing options...
coldkill Posted February 22, 2007 Author Share Posted February 22, 2007 Nope didn't work. Thanks, Cold Link to comment https://forums.phpfreaks.com/topic/39194-solved-backgrond-image-problem/#findComment-190902 Share on other sites More sharing options...
joder Posted February 22, 2007 Share Posted February 22, 2007 Would you mind posting the relevant html and css? Link to comment https://forums.phpfreaks.com/topic/39194-solved-backgrond-image-problem/#findComment-191027 Share on other sites More sharing options...
coldkill Posted February 22, 2007 Author Share Posted February 22, 2007 CSS: #content { width:770px; background-image:url(images/backgrounds/conbg.png); background-repeat:repeat-y; text-align:left; font-size:11px; padding-top: 2px; padding-right: 0px; padding-bottom: 0px; padding-left: 70px; margin-left: 130px; margin-right: 0px; vertical-align:top; } HTML: <!-- Start Content Area --> <div id="content"> <div id="contentlimit"> '.$content.' </div> <br /> </div> <!-- End Content Area --> The variable $content is replaced with the actual page code. Cold Link to comment https://forums.phpfreaks.com/topic/39194-solved-backgrond-image-problem/#findComment-191069 Share on other sites More sharing options...
lando Posted February 22, 2007 Share Posted February 22, 2007 Is there anyway to get a link to view it? I'd like to see how the other elements are laid out to see if they are interfering in any way. Link to comment https://forums.phpfreaks.com/topic/39194-solved-backgrond-image-problem/#findComment-191397 Share on other sites More sharing options...
coldkill Posted February 22, 2007 Author Share Posted February 22, 2007 http://beta.assault-airlift.com Like I said it shows up perfectly in Firefox but not in Internet Explorer. Cold Link to comment https://forums.phpfreaks.com/topic/39194-solved-backgrond-image-problem/#findComment-191409 Share on other sites More sharing options...
lando Posted February 22, 2007 Share Posted February 22, 2007 I'd suspect that the navigation box on the left is pushing into the #content div, try playing around with it. You have the margin-right set to auto, try making that 0px. Link to comment https://forums.phpfreaks.com/topic/39194-solved-backgrond-image-problem/#findComment-191425 Share on other sites More sharing options...
coldkill Posted February 22, 2007 Author Share Posted February 22, 2007 Well I did have margin: 0px auto 0px 0px; I changed it to margin-left: auto and margin-right: 0px but both don't work. Cold Link to comment https://forums.phpfreaks.com/topic/39194-solved-backgrond-image-problem/#findComment-191626 Share on other sites More sharing options...
joder Posted February 22, 2007 Share Posted February 22, 2007 Did you try all 0's and no auto? Link to comment https://forums.phpfreaks.com/topic/39194-solved-backgrond-image-problem/#findComment-191637 Share on other sites More sharing options...
coldkill Posted February 22, 2007 Author Share Posted February 22, 2007 Still nothing. Cold Link to comment https://forums.phpfreaks.com/topic/39194-solved-backgrond-image-problem/#findComment-191752 Share on other sites More sharing options...
lando Posted February 22, 2007 Share Posted February 22, 2007 I downloaded your site onto my machine and played around with it locally. The only way I could fix the issue was when I removed the navigation to the left. You might consider restructuring that navigation, maybe use something other than a table. Link to comment https://forums.phpfreaks.com/topic/39194-solved-backgrond-image-problem/#findComment-191758 Share on other sites More sharing options...
coldkill Posted February 23, 2007 Author Share Posted February 23, 2007 Ok I'll play around with that. Cold Link to comment https://forums.phpfreaks.com/topic/39194-solved-backgrond-image-problem/#findComment-191781 Share on other sites More sharing options...
coldkill Posted February 23, 2007 Author Share Posted February 23, 2007 Ok I changed the table for Div tags. Produces the same result as the table in both browsers. Cold Link to comment https://forums.phpfreaks.com/topic/39194-solved-backgrond-image-problem/#findComment-191795 Share on other sites More sharing options...
lando Posted February 23, 2007 Share Posted February 23, 2007 Okay... let me play with it some. Link to comment https://forums.phpfreaks.com/topic/39194-solved-backgrond-image-problem/#findComment-191820 Share on other sites More sharing options...
lando Posted February 23, 2007 Share Posted February 23, 2007 Okay, I got it to work in IE6, but when it does it breaks in Firefox. To get it to work in both browsers you will need to use an IF IE6 statement in your header. What I describe below is what you need to put in your IF IE6 style sheet. I don't have IE7 on my desktop, thank you MS Validation check, so you will need to test this on your own in IE7. First: I changed the width:130px; to width: 100%; in .mhead and .mlink a Second: I changed the width:130px; of #nav to width:127px; Third: I adjust the margin-left: 130px; of #content and #condiv to margin-left: 127px; The last one is a bit more tricky, and makes me cringe at the whole thing... You need to be able to adjust menudiv.jpg's width based on which browser is viewing it. Firefox needs the 130px version, IE needs the 127px version. To pull this off you will need to make the img a background of a div, this will let you define the background image separately in each style sheet. Like I said, this is how I got it to work. I really think there is a larger overall issue that is causing this problem...but as of right now I don't see it or don't know it. Link to comment https://forums.phpfreaks.com/topic/39194-solved-backgrond-image-problem/#findComment-191865 Share on other sites More sharing options...
coldkill Posted February 23, 2007 Author Share Posted February 23, 2007 Doesn't work with the divs. For some reason IE is pushing the Content background image across 4 pixels but with other browsers it doesn't do it. Thanks for the help. This just reinforces my hate of IE Cold Link to comment https://forums.phpfreaks.com/topic/39194-solved-backgrond-image-problem/#findComment-191877 Share on other sites More sharing options...
coldkill Posted February 24, 2007 Author Share Posted February 24, 2007 I still need help with this please. Cold Link to comment https://forums.phpfreaks.com/topic/39194-solved-backgrond-image-problem/#findComment-192691 Share on other sites More sharing options...
coldkill Posted February 26, 2007 Author Share Posted February 26, 2007 :bump: Tried adjusting the content definition, putting in a table and stuff and it still doesn't work. Any more ideas? Cold Link to comment https://forums.phpfreaks.com/topic/39194-solved-backgrond-image-problem/#findComment-194304 Share on other sites More sharing options...
coldkill Posted March 1, 2007 Author Share Posted March 1, 2007 Ok so it worked with my old style sheet and images. This one doesn't seem to work though. The only things I have changed are the colours and the images themselves. Yet Firefox still displays the site as it is designed to be shown. Any ideas? Cold Link to comment https://forums.phpfreaks.com/topic/39194-solved-backgrond-image-problem/#findComment-196552 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.