hover problem in IE

Discussion in 'CSS' started by gilgalbiblewheel, Jul 19, 2007.

  1. #1
    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;
    		}
    [B][COLOR="Red"]		#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;
    		}
    [/COLOR][/B]		#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;
    		}
    [B][COLOR="Red"]		#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;
    	}
    
    
    [/COLOR][/B]	</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">
    [B][COLOR="Red"]							<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>[/COLOR][/B]
    							</ul>
    						</td>
    					</tr>
    				</table>
    			</div>
    		</div>
    </body>
    </html>
    
    Code (markup):

     
    gilgalbiblewheel, Jul 19, 2007 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #2
    I can see part of the problem right here:
    <meta name="GENERATOR" content="Microsoft FrontPage 4.0">

    Because Frontpage is to web design as McDonalds is to a five star restaurant.

    Hmm. Works ok in Opera, but I see what you mean in IE.

    The biggest problem I see is block level elements (P) inside inline level ones (anchor), but you've got 'other issues' there as well.

    I'd have to do a total rewrite before I could even start to diagnose this.
     
    deathshadow, Jul 19, 2007 IP
  3. gilgalbiblewheel

    gilgalbiblewheel Well-Known Member

    Messages:
    435
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #3
    I think the problem is IE6, because Firefox and IE7 seem to work. I have IE6 on my local computer. But someone else in the office tested on his laptop which has IE7.
     
    gilgalbiblewheel, Jul 20, 2007 IP