I'm puzzled on this one. I have an image that is being displayed as the background to a div. Then I have absolutely positioned some links to act as hotspots over top of three sections of the picture.

For some reason IE7 is not creating clickable links. I've set the z-index to 100 but it just isn't working.

Any suggestions please?

http://www.oxygencomputers.com.au

Last i knew IE didn't support the Z-index, so it lays a clear image over preventing you from "clicking" the link and instead you click the image.

hmm.... I didn't know that.

Any suggestions how I can get around this? I can't use an image map on a background image can I?

Why dont you use actual images side by side instead of as a background?

Originally Posted by Decaf

Last i knew IE didn't support the Z-index, so it lays a clear image over preventing you from "clicking" the link and instead you click the image.

Since when does IE not support z-index? z-index only works on positioned elements.

Firstly, you don't need to use a span element within your anchors. Secondly, I cannot locate the style rules you placed on these anchors, for the class names you gave them. Lastly, a z-index would not apply, because it's a background image. Doing it the way you are, you would have to define a width and height on your anchors and align the text part accordingly.

tim

Sorry, I forgot to include the CSS:

#mainpic a.laptops {
   position: absolute;
   width: 180px;
   height: 154px;
   left: 75px;
   top: 208px;

   z-index: 100;
   text-align: center;
}

#mainpic a.laptops span {
   color: white;
   text-decoration: underline;
   display: block;
   margin-top: 134px;
}

#mainpic a.desktops {
   position: absolute;
   width: 240px;
   height: 202px;
   left: 361px;
   top: 160px;
   z-index: 100;
   text-align: center;
}

#mainpic a.desktops span {
   color: white;
   text-decoration: underline;
   display: block;
   margin-top: 182px;
}

#mainpic a.officeware {
   position: absolute;
   width: 185px;
   height: 130px;
   left: 688px;
   top: 232px;
   z-index: 100;
   text-align: center;
}

#mainpic a.officeware span {
   color: white;
   text-decoration: underline;
   display: block;
   margin-top: 110px;
}

OK, that's why I didn't see it at first. You're putting all that on mainpic, which you're using as a background image. The styles you're applying need to be put directly on the classes you're using. Take the #mainpic off, put those rules on .classname a for each one, and it should work fine.

tim

I've just deduced it to the #mainpic property position: relative;

For some reason it is causing the links within the DIV in IE to now work at all.

Originally Posted by serandfae

OK, that's why I didn't see it at first. You're putting all that on mainpic, which you're using as a background image. The styles you're applying need to be put directly on the classes you're using. Take the #mainpic off, put those rules on .classname a for each one, and it should work fine.

tim

I don't follow... I have the mainpic there positioned as relative because if I position the anchors as absolute and then they will be relative to the container/window. What do you mean by "those classes"... Which ones?

Originally Posted by zincoxide

I don't follow... I have the mainpic there positioned as relative because if I position the anchors as absolute and then they will be relative to the container/window. What do you mean by "those classes"... Which ones?

.laptops, .desktops, and .officeware. Put the rules JUST on those, as such because tying them to #mainpic is what's causing those styles not to be recognized.

tim

Unfortunately, that did not do it. This is now the CSS file and nothing has changed:

#mainpic {
   position: relative;
   width: 100%;
   height: 368px;
   margin: 0;
   background: url(../images/bg-home.jpg) no-repeat left top;
}

a.laptops {
   position: absolute;
   width: 180px;
   height: 154px;
   left: 75px;
   top: 208px;

   z-index: 100;
   text-align: center;
}

a.laptops span {
   color: white;
   text-decoration: underline;
   display: block;
   margin-top: 134px;
}

a.desktops {
   position: absolute;
   width: 240px;
   height: 202px;
   left: 361px;
   top: 160px;
   z-index: 100;
   text-align: center;
}

a.desktops span {
   color: white;
   text-decoration: underline;
   display: block;
   margin-top: 182px;
}

a.officeware {
   position: absolute;
   width: 185px;
   height: 130px;
   left: 688px;
   top: 232px;
   z-index: 100;
   text-align: center;
}

a.officeware span {
   color: white;
   text-decoration: underline;
   display: block;
   margin-top: 110px;
}

