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. Quote Link to comment 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. Quote Link to comment 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 Quote Link to comment 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... Quote Link to comment 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. Quote Link to comment 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 Quote Link to comment 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 Quote Link to comment Share on other sites More sharing options...
coldkill Posted February 22, 2007 Author Share Posted February 22, 2007 Nope didn't work. Thanks, Cold Quote Link to comment 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? Quote Link to comment 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 Quote Link to comment 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. Quote Link to comment 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 Quote Link to comment 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. Quote Link to comment 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 Quote Link to comment 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? Quote Link to comment Share on other sites More sharing options...
coldkill Posted February 22, 2007 Author Share Posted February 22, 2007 Still nothing. Cold Quote Link to comment 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. Quote Link to comment 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 Quote Link to comment 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 Quote Link to comment Share on other sites More sharing options...
lando Posted February 23, 2007 Share Posted February 23, 2007 Okay... let me play with it some. Quote Link to comment 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. Quote Link to comment 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 Quote Link to comment 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 Quote Link to comment 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 Quote Link to comment 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 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.