IE rollover behaving very oddly, only partial image area is clickable

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Matt Bostock - 29 Mar 2005 11:15 GMT

Hi,

Please see:
http://www.drfunkenstein.net/catalogue/categories/fancydress/81/go/2/

..and try clicking on the '< previous' link underneath the costume
thumbnails. The link is only clickable when you move over the chevron.
In Firefox, the link works as expected - the full image can be clicked.

Does anyone know what's causing this bug? My XHTML valid, although my
CSS suffers from a strange import error that I haven't yet been able to
fathom. Other than that, the CSS is valid.

Many thanks,
Matt

Reply to this Message

Steve Pugh - 29 Mar 2005 11:59 GMT

>Please see:
>http://www.drfunkenstein.net/catalogue/categories/fancydress/81/go/2/
>
>..and try clicking on the '< previous' link underneath the costume
>thumbnails. The link is only clickable when you move over the chevron.
>In Firefox, the link works as expected - the full image can be clicked.

The various elements in your page are overlapping. An empty part of
one or more of the elements containing the form is overlapping part of
the next link. In Firefox the link is still clickable through the
empty space of the top element but in IE it isn't.

Your CSS is very complicated, probably overly so. I would consider a
major simplification of your code.

Steve

Signature

"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve@pugh.net> <http://steve.pugh.net/>

Reply to this Message

Matt Bostock - 31 Mar 2005 00:01 GMT

Thanks Steve, I fixed it with z-index.

When you say complicated, how do you mean? In terms of layout or the
structure of the CSS across several files?

Matt

>>Please see:
>>http://www.drfunkenstein.net/catalogue/categories/fancydress/81/go/2/
[quoted text clipped - 12 lines]
>
> Steve

Reply to this Message

Steve Pugh - 31 Mar 2005 00:15 GMT

>When you say complicated, how do you mean? In terms of layout or the
>structure of the CSS across several files?

You seem to be doing everything is as complicated a way as possible.
The same design could be realised with much simpler HTML and much
simpler CSS. Less code and less chance of running into problems like
this one.

Steve

Signature

"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve@pugh.net> <http://steve.pugh.net/>

Reply to this Message

Windsun - 29 Mar 2005 19:27 GMT

Add display:block
For example:

.buttonscontainer { width:150px; margin-left:2px; }
.buttons a
{color: #00FFFF; padding:3px; margin-bottom:3px; display:block;
border:3px solid #FF0000;
font-weight:bold;
text-decoration:none;
width:100%;
font-size:.7em;
font-family:Verdana, Arial, sans-serif; background-color:#000000;
margin-top:3px
}

-------------------------------------------------------------------------------

> Hi,
>
[quoted text clipped - 11 lines]
> Many thanks,
> Matt

Reply to this Message

Matt Bostock - 31 Mar 2005 00:01 GMT

Thanks, but display: block was already applied. I fixed it with z-index.

Thanks again,
Matt :)

> Add display:block
> For example:
[quoted text clipped - 10 lines]
> margin-top:3px
> }

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / March 2005

IE rollover behaving very oddly, only partial image area is clickable