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

[Matt Bostock]

Hi,

Please see:
http://www.drfunkenstein.net/catalog...dress/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

[Steve Pugh]

"Matt Bostock" <ma*********@gmail.com> wrote:

Please see:
http://www.drfunkenstein.net/catalog...dress/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

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

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

[Windsun]

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
}

-------------------------------------------------------------------------------
"Matt Bostock" <ma*********@gmail.com> wrote in message
news:11**********************@l41g2000cwc.googlegr oups.com...

Hi,

Please see:
http://www.drfunkenstein.net/catalog...dress/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

[Matt Bostock]

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

Steve Pugh wrote:

"Matt Bostock" <ma*********@gmail.com> wrote:

Please see:
http://www.drfunkenstein.net/catalog...dress/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

[Matt Bostock]

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

Thanks again,
Matt :)

Windsun wrote:

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
}

[Steve Pugh]

Matt Bostock <ma**@mattbostock.com> wrote:

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

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

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