span not clikable in IE7 1

[dee2005]

Hi

I am trying to create a link that has several span tags to represent the background-image of the left mid and right so that expands or retracts depending on the text in the image.

The problem I have is that the most inner span that has the image does not link to the next page, but if you move the mouse to say the top or the left right it clicks to the next page. Obviously firefox goes to the next page when any part of the region is clicked

the css
.ActionBtn{
float:right;
display:block;
width:auto;
margin:10px 25px 0 0;
cursorointer;
}

.ActionBtn .MidBtn .BtnLabel
{
position:relative;
top:3px;
padding:0 3px 0 3px;
}

.ActionBtn span{float:left;}

.ActionBtn .MidBtn
{
background-image:url(../media/mid_off.png);
background-repeat:repeat-x;
width:auto;
height:20px;
color:#fff;
line-height:2;
font-weight:bold;
text-transform:uppercase;
font-size:0.8em;

}

.ActionBtn .LeftBtnEdge{
width:5px;
height:20px;
background-image:url(../media/grad_left_off.png);
background-repeat:no-repeat;
}

.ActionBtn .RightBtnEdge{
width:5px;
height:20px;
background-image:url(../media/grad_right_off.png);
background-repeat:no-repeat;
}

.ActionBtn:hover .RightBtnEdge
{
background-image:url(../media/grad_right_on.png);
}

.ActionBtn:hover .LeftBtnEdge{
background-image:url(../media/grad_left_on.png);
}

.ActionBtn:hover .MidBtn
{
background-image:url(../media/mid_on.png);
background-repeat:repeat-x;
}

HTML
<a class="ActionBtn" href="#">
<span class="LeftBtnEdge"><!-- --></span>
<span class="MidBtn" id="btnSubmitForm">
<span class="BtnLabel"><img style="border-width: 0px;" src="/sony/GT5/media/b/0731474176.png"/></span></span>
<span class="RightBtnEdge"><!-- --></span>
</a>
Is there something I am doing

 

[Vragabond]

Are you sure the area is not a link or is it just that the cursor does not change? I would bet the second and that you can easily rectify by changing the cursor property in the css for those spans.

However, I think you're overly complicating this design. You could use the same image for left edge and mid section (this would be on the anchor element itself) and then another element for the right edge. That would give you only two elements.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[dee2005]

the spans is incapsulated in the <a> tag and the cursor is set to pointer so there should be no chance. But I tried your suggestion and it didnt work, I think it is a layering problem.

But with regards to your suggestion

the html would look something like this ?

<a class="ActionBtn" href="#">
<span class="BtnLabel">text</span>
<span class="RightBtn"></span>
</a>

 

[ChrisHunt]

No, you next the span inside the link - it's called the "Sliding Doors" technique. There's an example at

http://www.filamentgroup.com/lab/buttonElement/

They're applying it to a <button>, but it would work just as well with an <a>.

With just two images there's the risk that the text can be resized to be too tall for the box. To allow for that you'd have to add two more images and two more nested spans. If you think that worth the effort (and it may well not be), you can see a working example on one of my pages:

http://www.leicesteryha.org.uk/cgi-bin/leoevdets?eno=214

Check out the "Next Event" button near the foot of the page.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd