...

View Full Version : hover problem in IE



gilgalbiblewhee
07-19-2007, 04:40 PM
I'm trying to display images in the hover but after hovering the image sticks to the page, doesn't disappear.
See the red highlights:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>I Used To Love Her</title>
<style type="text/css">
body {
/*position: absolute;
left: 0px;*/
font-family: Arial, Helvetica, sans-serif;
}
#master {
position: relative;
margin: auto;
text-align: center;
width: 100% /*955px*/;
height: 1000px;
}
#logo {
position: absolute;
left: 0px;
top: 10px;

}
#logo img {
display: inline;
}
#leftnav {
position: absolute;
left: 0px;
top: 100px;
display: block;
width: 120px;
z-index: 2;
}
#leftnav a{
text-decoration: none;
color:#000000;
font-size: 12px;
}
#leftnav span{
position: absolute;
left: 30px;
display: none;
}
#leftnav a:hover{
color: #FF0000;
}
#leftnav a:hover span{
position: absolute;
left: 30px;
background-color: #DDC4A6;
display: block;
border: double black;
padding: 10px;
color: #000000;
width: 300px;
}
#leftnav h5{
position: absolute;
top: 0px;
left: 0px;
display: block;
width: 150px;
}
#leftnav ul.none {
position: absolute;
left: -25px;
top: 30px;
list-style-type: none;
}
/*#leftnav*/ ul.none li {
text-align: left;
display: block;
width: 150px;

}
#ifrindexdiv {
position: absolute;
left: 150px;
top: 100px;
text-align: center;
margin: auto;
border: 0px;
}
#ifrindex {
position: relative;
left: 0px;
top: 0px;
width: 875px;
height: 1800px;
scrolling: none;
}
#books {
position: absolute;
top: 100px;
left: 900px;
z-index: 2;
}
#books h5{
position: absolute;
top: 0px;
left: 120px;
display: block;
width: 150px;
}
#books ul.none {
position: absolute;
left: 0px;
top: 30px;
list-style-type: none;
}
#books ul.none {
position: absolute;
left: 80px;
}
#books ul.none li{
padding-top: 25px;
}
#books ul.none li a{
text-decoration: none;
color: #000000;
font-size: 12px;
}
#books ul.none img {
position:absolute;
left: 0px;
display: none;
border: 0px;
}

#books p{
position: absolute;
left: 30px;
display: none;
}
#books a:hover{
color: #FF0000;
}
#books a:hover p{
position: absolute;
left: -60px;
background-color: #DDC4A6;
display: block;
border: double black;
padding: 10px;
color: #000000;
}
#books a:hover img{
/*position: float;*/
padding: 5px;
display: block;
}
#books a:hover span {
position: relative;
display: block;
width: 200px;
padding-left: 90px;
}

/* regular hovers*/

#books a:hover, #leftnav a:hover {
background-color: #DDC4A6;
color:#FF0000;
}


</style>
</head>
<body bgcolor="#DDC4A6">
<div id="master">
<%'<h1 align="center">Welcome to iusedtoloveher.com. Please wait to be redirected to the
'forum</h1>

