CSS / HTML - hyperlinks on top of image problems.

[sanders720]

I have an application that I've used before, to show hyperlinks on top of an image. For some reason, this one isn;t working.

It looks great in Dreamweaver when I preview it, but when I look at the hyperlinks upon loading the HTML code, all the hyperlinks do not occur at their respective X,Y coornates, but are upper-left justified down the left side of the image, like this:

100
101
102
.
.
.
.
.


Thanks in advance for any help you can provide!


CSS:

#map {
background-image: url(illustrations/layout.jpg);
width: 948px;
height: 683px;
position: relative;
}

#100 {
position: absolute;
top: 190px;
left: 370px;
}

#101 {
position: absolute;
top: 195px;
left: 300px;
}



HTML:

<link rel="stylesheet" href="2col_leftNav.css" type="text/css">
.
.
.
.

<div id="map">
<div id="100">
<a href="illustrations/100.jpg" id="100"> <span class="documentlink">100</span></a>
</div>
<div id="101">
<a href="illustrations/101.jpg" id="101"> <span class="documentlink">101</span></a>
</div>
<div id="102">
<a href="illustrations/102.jpg" id="102"> <span class="documentlink">102</span></a>
</div>
.
.
.
.
.
</div>

 

[Vragabond]

Your problem. ID is a number which is not allowed. It must start with a character, else will be ignored. I put 'a' in front of all ids a100, a101, etc. and it worked like a charm. Hope it helps.

 

[sanders720]

I bet it did! I wondered if this might be the problem, because it is the only difference. It's misleading though, because Dreamweaver shows the preview as though it worked.

Thanks for your reply.