Jump to content

Background image link not showing in IE7


andrewgsilver
 Share

Recommended Posts

I have a horizontal navigation bar under a content holder and although everything is fine in firefox if I run the code in Internet Explorer (IE7, not tried 6 yet) the background image links are not showing up.Admittedly I haven’t been using CSS for long so it is probably messy and some of it might be redundant. Anyhow I am hoping that I have perhaps overlooked something obvious and someone will be kind enough to tell me where I might be doing wrong. I have tried filtering to a separate stylesheet and giggling around with the code, but I am still unable to make the background image of the links appear.I have also tried saving the image file in another format with no success. Any help please.HTML

<!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"><head>	  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" />	<meta name="copyright" "Copyright (c) 1998 Divy Dave. All rights reserved." />	<link rel="stylesheet" type="text/css" href="Stylesheet2.css" />	<title>Divy Dave: Test</title>  <script language="JavaScript">function disp_alert(){alert("Your about to leave this website and go to foo.cor/store")}</script></head><body><div id="page">	<div id="top"></div>		<div id="content">			<div id="main">					<div id="main-t"></div>				<div id="main-inner">					<div class="container"></div>					</div>				<div id="main-b"></div>			</div>		</div>				<div id="navigationcontainer">				<ul id="navigation">				<li><h2><a href="home.html">home</a></h2></li>				<li><h2><a href="spec.html">spec.</a></h2></li>				<li><h2><a href="http://www.foo.cor/store" onClick="disp_alert()"; />buy</a></h2></li>				</ul>				</div>	<div class="c">	</div></div></body></html>