'Response.AddHeader "REFRESH", "3;URL=/forums/index.php"
%>
<div id="logo">
<img src="forums/images/misc/vbulletin3_logo_white.gif" alt="I USED TO LOVE HER" />
</div>
<div id="leftnav">
<table>
<tr>
<td>
<h5>Top 10 Breakup Songs</h5><br />
<ul class="none">
<li>
<a href=""><strong>1. "It's All Over Now"</strong> - <br />The Rolling Stones, The Valentinos
<span>Either the Stones rendition or the original version by The Valentinos, written and sung by Bobby Womack, gets straight to point on why the relationship needs to come to an end. If you haven't come to terms with what's happened, let this become your mantra.</span></a>
</li>
<li>
<a href=""><strong>2. "Go Your Own Way"</strong> - <br />Fleetwood Mac
<span>Lindsey Buckingham wrote this while dealing with the dissolution of his long-term relationship with Stevie Nicks, who was also his bandmate. 'Rumors,' the album this track emerged from, was recorded amid another intra-band breakup, that of John and Christine MacVie. Let that be a lesson to those couples who also work together.</span></a>
</li>
<li>
<a href=""><strong>3. "I Heard It Through The Grapevine"</strong> - <br />Marvin Gaye
<span>The potentcy of this song?s lyrics have made it one of the most covered breakup tunes of the past 40 years. CCR, Gladys Knight & The Pips, Roger Troutman and The Slits have recorded versions, but Marvin's sublime reading make his the definitive rendition.</span></a>
</li>
<li>
<a href=""><strong>4. "Free Bird"</strong> - <br />Lynyrd Skynyrd
<span>Ronnie Van Zant laments the end of an affair, justifying his decision with the old standby of the need to expand his horizons by meeting new people in new places. Or was he just telling his old lady that his band was about to hit the road and he may or may not be back, depending on who he meets out there.</span></a>
</li>
<li>
<a href=""><strong>5. "The Rain"</strong> - <br />Oran 'Juice' Jones
<span>We're not sure if this qualifies as a breakup song or a dismissal track. Juice's classic cold rap solilioquy which climaxes this 1986 tune makes us think this may be the way Donald Trump or P. Diddy may have terminated a relationship on at least one occasion.</span></a>
</li>
<li>
<a href=""><strong>6. "I Will Survive"</strong> - <br />Cake
<span>This song was a huge anthem during the disco era, but we think Cake's superior 1997 remake is the listenable version of the track. Nothing against Gloria Gaynor, but Cake's stripped down take on the tune is the one us guys can relate to.</span></a>
</li>
<li>
<a href=""><strong>7. "By The Time I Get To Phoenix"</strong> - <br />Glen Campbell, Isaac Hayes
<span>Classic tale of a guy who can't tell his lady that it's over face to face, so he runs out on her in the middle of the night and lets her know that he's gone for good in a scribbled note she'll only discover in the morning.</span></a>
</li>
<li>
<a href=""><strong>8. "50 Ways To Leave Your Lover"</strong> - <br />Paul Simon
<span>Rhymin' Simon gives those needing advice in such matters a lesson in creative breaking-up techniques.</span></a>
</li>
<li>
<a href=""><strong>9. "Don't Go Away Mad (Just go Away)"</strong> - <br />Motley Crue
<span>Despite their bad boy reputations, Vince Neil and the boys want things to end on as good a note as possible. Our sentiments exactly. Why deal with yet another hassle?</span></a>
</li>
<li>
<a href=""><strong>10. "You Oughta Know"</strong> - <br />Alanis Morrisette
<span>A woman's perspective on being done wrong. Seems Alanis was inspired by the old adage "Hell hath no fury like a woman scorned." Could be a warning to the guys out there who are involved with an uber-passionate tigress.</span></a>
</li>
</ul>
</td>
</tr>
</table>
</div>
<div id="ifrindexdiv">
<iframe name="ifrindex" id="ifrindex" allowtransparency="false" src="forums/index.php" frameborder="0" scrolling="no"></iframe>

</div>
<div id="books">
<table>
<tr>
<td>
<h5>TOP 5 WAYS TO COPE</h5><br />
<ul class="none">
<li>
<a href="http://www.amazon.com">

<strong>Shove your new girlfriend right up your ex-wife&rsquo;s website</strong><br />
<p><img width="74" height="66" src="index_clip_image002.jpg" align="left" hspace="12" alt="http://mobile2.up.seesaa.net/image/n902is.jpg" /><span class="paramazon">This Nokia N902iS camera phone has an integrated search engine feature. That means users can automatically upload photos to a search engine called Evolution Robotics. Look dear, Penelope, my new friend is on the web!</span></p></a>
</li>
<li>
<a href="http://www.amazon.com">

<strong>Visualize and maintain a positive outlook</strong><br />
<p><img border="0" width="62" height="66" src="index_clip_image004.jpg" align="left" hspace="12" alt="Dead Fred Pen Holder " /><span class="paramazon">There are some rather fetching gadgets out there, and every now and again inventors from the analogue world produce eye-catching items like this, the Dead Fred pen holder. Know any Fredericas who could hold your nib like this?</span></p></a> </li>
<li>
<a href="http://www.amazon.com">