Here is a link to the complete css file.

You left the span element within the anchors, which is unnecessary and may be part of your woes. Beyond that, I'm drawing a blank. Also, though it's unrelated, you have an extra </script> on the page.

Edit: I took the span elements out, then put this in conditional comments just for IE, that at least got the links clickable. I'll tinker with it some to see if I can get it to click anywhere.

.laptops{
   position: absolute;
   width: 180px;
   height: 154px;
   left: 75px;
   top: 208px;

   z-index: 10000;
   text-align: center;
     background:transparent;
}

.laptops{
   color: white;
   text-decoration: underline;
   display: block;
   margin-top: 134px;
}

.desktops{
   position: absolute;
   width: 240px;
   height: 202px;
   left: 361px;
   top: 160px;
   z-index: 100;
   text-align: center;
     background:transparent;
}

.desktops{
   color: white;
   text-decoration: underline;
   display: block;
   margin-top: 182px;
}

.officeware{
   position: absolute;
   width: 185px;
   height: 130px;
   left: 688px;
   top: 232px;
   z-index: 100;
   text-align: center;
     background:transparent;
}

.officeware{
   color: white;
   text-decoration: underline;
   display: block;
   margin-top: 110px;
}

tim

I removed the span elements as you suggested but that didn't work.

If I remove the position: relative from the #mainpic the links become clickable.

The span elements are there to position the words to the bottom center of the anchors.

They stayed in that position even without the span. But there's got to be a better way of doing it without all that positioning. I'll keep tinkering with it, but at this point it will be after tomorrow.

tim

No problem... Thank you so much for your help.

I figured the best way (for all monitor sizes) was to do it with the positioning.

I removed the span tags and the text jumped up to the top of the anchors.

Got it! Here are the relevant changes to the HTML:

<div id="mainpic">
<a href="http://www.oxygencomputers.com.au/index.php?option=com_virtuemart&amp;page=shop.browse&amp;category_id=2&amp;Itemid=9" class="laptops"><span>Laptops</span></a>
<a href="http://www.oxygencomputers.com.au/index.php?option=com_virtuemart&amp;page=shop.browse&amp;category_id=1&amp;Itemid=9" class="desktops"><span>Desktops</span></a>
<a href="http://www.oxygencomputers.com.au/index.php?option=com_virtuemart&amp;page=shop.browse&amp;category_id=3&amp;Itemid=9" class="officeware"><span>Officeware</span></a>
</div>
<br class="brclear" />

And the CSS:

#mainpic {
   width: 100%;
   height: 368px;
   margin: 0;
   background: url(http://www.oxygencomputers.com.au/templates/o2custom/images/bg-home.jpg) no-repeat left top;
}

.laptops{
   float: left;
   width: 300px;
     height:154px;
   margin-top:166px;
   text-align: center;
     text-decoration:none;
   color: white;
   display: block;
     vertical-align: baseline;
}

.desktops{
   float: left;
   width: 320px;
     height:202px;
   margin-top:118px;
   text-align: center;
     text-decoration:none;
   color: white;
   display: block;
     vertical-align: baseline;
}

.officeware{
   float: left;
   width: 320px;
     height:130px;
   margin-top:190px;
   text-align: center;
     text-decoration:none;
   color: white;
   display: block;
     vertical-align: baseline;
}

.laptops span{
        position:relative;
        top:170px;
        text-decoration: underline;
}

.desktops span{
        position:relative;
        top:220px;
        text-decoration: underline;
}

.officeware span{
        position:relative;
        top:150px;
        text-decoration: underline;
}

.brclear{
    clear:both;
    margin:0;
    padding:0;
    line-height:0;
}

Merry Christmas!

tim

Thank you so much! Again!

That works great. Now there is only one other problem with this page. In my efforts to fix the problem, IE6 is now not displaying any of the header menus as in FF.

Any suggestions?

My first guess would be the absolute positioning, which IE6 is especially quirky with. My suggestion is to take a VERY close look at your div structure, simplify your use of IDs and classes, and use floats and clears to position your elements, using positioning only when necessary, much like I did with the preceding bit of code.

tim