CSS

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*	CSS ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/*{margin:0;padding:0;outline:none;}body{color:#4c4c4c;font-family:verdana, arial, helvetica, sans-serif;background:#000000;font-size:13px;}#page{margin:0px auto;width:800px;}/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*	CONTENT LINKS~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/#content a:link{text-decoration:none;color:#1E90FF;border-bottom:0px;}#content a:visited{text-decoration:none;color:#1E90FF;border-bottom:0px;}#content a:hover,#content a:active{color:#999999;border-bottom:0px solid #FF1493;text-decoration:none;}.c{clear:both;}/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*	CONTENT HOLDER~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/div.container{width:100%;height:527px;margin:0 0 0 0px;padding-left:0.8em;line-height:175%;}div.header{margin-bottom:0.8em;margin-top:0.1em;padding-left:0em;color:#000;background-color:#fff;clear:left;font-family:"impact", century gothic, arial, verdana, sans-serif;font-size:3em;}}div.footer{color:#000;boarder-top:0px;background-color:#fff;clear:left;}div.left{height:300px;float:left;width:50%;margin:0;padding-left:0em;.h2 font-size:1.8em;font-family:"century gothic", arial, verdana, sans-serif;}div.content{height:390px;margin-left:50%;margin-bottom:44px;border-left:1px dashed #C0C0C0;padding-left:1.5em;}.noticeline{text-decoration:blink;}#logoline{text-align:right;margin-right:1em;}#barline{background-color:#FFF;width:710px;padding-right:0.5em;height:410px;overflow: auto}/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*	TOP INFORMATION~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/#top{margin-bottom:50px;margin-top:20px;}#navcontainer ul{padding: 0;margin: 0;background-color: #666666;float: left;}/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*	NAVIGATION~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/#navigationcontainer ul li { display: inline;}#navigationcontainer ul li a{background-image: url(images/buttona.png)no-repeat;color: #000000;text-decoration: none;float: left;border-right: 20px solid #000000;border-left: 60px solid #000000;border-top: 5px solid #000000;padding-top: 10px;padding-right: 61px;padding-bottom:30px;padding-left: 45px;}#navigationcontainer ul li a:hover{color: #ffffff;}/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*	MAIN BOARDERS~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/#main{background:#000000;float:left;width:763px;}#main-t{height:27px;background:url(images/main-t.png) no-repeat;}#main-inner{background: #fff url(images/main-i.png) repeat-y;padding:0 20px}#main-b{height:27px;background:url(images/main-b.png) no-repeat;padding-bottom:20px;}#main p{line-height:1.5em;padding:.25em 0 .5em 0;/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*	HEADINGS~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/h2, h3, h4{font-family:"century gothic", arial, verdana, sans-serif;}#main h2{padding-bottom:0.25em;color:#FF1493;font-size:1.8em;}#main h2 span{color:#ccc;}#main h3 a{color:#999 !important;}#main h3{padding-bottom:.25em;font-size:1.4em;}/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*	BOTTOM~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/#footer{font-size:.9em;color:#999;border-top:1px dotted #ccc;padding-top:10px;}

Link to comment
Share on other sites

No to single quotes.Try giving IE a nudge by adding other (default) styles to the background-image (and maybe a colour so you'll get something if there's a loading delay) :background: #mycolor url(images/buttona.png) top left fixed no-repeat

Link to comment
Share on other sites

Thanks very much for your replies. Unfortunately I have tried all the following suggestion with no success, not even the colour will load.

background: url('images/buttona.png') no-repeat;background: url(images/buttona.png) no-repeat;background: url(images/buttona.png)top left fixed no-repeat;background: #000000 url(images/buttona.png) no-repeat;background: #mycolor url(images/buttona.png) top left fixed no-repeatbackground: #000000 url(images/buttona.png)top left fixed no-repeat;background-image: url(images/buttona.png) no-repeat;background-image: url(images/buttona.png)top left fixed no-repeat;background-image: #000000 url(images/buttona.png)no-repeat;background-image: #000000 url(images/buttona.png)top left fixed no-repeat;

Link to comment
Share on other sites

background: #000000 url(images/buttona.png)top left fixed no-repeat;

should work, but better with a space after the bracket:

#000000 url(images/buttona.png) top left fixed no-repeat;

Note that you can apply colour to "background", but not to "background-image"—but this is not a lot of help. Put it through a validator: you need to be spot-on, no errors, if you're using a strict DTD. The opening of the script tag looks wrong.

Link to comment
Share on other sites

Thanks very much for your replies. Unfortunately I have tried all the following suggestion with no success, not even the colour will load.
background: url('images/buttona.png') no-repeat;background: url(images/buttona.png) no-repeat;background: url(images/buttona.png)top left fixed no-repeat;background: #000000 url(images/buttona.png) no-repeat;background: #mycolor url(images/buttona.png) top left fixed no-repeatbackground: #000000 url(images/buttona.png)top left fixed no-repeat;background-image: url(images/buttona.png) no-repeat;background-image: url(images/buttona.png)top left fixed no-repeat;background-image: #000000 url(images/buttona.png)no-repeat;background-image: #000000 url(images/buttona.png)top left fixed no-repeat;

Your code worked for me in both FF and IE7 if you use a jpg and the right css syntax. It did not work for me in either IE or FF using a png. So I suspect the browsers don't (yet) support png for background image. To clear up the css syntax you've been trying: you can set background-image and background-repeat properties at the same time using background:
background: url(images/buttona.jpg) no-repeat;

or separately using background-image and background-repeat:

background-image: url(images/buttona.jpg);background-repeat: no-repeat;

So the ones you posted using background-image with no-repeat are not valid. See http://www.w3schools.com/css/css_background.asp for further info.

Link to comment
Share on other sites

[...] It did not work for me in either IE or FF using a png. So I suspect the browsers don't (yet) support png for background image.
Sorry, ignore that, just noticed a typo in my filename... it works fine for me with png in both FF and IE7.
Maybe try putting single quotes around the path.
background:url('images/main-b.png') no-repeat;

No to single quotes. [...]
...unless the path contains spaces, in which case you do need the quotes (or FF fails to display the image).
Link to comment
Share on other sites

[sigh] On a mac, I'm getting a white box with a big black border, in three browsers, nothing else. This is after having replaced the < with an opening < at the script tag (otherwise the script shows at the top of the page in grey), using a substitute image, and separating the 'no-repeat' from the background url closing bracket. So, there's still a problem somewhere.What I did see, although I don't understand why it might affect the background-image, is a mis-match between the css

#navigationcontainer ul li { display: inline;}

and having <h2>, which is a block element, wrapping the <a> tag.There are several css errors, check athttp://jigsaw.w3.org/css-validator/cheers

Link to comment
Share on other sites

One thing which you haven't tried is a reference to the folder. Try these:

background:url('./images/main-b.png') no-repeat;background:url('../images/main-b.png') no-repeat;

The first one should be the correct one. See if that makes a difference.If that doesn't work, place the html file, the css file and the images files all in the same folder and change the css file accordingly.also, check that the folder for the Images is actually named "images". Check the plural and the case of the folder name.

Link to comment
Share on other sites

Fixed, it was simply a case of using the wrong combination I think!. I managed to get the image to work by saving the file as a jpg first. However I wasn’t entirely confident this was my problem because I already had some png’s loading.I usually check file reference first, but now I have it working I am not altogether sure where I was previously going wrong. I’d say adding a background colour probably done the trick.Thank you everyone for your kind suggestions all the same.This is what I settled with.

background: #000000 url(images/buttona.png) no-repeat;

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...