<strong>Doom 3: the perfect timewaster and gin alternative</strong><br />
<p><img width="75" height="75" src="index_clip_image006.jpg" align="left" hspace="12" alt="http://ec1.images-amazon.com/images/I/51Z10KFHAZL._SS400_.jpg" /><span class="paramazon">She&rsquo;s gone. Let the games begin! Get into Doom 3, the PC game, and it&rsquo;s unlikely you&rsquo;ll see daylight for days. Set voicemail appropriately as your boss might come looking for you by Tuesday afternoon.</span></p></a>
</li>
<li>
<a href="http://www.amazon.com">

<strong>My way or the highway, baby!</strong><br />
<p><img width="75" height="75" src="index_clip_image008.jpg" align="left" hspace="12" alt="http://ec1.images-amazon.com/images/I/51PFuscXL9L._SS500_.jpg" /><span class="paramazon">Get your way! Invest a mere $14 in this paperback and banish the word compromise from your vocabulary. The Little Green Book of Getting Your Way digs deep into the 9.5 elements that make persuasion, and getting your way, happen. &nbsp;You need this now!</span></p></a>
</li>
<li>
<a href="http://www.amazon.com">
<strong>Play Simpson&rsquo;s Xbox or shop for new curtains? D&rsquo;oh!</strong><br />
<p><img width="72" height="88" src="index_clip_image010.gif" align="left" hspace="12" alt="simpsons xbox 360" /><span class="paramazon">Microsoft is launching a Simpsons-themed version of the Xbox 360. This 360 has been conjured up to help promote the forthcoming Simpsons feature film. You know you&rsquo;ve always preferred this to pushing the pram round the supermarket.</span></p></a>
</li>
</ul>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>

ahallicks
07-19-2007, 05:49 PM
#leftnav a span{
position: absolute;
left: 30px;
display: none;
}


Use that, should work for you

gilgalbiblewhee
07-19-2007, 06:23 PM
Didn't work. Look at the highlight in red below. That's where the problem is in IE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>I Used To Love Her</title>
<style type="text/css">
body {
/*position: absolute;
left: 0px;*/
font-family: Arial, Helvetica, sans-serif;
}
#master {
position: relative;
margin: auto;
text-align: center;
width: 100% /*955px*/;
height: 1000px;
}
#logo {
position: absolute;
left: 0px;
top: 10px;

}
#logo img {
display: inline;
}
#leftnav {
position: absolute;
left: 0px;
top: 100px;
display: block;
width: 120px;
z-index: 2;
}
#leftnav a{
text-decoration: none;
color:#000000;
font-size: 12px;
}

#leftnav a span{
position: absolute;
left: 30px;
display: none;
}

#leftnav a:hover{
color: #FF0000;
}
#leftnav a:hover span{
position: absolute;
left: 30px;
background-color: #DDC4A6;
display: block;
border: double black;
padding: 10px;
color: #000000;
width: 300px;
}
#leftnav h5{
position: absolute;
top: 0px;
left: 0px;
display: block;
width: 150px;
}
#leftnav ul.none {
position: absolute;
left: -25px;
top: 30px;
list-style-type: none;
}
/*#leftnav*/ ul.none li {
text-align: left;
display: block;
width: 150px;

}
#ifrindexdiv {
position: absolute;
left: 150px;
top: 100px;
text-align: center;
margin: auto;
border: 0px;
}
#ifrindex {
position: relative;
left: 0px;
top: 0px;
width: 875px;
height: 1800px;
scrolling: none;
}
#books {
position: absolute;
top: 100px;
left: 900px;
z-index: 2;
}
#books h5{
position: absolute;
top: 0px;
left: 120px;
display: block;
width: 150px;
}
#books ul.none {
position: absolute;
left: 0px;
top: 30px;
list-style-type: none;
}
#books ul.none {
position: absolute;
left: 80px;
}
#books ul.none li{
padding-top: 25px;
}
#books ul.none li a{
text-decoration: none;
color: #000000;
font-size: 12px;
}
#books ul.none img {
position:absolute;
left: 0px;
display: none;
border: 0px;
}

#books a p{
position: absolute;
left: 30px;
display: none;
}
#books a:hover{
color: #FF0000;
}
#books a:hover p{
position: absolute;
left: -60px;
background-color: #DDC4A6;
display: block;
border: double black;
padding: 10px;
color: #000000;
}
#books a:hover img{
/*position: float;*/
padding: 5px;
display: block;
}
#books a:hover span {
position: relative;
display: block;
width: 200px;
padding-left: 90px;
}

