IE <> hoverbox

[macolnmail]

Hi, my friend's org is dedicated to improving Sino-Indian relations,
and they were looking for a volunteer to design their website. I said
sure, sounds like a good cause, but I have run into some trouble.
Looking for CSS experts, and hope this is the right place!

I'm using the hoverbox code to create a pop-out effect for the
navigation list. It works great in Firefox, but IE doesn't obey. Would
anyone be able to take a look at the following and give some advice?
Much appreciated.

------------------------------------------------
#navcontainer{
background:transparent;
width:140px;
height:574px;
margin-top:120px;
margin-left:-200px;
float:left;
}

/* start of hoverbox code */
#navlist
{
list-style: none;
}

#navlist a .hovered
{
display: none;
}


#navlist a:hover .hovered
{
display: block;
position: absolute;
bottom: 4px;
right: 4px;
z-index: 1;
}

#navlist img {
border-width: 0;
color: inherit;
padding: 2px;
vertical-align: top;
}

#navlist li{
border-width: 0px;
text-align: right;
color: inherit;
display: inline
float: left;
margin: 1px;
padding: 5px;
position: relative;
width: 165px;
}

/* INTERNET EXPLORER HACKS */

* html #navlist a
{
position: relative;
}

* html #navlist a:hover
{
font-size: 100%;
z-index: 1;
}

* html #navlist a:hover .hovered
{
bottom: 4px;
right: 4px;
}

* html #navlist li
{
position: static;
}

/* end of hoverbox code */

 

[macolnmail]

Hi, my friend's org is dedicated to improving Sino-Indian relations,
and they were looking for a volunteer to design their website. I said
sure, sounds like a good cause, but I have run into some trouble.
Looking for CSS experts, and hope this is the right place!

I'm using the hoverbox code to create a pop-out effect for the
navigation list. It works great in Firefox, but IE doesn't obey. Would
anyone be able to take a look at the following and give some advice?
Much appreciated.

And here is the HTML.

<div id="navcontainer">
<ul id="navlist">
<li><a href="#"><img src="nav_home.png" alt="home" width=52 height=17>
<img src="nav_home2.png" alt="home" class="hovered"
width=52 height=17></a></li>
<li><a href="#"><img src="nav_about.png" alt="about" width=55
height=17>
<img src="nav_about.png" alt="about" class="hovered"
width=55 height=17></a></li>
<li><a href="#"><img src="nav_artists.png" alt="artists" width=59
height=16>
<img src="nav_artists.png" alt="artists"
class="hovered" width=59 height=16></a></li>
<li><a href="#"><img src="nav_media.png" alt="media" width=56
height=17>
<img src="nav_media.png" alt="media" class="hovered"
width=56 height=17></a></li>
<li><a href="#"><img src="nav_partners.png" alt="partners" width=78
height=20>
<img src="nav_partners.png" alt="partners"
class="hovered" width=78 height=20></a></li>
<li><a href="*"><img src="nav_contact.png" alt="contact" width=70
height=16>
<img src="nav_contact.png" alt="contact"
class="hovered" width=70 height=16></a></li>
</ul>
</div>

 

[dorayme]

Why not post a url? Did you test the original template in IE? And
slowly creep forward till you make a change that suddenly makes
it not work? The version I have is rather different to yours. i
do not know if the changes are significant. You did not supply
the html at all, just a bit of it... A URL is the way to go.

 

[Els]

I'm using the hoverbox code to create a pop-out effect for the
navigation list. It works great in Firefox, but IE doesn't obey. Would
anyone be able to take a look at the following and give some advice?
Much appreciated.

[snip code]

As dorayme said: providing a url is better.
However, you're probably running into the IE bug that it won't 'see'
any child elements on hover, when the <a> element itself doesn't
change on hover. See here for full explanation:

http://locusoptimus.com/css-trickery/ie-image-border-styles-on-hover.php

It's about an image border, but it's the same for any child element of
a link on hover.

 

[macolnmail]

I'm using the hoverbox code to create a pop-out effect for the
navigation list. It works great in Firefox, but IE doesn't obey. Would
anyone be able to take a look at the following and give some advice?
Much appreciated.

[snip code]

As dorayme said: providing a url is better.
However, you're probably running into the IE bug that it won't 'see'
any child elements on hover, when the <a> element itself doesn't
change on hover. See here for full explanation:

http://locusoptimus.com/css-trickery/ie-image-border-styles-on-hover.php

It's about an image border, but it's the same for any child element of
a link on hover.

Thanks for the feedback so far. I tried the solution at that site, but
it still didn't work. Would someone mind taking a look?

The page can be viewed at
http://www.clanmacintyre.ca/china/siya/index.html

Best regards,


Colin

 

[dorayme]

I'm using the hoverbox code to create a pop-out effect for the
navigation list. It works great in Firefox, but IE doesn't obey. Would
anyone be able to take a look at the following and give some advice?
Much appreciated.

