Här är förresten en bild på fenomenet.
Bilden på grabben som "hänger" i mitten är alltså vad som blir kvar efter att ha öppnat popupen (där bilden finns inlagd) och sedan stängt den igen....
Frågan#1
Jag har tre små bilder som var och en öppnar en varsin popup (javascriptad) vid mouseover. Alla tre är identiska i kod och använder samma CSS och samma javascript. Innehållet i alla tre är "samma"; en h1-rubrik, text i en p-tagg, en bild floatad left och en floatad right. I koden liger dom efter varandra med en clear:both efter varje. Alla tre funkar som dom ska, med ett undantag:
Ena bilden i ena popupen "stannar kvar" och syns även efter att popupen stängts (i IE7). Den bara hänger kvar "i luften". Resten av popupen förvinner som den ska. :o
Jag har kollat koden men inte hittat något fel. Så jag börjar undra om det är själv bilden som är konstig, eller om det t.ex. är fel på datorn jag testar på.
Jag kan tyvärr inte ge länk till sidan p.g.a. olika skäl (Vilket ju är typiskt eftersom jag själv postat flera ggr om att folk ska lämna länkar...). Hoppas istället att det kanske ringer en klocka hos nån som varit med om liknande konstigheter. Nedan kommer också HELA kodsoppan till nästan hela sidan (minus lite som jag var tvungen att ta bort eftersom det blev mer än 1000 tecken i inlägget) ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/28june.dwt.php" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>TiddliBoom.com • Funny T-Shirts: <?php print $Name;?></title>
<!-- InstanceEndEditable -->
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta http-equiv="imagetoolbar" content="no" />
<link href="resources/main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="resources/sleight.js"></script>
<link href="resources/sidebar.css" rel="stylesheet" type="text/css" media="screen" />
<!-- InstanceBeginEditable name="head" -->
<script type="text/javascript" src="resources/sleight.js"></script>
<script type="text/javascript">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
function MM_showHideLayers() { //v9.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3)
with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
<style type="text/css" media="screen">
@import url("resources/detailpage.css");
#artId {
font: bold normal 11px/12px "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #FFFFFF;
position: absolute;
top: 408px;
background: #999999;
padding: 1px;
}
</style>
<!-- InstanceEndEditable -->
<script type="text/javascript">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
//-->
</script>
</head>
<body>
<td width="300" id="leftColumn">
<div><h1 style="width:290px; border-bottom:1px solid #e0e0e0"><?php print $Name;?></h1></div>
<div style="margin:0px; position:relative">
<div style="position:absolute; left:0px; top:0px; width:100px; font-size:11px; line-height:12px"> Click image to view enlarged print!</div>
<div id="artId">Art ID: <?php print $ArtID;?></div>
<div style="position:absolute; z-index:500; left:85px; top:200px; width:115px;"><img src="img/test-tryck115x115px.png" style="border:0px; margin:0px" alt="" width="115" height="79" /></div>
<a href="javascript:;" style="margin:0px"><img src="img/girl-canary.jpg" width="300" height="422" border="0" style="margin:0px" onClick="MM_openBrWindow('images/dev/tryck-förstoring.gif','','scrollbars=yes,resizable=yes,width=600')"></a></div></td>
<td valign="top" id="rightColumn">
<div style="position:relative;">
<div id="haneslogo"><img src="img/hans-logo-trans-small.png" alt="" /></div>
<!--- START FIRST POPUP --->
<div id="mensPop" class="modelPops">
<table border="0" cellpadding="0" cellspacing="0" width="380">
<tr>
<td style="background:url(img/shadows/corner-nw.png) no-repeat right bottom; padding:0px; margin:0px;height:16px; width:16px"></td>
<td style="background:url(img/shadows/north.png) repeat-x bottom; padding:0px; margin:0px; height:16px; width:16px"></td>
<td style="background:url(img/shadows/corner-ne.png) no-repeat left bottom; padding:0px; margin:0px;height:16px; width:16px"></td>
</tr>
<tr>
<td style="background:url(img/shadows/west.png) repeat-y right"></td>
<td style="background-color:#fff; border:1px solid #666; padding:10px">
<h1>Hanes® Authentic T-shirt</h1>
<img src="img/model-man-thumb.gif" width="75" height="105" style="float:left" />
<p>Pre-shrunk 100% cotton 6.1 ounce tagless t-shirt for ultimate neck comfort. <img src="img/hans-logo-trans-small.png" alt="" style="float:right" />Double-needle coverseamed neck. Shoulder-to-shoulder tape.
Adult: S, M, L, XL, 2XL, 3XL, 4XL</p>
</td>
<td style="background:url(img/shadows/east.png) repeat-y"></td>
</tr>
<tr>
<td style="width:16px; height:16px; background:url(img/shadows/corner-sw.png) no-repeat top right"></td>
<td style="background:url(img/shadows/south.png) repeat-x top"></td>
<td style="width:16px; height:16px; background:url(img/shadows/corner-se.png) no-repeat top left"></td>
</tr>
</table>
<br style="clear:both" />
</div>
<!--- END FIRST POPUP --->
<!--- START SECOND POPUP --->
<div id="ladiesPop" class="modelPops">
<table border="0" cellpadding="0" cellspacing="0" width="380">
<tr>
<td style="background:url(img/shadows/corner-nw.png) no-repeat right bottom; padding:0px; margin:0px;height:16px; width:16px"></td>
<td style="background:url(img/shadows/north.png) repeat-x bottom; padding:0px; margin:0px; height:16px; width:16px"></td>
<td style="background:url(img/shadows/corner-ne.png) no-repeat left bottom; padding:0px; margin:0px;height:16px; width:16px"></td>
</tr>
<tr>
<td style="background:url(img/shadows/west.png) repeat-y right"></td>
<td style="background-color:#fff; border:1px solid #666; padding:10px">
<h1>Hanes® Silver for Her™</h1>
<img src="img/model-lady-thumb.gif" width="75" height="105" style="float:left" />
<p>Fitted Rib T-shirt. Pre-shrunk 100% combed ring-spun cotton 6.1 ounce 1x1 rib knit. Soft, stretchy fabric, double-needle stitched binding on scoop neck, sleeves and bottom hem. Shorter, fashionable sleeves. <img src="img/hans-logo-trans-small.png" alt="" style="float:right">Side-seamed with tapered body. Fitted styling. Ladies: S, M, L, XL, 2XL, 3XL</p>
</td>
<td style="background:url(img/shadows/east.png) repeat-y"></td>
</tr>
<tr>
<td style="width:16px; height:16px; background:url(img/shadows/corner-sw.png) no-repeat top right"></td>
<td style="background:url(img/shadows/south.png) repeat-x top"></td>
<td style="width:16px; height:16px; background:url(img/shadows/corner-se.png) no-repeat top left"></td>
</tr>
</table>
<br style="clear:both" />
</div>
<!--- END SECOND POPUP --->
<!--- START THIRD POPUP --->
<div id="kidsPop" class="modelPops">
<table border="0" cellpadding="0" cellspacing="0" width="380">
<tr>
<td style="background:url(img/shadows/corner-nw.png) no-repeat right bottom; padding:0px; margin:0px;height:16px; width:16px"></td>
<td style="background:url(img/shadows/north.png) repeat-x bottom; padding:0px; margin:0px; height:16px; width:16px"></td>
<td style="background:url(img/shadows/corner-ne.png) no-repeat left bottom; padding:0px; margin:0px;height:16px; width:16px"></td>
</tr>
<tr>
<td style="background:url(img/shadows/west.png) repeat-y right"></td>
<td style="background-color:#fff; border:1px solid #666; padding:10px">
<h1>Hanes® Youth Beefy®-T</h1>
<!--- BENEATH IS THE IMAGE THAT STAYS IN VIEW AFTER THE POPUP HAS BEEN CLOSED --->
<img src="img/model-boy-thumb.gif" width="75" height="105" style="float:left" />
<!--- ABOVE IS THE IMAGE THAT STAYS IN VIEW AFTER THE POPUP HAS BEEN CLOSED --->
<p>Pre-shrunk 100% ring-spun cotton 6.1 ounce youth t-shirt. Luxurious ring-spun softness, double-needle coverseamed neck. <img src="img/hans-logo-trans-small.png" alt="" style="float:right">Shoulder-to-shoulder tape. Youth: XS(2/4), S(6/8), M(10/12), L(14/16), XL(18/20)</p>
</td>
<td style="background:url(img/shadows/east.png) repeat-y"></td>
</tr>
<tr>
<td style="width:16px; height:16px; background:url(img/shadows/corner-sw.png) no-repeat top right"></td>
<td style="background:url(img/shadows/south.png) repeat-x top"></td>
<td style="width:16px; height:16px; background:url(img/shadows/corner-se.png) no-repeat top left"></td>
</tr>
</table>
<br style="clear:both" />
</div>
<!--- END THIRD POPUP --->
<table border="0" cellpadding="0" cellspacing="0" class="selectionTables">
<tr>
<td colspan="3"><h1 class="selectionHeadlines">1. select model</h1></td>
</tr>
<tr>
<td><a href="javascript:;"><img src="img/model-man-thumb.gif" alt="" style="border:0px" onmouseover="MM_showHideLayers('mensPop','','show')" onmouseout="MM_showHideLayers('mensPop','','hide')" /></a></td>
<td><a href="javascript:;"><img src="img/model-lady-thumb.gif" alt="" style="border:0px" onmouseover="MM_showHideLayers('ladiesPop','','show')" onmouseout="MM_showHideLayers('ladiesPop','','hide')" /></a></td>
<td><a href="javascript:;"><img src="img/model-boy-thumb.gif" alt="" style="border:0px" onmouseover="MM_showHideLayers('kidsPop','','show')" onmouseout="MM_showHideLayers('kidsPop','','hide')" /></a></td>
</tr>