Problems horizontally centering body image in IE7

HTML & CSS
1

I am having problems getting a background image to center horizontally in IE7. Works fine in Firefox and Safari (both latest versions I believe)

For some reason, the image is shifting to the right in IE.

Here is my code:



/* commented backslash hack \\*/ 

html {
	height:100%;
	
}

body{
	height:100%;
	
	font-family: Verdana, Geneva, Arial, sans-serif;
	background: #fdee63 url(../images/bg.jpg) no-repeat  center top;

	padding:0;
	margin:0;
	
	margin-right: auto;
	margin-left: auto;
	font-size: 82%;
	color: #626262;
	text-align:center;

	border: 1px solid black;

} 

/* end hack */
html,body {margin:0;padding:0}

Weird thing is that if I add “fixed” to the background settings it lines up fine. I would prefer not to have the image fixed as looks a bit weird when the site scrolls up and down and the background image stays still



background: #fdee63 url(../images/bg.jpg) no-repeat center top fixed;

Any ideas why this is happening in IE7?

Thanks

Paul

2

And here is a version without the offending code:

3

Oops I was incorrect in my last post as I had the background set to fixed - hence the stripped down version worked.

I have however discovered the code that is causing the problem.



#topnav ul#menu li a {
		text-indent: -9999px;
		text-decoration: none
}

Here is an example where you can see the problem with the green

Any ideas why this innocent looking code would mess up the position of the background image in IE7?

Thanks as always

Paul

4

Hi,

It sounds like you have run into the 1px BG image jog in IE.
See this FAQ explanation with suggested workarounds.

The 1px background image jog in IE

5

Thanks Paul - really appreciate your time looking at this.

I have removed the position: absolute. To be honest this code is code I have been using in websites for many years and probably just copied it from a tutorial or forum post. I even have it on my own website http://www.mediakitchen.co.uk/ however I guess this is the first time I have tried to use a centered background image so have never had a problem with it in the past.

Anyway enough rambling from me - thank you very much for your help fixing this.

Paul

6

Hi,

The problem is nothing to do with the background image but the fact that you haven’t set a left co-ordinate for your absolute menu item. IE doesn’t like it when you don’t specify the co-ordinates and in a centred layout will often align the absolute element with the text centring instead.

Fix it like this:


#topnav ul#menu li {
    padding-right: 0px;
    padding-left: 0px;
    padding-bottom: 0px;
    margin: 0px;
    padding-top: 0px;
    list-style-type: none;
    position: absolute;
    top: 0px;
[B]    left:0;[/B]
}

It doesn’t look as though you need absolute positioning there anyway.

7

Thanks for the reply Paul.

Just in case you didn’t spot my post, here is a link to a cut down page showing the problem with IE.

You should see the green background image (bg2.jpg) is shifted to the right rather than centered when you view the page in IE7.

Thanks

Paul

8

Thanks Rayzur.

I was going to upload an example to show you the problem as I didn’t think it was the issue you suggested. However when I stripped down my code to show a basic example, the background appears to center correctly in IE7 so guess there is something in my code causing an issue.

Thanks

Paul

9

Do you have a link to the real page with the issue?

It will be hard to debug unless we can see something or at least the full html/css and a screenshot of the bug :slight_smile: