IE has not delivered link Image

[Webiter]

Chrome, Firefox and Safari delivers City of Culture image in sidebar here (http://www.tuirtre.webitry.net) :)

IE does not deliver the image and that makes me :(

What workround do I have to make to get IE to do the business and make me :) again?

Thanks in advance for your assistance.

[jscheuer1]

From the page's source code (indents removed):


<div id="sideBar">
<center>
<a href="http://www.cityofculture2013.com/Our-2013-Bid/Home.aspx" target="blank">
<img style ="border:0;" src="cityofculture.jpg" alt="City of Culture Image" width="px"/></a>

<!-- NEWS REEL-->
<div id="NewsDiv">
<table cellpad . . .

Get rid of the highlighted.

[Webiter]

Thanks John, That made the correction in IE. :)

I am now seeking to upgrade the image link with a rollover effect. I have similar code working on another site so I just thought that it would easily transfer to this one. :o But the image will not present at all. Once I can it to present I can then refine positioning.

The code that I am using is as follows on html page:


<div id="city">
<a href="http://www.cityofculture2013.com/Our-2013-Bid/Home.aspx" class="link">City of Culture Image</a>
</div>

and like so on the style sheet



#city {border: solid 1px red; font-size: 0px; width: 235px; height: 75px;}
#city a{background:url(city.jpg); display: block; width: 235px;height: 75px;}
#city a.link:{background-position:0px 0px;}
#city a.link:hover {background-position:left 0px;}


Am I making a pigs ear out of the url(city.jpg); thing? :eek:

Thanks for your patients.

[jscheuer1]

Well, tuirtre.webitry.net/city.jpg is a 404 Not Found. That could have something to do with it. And the highlighted line has a syntax error (red):



#city {border: solid 1px red; font-size: 0px; width: 235px; height: 75px;}
#city a{background:url(city.jpg); display: block; width: 235px;height: 75px;}
#city a.link:{background-position:0px 0px;}
#city a.link:hover {background-position:left 0px;}

Get rid of the red part. And some browsers require a space here:


#city a{background: url(city.jpg); di . . .

Take care of those three things and see.

The browser cache may need to be cleared and/or the page refreshed to see changes.

If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

Notes:

The syntax error with the colon should only invalidate that line, and I believe 0, 0 is the default background position. If so, in many cases that error is a wash - does no harm. The added space I'm suggesting is probably only for IE less than 9, maybe even earlier. The most important thing is the missing image. There could also be other problems, like conflicting styles and/or conflicting surrounding HTML code, at least in some browsers.

[Webiter]

Still foxed by this. I must be missing something simple! Link is at this place (http://www.tuirtre.webitry.net/about.html).

[jscheuer1]

In the css/myStyle.css file it has:


/*City of Culture Rollover*/
#city {border: solid 1px red; font-size: 0px; width: 235px; height: 75px;}
#city a {background: url(derry.jpg); display: block; width: 235px;height: 75px;}
#city a.link {background-position: 0px 0px;}
#city a.link:hover {background-position: right 0px;}
/* End of Rollover Control */

Paths in css files are relative to the css file. Since the image is in the parent (also in this case, the root) folder, this should be:


#city a {background: url(../derry.jpg); display: block; width: 235px;height: 75px;}

or:


#city a {background: url(http://www.tuirtre.webitry.net/derry.jpg); display: block; width: 235px;height: 75px;}

or:


#city a {background: url(/derry.jpg); display: block; width: 235px;height: 75px;}

And this line:


#city a.link:hover {background-position: right 0px;}

makes no noticeable change, it should be:


#city a.link:hover {background-position: 0 75px;}

or:


#city a.link:hover {background-position: 0 bottom;}

[Webiter]

Thanks John,

Sorted. I must be mixing up img src and url in different situations. Can't beat experience. :)