[snip code]

As dorayme said: providing a url is better.
However, you're probably running into the IE bug that it won't 'see'
any child elements on hover, when the <a> element itself doesn't
change on hover. See here for full explanation:

http://locusoptimus.com/css-trickery/ie-image-border-styles-on-hover.php

It's about an image border, but it's the same for any child element of
a link on hover.

Thanks for the feedback so far. I tried the solution at that site, but
it still didn't work. Would someone mind taking a look?

The page can be viewed at
http://www.clanmacintyre.ca/china/siya/index.html

I have Els' url bookmarked in case I ever need it (what's the
icon for "good one"?).

But re OP url, my iCab was really thrown by the div within a p.
Put markup and css through a validation check, and take notice of
any errors not involving IE hacks.

Probably change doctype to 4.01 Strict and associated
simplicities ">" is simpler then " />"

Sorry I have not the time to forensically examine your hover
stuff today.

 

[macolnmail]

(e-mail address removed) wrote:

I'm using the hoverbox code to create a pop-out effect for the
navigation list. It works great in Firefox, but IE doesn't obey. Would
anyone be able to take a look at the following and give some advice?
Much appreciated.

[snip code]

As dorayme said: providing a url is better.
However, you're probably running into the IE bug that it won't 'see'
any child elements on hover, when the <a> element itself doesn't
change on hover. See here for full explanation:

http://locusoptimus.com/css-trickery/ie-image-border-styles-on-hover.php

It's about an image border, but it's the same for any child element of
a link on hover.

Thanks for the feedback so far. I tried the solution at that site, but
it still didn't work. Would someone mind taking a look?

The page can be viewed at
http://www.clanmacintyre.ca/china/siya/index.html

I have Els' url bookmarked in case I ever need it (what's the
icon for "good one"?).

But re OP url, my iCab was really thrown by the div within a p.
Put markup and css through a validation check, and take notice of
any errors not involving IE hacks.

Probably change doctype to 4.01 Strict and associated
simplicities ">" is simpler then " />"

Sorry I have not the time to forensically examine your hover
stuff today.

Well, I got IE to at least apply the change on hover. Ran it through
the validators and it checks out with only a few color warnings on the
CSS side (this isn't too important right?). However, now the big
problem is the hover gets stuck in that position and won't pop back in


I checked out this site, http://www.satzansatz.de/cssd/pseudocss.html
but couldn't find something that fixed it.

 

[dorayme]

Well, I got IE to at least apply the change on hover. Ran it through
the validators and it checks out with only a few color warnings on the
CSS side (this isn't too important right?). However, now the big
problem is the hover gets stuck in that position and won't pop back in


I checked out this site, http://www.satzansatz.de/cssd/pseudocss.html
but couldn't find something that fixed it.

Well, iCab is happier now but it certainly displays things
differently to FF which suggests you are doing something odd.
Your menu that sort of pulsate a bit on hover are pretty well
disappeared off left edge!

May i ask you a question befoire going into all this hoverbox
business? Why are you using this hover box at all? I see no real
effects of it in any of the browsers I use. Unless you are using
it for that very small effect i am seeing, the main links like
"Home" get a bit offset and gain a slight white background.
Surely you atre not bringing out the big guns for something so
easily done another way (namely specifying some css for a:hover
in terms of background and position).

Your links are not easy to see with that background btw... but
this is another story I guess.

Before spending ages trying to track down the problem, I need to
know I am not missing some effect that is happening at your end?

 

[macolnmail]

Well, iCab is happier now but it certainly displays things
differently to FF which suggests you are doing something odd.
Your menu that sort of pulsate a bit on hover are pretty well
disappeared off left edge!

May i ask you a question befoire going into all this hoverbox
business? Why are you using this hover box at all? I see no real
effects of it in any of the browsers I use. Unless you are using
it for that very small effect i am seeing, the main links like
"Home" get a bit offset and gain a slight white background.
Surely you atre not bringing out the big guns for something so
easily done another way (namely specifying some css for a:hover
in terms of background and position).

Your links are not easy to see with that background btw... but
this is another story I guess.

Before spending ages trying to track down the problem, I need to
know I am not missing some effect that is happening at your end?

Hoverbox isn't really a big gun (maybe lightbox is), so I figured it
was good to thicken out that pop-out effect in the link list. However,
I tried your suggestion, and it achieves close enough to what I wanted,
and has no problems in IE.

Well now the only bug is the background won't fix in a non-body
container, but I'm just going to wait for everyone to upgrade to IE 7.

Have a good day,



Colin

 

[dorayme]

dorayme wrote:

Hoverbox isn't really a big gun (maybe lightbox is), so I figured it
was good to thicken out that pop-out effect in the link list. However,
I tried your suggestion, and it achieves close enough to what I wanted,
and has no problems in IE.

I have:

http://host.sonspring.com/hoverbox/

downloaded and this is what I was imagining it for...

Good luck!