Background image not showing [Moved from IE]

2158 Views 5 Replies 3 Participants Last post by Laxer, Apr 8, 2011

bangtheory

Discussion Starter · Apr 7, 2011

Hello, I am having some real trouble with working with IE. I developed our club website Raleigh Tournament Chess Club and everything appeared to be working fine in every single browser but I have this nagging issue with previous versions of Internet Explorer not showing the background images. Can someone help me out with this?? Is there some kind of hack for this? Thanks in advance.
The following pretty much comprises the entire top half of the page which is not showing in IE.

Code:

#site-top {
    background:url(../images/site-images/content-top.jpg) top no-repeat;
    width:984px;
    margin:0 auto;
    height:186px;
}
#nav-container {
    margin:0 auto;
    width:950px;
    height:36px;
    padding-top: 151px;
}

there is also an issue with the padding not working. Internet Explorer is really getting on my nerves sorry for venting.

Save

Status: Not open for further replies.

1 - 6 of 6 Posts

mcorton

· #2 · Apr 7, 2011

Hi bangtheory and welcome to TSF. Very nice website. I'm also a chess player and sorry to hear about your friend. Which version of IE is giving you trouble? I looked at in in Firefox and it look amazing. There are a couple of tricks to make things look better in IE but if you're having trouble in more than one version it may be a bit more difficult.

Save

Laxer

· #3 · Apr 7, 2011

Hello and Welcome.

I don't see anything wrong with your coding. i know some versions of IE are a bit picky on how you define multiple things (padding, margin, etc)

try this instead:

Code:

#site-top {
	background:url(../images/site-images/content-top.jpg) top no-repeat;
	width:984px;
	margin:0px auto 0px auto;
	height:186px;
}
#nav-container {
	margin:0px auto 0px auto;
	width:950px;
	height:36px;
	padding-top: 151px;
}

I will agree with mcorton, very nice looking site. good job.

if padding errors continue to occur and this fixes the top try adjusting the css to padding: top right bottom left;

if that doesn't line up quite right you may need an IE hack =/

See less See more

Save

bangtheory

Discussion Starter · #4 · Apr 7, 2011 (Edited)

Thank you both for your kind words. Unfortunately this background issue only occurs in older versions of IE as I have mentioned. I did it this way adding the image as the background instead of directly into the site because IE has a terrible time with padding issues and I simply don't trust IE. Well now IE is giving me this problem with just SHOWING the background image!

The current CSS utilizes top positioning but I dont believe this is that issue. I highly suspect that this is because IE does not recognize the background image period but I am not sure of this. I am still in need of help here.

mcorton I am only having issues in IE, this is isolated to IE 7 and below only. Everything is great in Firefox, Opera, Chrome, Safari... everything.. IE and IE ONLY is giving me a hassle.

Save