/* regular hovers*/

#books a:hover, #leftnav a:hover {
background-color: #DDC4A6;
color:#FF0000;
}


</style>
</head>
<body bgcolor="#DDC4A6">
<div id="master">
<%'<h1 align="center">Welcome to iusedtoloveher.com. Please wait to be redirected to the
'forum</h1>

'Response.AddHeader "REFRESH", "3;URL=/forums/index.php"
%>
<div id="logo">
<img src="forums/images/misc/vbulletin3_logo_white.gif" alt="I USED TO LOVE HER" />
</div>
<div id="leftnav">
<table>
<tr>
<td>
<h5>Top 10 Breakup Songs</h5><br />
<ul class="none">
<li>
<a href=""><strong>1. "It's All Over Now"</strong> - <br />The Rolling Stones, The Valentinos
<span>Either the Stones rendition or the original version by The Valentinos, written and sung by Bobby Womack, gets straight to point on why the relationship needs to come to an end. If you haven't come to terms with what's happened, let this become your mantra.</span></a>
</li>
<li>
<a href=""><strong>2. "Go Your Own Way"</strong> - <br />Fleetwood Mac
<span>Lindsey Buckingham wrote this while dealing with the dissolution of his long-term relationship with Stevie Nicks, who was also his bandmate. 'Rumors,' the album this track emerged from, was recorded amid another intra-band breakup, that of John and Christine MacVie. Let that be a lesson to those couples who also work together.</span></a>
</li>
<li>
<a href=""><strong>3. "I Heard It Through The Grapevine"</strong> - <br />Marvin Gaye
<span>The potentcy of this song?s lyrics have made it one of the most covered breakup tunes of the past 40 years. CCR, Gladys Knight & The Pips, Roger Troutman and The Slits have recorded versions, but Marvin's sublime reading make his the definitive rendition.</span></a>
</li>
<li>
<a href=""><strong>4. "Free Bird"</strong> - <br />Lynyrd Skynyrd
<span>Ronnie Van Zant laments the end of an affair, justifying his decision with the old standby of the need to expand his horizons by meeting new people in new places. Or was he just telling his old lady that his band was about to hit the road and he may or may not be back, depending on who he meets out there.</span></a>
</li>
<li>
<a href=""><strong>5. "The Rain"</strong> - <br />Oran 'Juice' Jones
<span>We're not sure if this qualifies as a breakup song or a dismissal track. Juice's classic cold rap solilioquy which climaxes this 1986 tune makes us think this may be the way Donald Trump or P. Diddy may have terminated a relationship on at least one occasion.</span></a>
</li>
<li>
<a href=""><strong>6. "I Will Survive"</strong> - <br />Cake
<span>This song was a huge anthem during the disco era, but we think Cake's superior 1997 remake is the listenable version of the track. Nothing against Gloria Gaynor, but Cake's stripped down take on the tune is the one us guys can relate to.</span></a>
</li>
<li>
<a href=""><strong>7. "By The Time I Get To Phoenix"</strong> - <br />Glen Campbell, Isaac Hayes
<span>Classic tale of a guy who can't tell his lady that it's over face to face, so he runs out on her in the middle of the night and lets her know that he's gone for good in a scribbled note she'll only discover in the morning.</span></a>
</li>
<li>
<a href=""><strong>8. "50 Ways To Leave Your Lover"</strong> - <br />Paul Simon
<span>Rhymin' Simon gives those needing advice in such matters a lesson in creative breaking-up techniques.</span></a>
</li>
<li>
<a href=""><strong>9. "Don't Go Away Mad (Just go Away)"</strong> - <br />Motley Crue
<span>Despite their bad boy reputations, Vince Neil and the boys want things to end on as good a note as possible. Our sentiments exactly. Why deal with yet another hassle?</span></a>
</li>
<li>
<a href=""><strong>10. "You Oughta Know"</strong> - <br />Alanis Morrisette
<span>A woman's perspective on being done wrong. Seems Alanis was inspired by the old adage "Hell hath no fury like a woman scorned." Could be a warning to the guys out there who are involved with an uber-passionate tigress.</span></a>
</li>
</ul>
</td>
</tr>
</table>
</div>
<div id="ifrindexdiv">
<iframe name="ifrindex" id="ifrindex" allowtransparency="false" src="forums/index.php" frameborder="0" scrolling="no"></iframe>

</div>
<div id="books">
<table>
<tr>
<td>
<h5>TOP 5 WAYS TO COPE</h5><br />
<ul class="none">
<li>
<a href="http://www.amazon.com">

<strong>Shove your new girlfriend right up your ex-wife&rsquo;s website</strong><br />
<p><img width="74" height="66" src="index_clip_image002.jpg" align="left" hspace="12" alt="http://mobile2.up.seesaa.net/image/n902is.jpg" /><span class="paramazon">This Nokia N902iS camera phone has an integrated search engine feature. That means users can automatically upload photos to a search engine called Evolution Robotics. Look dear, Penelope, my new friend is on the web!</span></p></a>
</li>
<li>
<a href="http://www.amazon.com">

<strong>Visualize and maintain a positive outlook</strong><br />
<p><img border="0" width="62" height="66" src="index_clip_image004.jpg" align="left" hspace="12" alt="Dead Fred Pen Holder " /><span class="paramazon">There are some rather fetching gadgets out there, and every now and again inventors from the analogue world produce eye-catching items like this, the Dead Fred pen holder. Know any Fredericas who could hold your nib like this?</span></p></a> </li>
<li>
<a href="http://www.amazon.com">

<strong>Doom 3: the perfect timewaster and gin alternative</strong><br />
<p><img width="75" height="75" src="index_clip_image006.jpg" align="left" hspace="12" alt="http://ec1.images-amazon.com/images/I/51Z10KFHAZL._SS400_.jpg" /><span class="paramazon">She&rsquo;s gone. Let the games begin! Get into Doom 3, the PC game, and it&rsquo;s unlikely you&rsquo;ll see daylight for days. Set voicemail appropriately as your boss might come looking for you by Tuesday afternoon.</span></p></a>
</li>
<li>
<a href="http://www.amazon.com">

<strong>My way or the highway, baby!</strong><br />
<p><img width="75" height="75" src="index_clip_image008.jpg" align="left" hspace="12" alt="http://ec1.images-amazon.com/images/I/51PFuscXL9L._SS500_.jpg" /><span class="paramazon">Get your way! Invest a mere $14 in this paperback and banish the word compromise from your vocabulary. The Little Green Book of Getting Your Way digs deep into the 9.5 elements that make persuasion, and getting your way, happen. &nbsp;You need this now!</span></p></a>
</li>
<li>
<a href="http://www.amazon.com">
<strong>Play Simpson&rsquo;s Xbox or shop for new curtains? D&rsquo;oh!</strong><br />
<p><img width="72" height="88" src="index_clip_image010.gif" align="left" hspace="12" alt="simpsons xbox 360" /><span class="paramazon">Microsoft is launching a Simpsons-themed version of the Xbox 360. This 360 has been conjured up to help promote the forthcoming Simpsons feature film. You know you&rsquo;ve always preferred this to pushing the pram round the supermarket.</span></p></a>
</li>
</ul>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>

ahallicks
07-20-2007, 10:38 AM
Do you have a link to your page at all? It would be easier to see what was going on

gilgalbiblewhee
07-20-2007, 03:42 PM
Here's the link in txt format.

But the code above is in html format and works. Please test it on Firefox and IE 6.

BWiz
07-20-2007, 05:18 PM
I don't see you using the id #books anywhere in the code. The CSS which you have used for the a:hover requires that the links be wrapped in an element which uses the id #books

Example:

<div id="books">
<a href="#">Book One</a>
</div>

gilgalbiblewhee
07-20-2007, 05:27 PM
It's there highlighted in red...at the end.

BWiz
07-20-2007, 05:31 PM
Sorry, I misunderstood your question


Edit: Possibly because the code you're using is not supported in IE, however I don't see how not. I've tested your site in IE7 - it works fine. In IE6, the little widgets don't even popup.

gilgalbiblewhee
07-20-2007, 08:33 PM
yeah. That's what I'm talking about.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum