SitePoint Sponsor

User Tag List

Results 1 to 21 of 21
  1. #1
    SitePoint Member (--eRRoR--)'s Avatar
    Join Date
    Apr 2012
    Location
    Perugia, Italy, Italy
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image Popup on IE6

    Hello to all coders of this community,
    i found this forum after searching on google a way to popup an image when hovering another one and google found for me this thread
    http://www.sitepoint.com/forums/show...er-Over-Popups

    The post helped me alot as you will se next.

    I have an online "shop" from wich mi players can buy items for they characters inside of an mmorpg game.
    The shop can be accesed from ingame as well from outside with a normal browser.
    Mi problem is that from ingame the game client uses a version of IE6 (i guess because the client is from year 2008) so the hover script doesent work.
    Here are the pictures of the page from Chrome
    Untitled.jpg

    and from Ingame
    ingame.jpg
    First thing is that its not showing the popup over all items that comes under and the next one doesent even show at all.


    And here is the code that displays the image and the hover image
    PHP Code:
                            <td width="106px" rowspan="2">
                                <
    ul id="popup" class="popup">
                                    <
    li>
                                        <
    div class="item"><img src="images/items/'.$pic.'" /></div>
                                        <
    div class="info">
                                            <
    p><img src="images/items_details/'.$pic2.'" /></p>
                                        </
    div>
                                    </
    li>
                                </
    ul>
                            </
    td
    the variable are taken from database

    here is the css
    HTML Code:
    p {
        margin:0
    }
    ul.popup {
        width:106px;
        border:2px solid #000;
        position:relative;
        margin:0 auto;
        padding:0;
        list-style:none;
    }
    ul.popup li {
        display:inline-block;
        border:2px solid #C96;
        vertical-align:top;
    }
    * html ul.popup li {
        display:inline
    }
    *+html ul.popup li {
        display:inline
    }
    .item {
        width:100px;
        height:100px;
        border:1px solid #000;
        background:#CCC
    }
    .info {
        position:absolute;
        left:-999em;
        background:#FF9;
        padding:2px;
        margin:-85px 0 0 90px;
        border:1px solid #000;
        width:auto;
    }
    .popup li:hover .item, 
    .popup li:hover .info,
    .popup li.over .item, 
    .popup li.over .info {
        position:relative;
        z-index:100
    }
    .popup li:hover .info,
    .popup li.over .info {
        left:auto;
        position:absolute
    }
    here is the js for IE6 i found on the thread above.Without it in the game the hover doesent show at all.
    Code:
    multiList = function (){
        var sfEl = document.getElementById('popup');
            sfEl.onmouseover=function() {
                this.className+=" over";
            }
            sfEl.onmouseout=function() {
                this.className=this.className.replace(new RegExp(" over\\b"), "");
            }
        var sfEls2 = document.getElementById('popup').getElementsByTagName("LI");
            sfHover(sfEls2); 
    }
    
    sfHover = function(sfEls) {
        for (var i=0; i<sfEls.length; i++) {
            sfEls[i].onmouseover=function() {
                this.className+=" over";
            }
            sfEls[i].onmouseout=function() {
                this.className=this.className.replace(new RegExp(" over\\b"), "");
            }
        }
    }
    if (window.attachEvent) window.attachEvent("onload", multiList);
    Thank you for taking your time to read this

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,376
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    That appears to work ok back to IE6.

    I'll need to see the html for 2 or three rows.

    If you are creating a new ul in each td then you would need to move the popup id to the table tag instead as ids must be unique and you can't have multiple uls with the same ID. However, If that is what you are doing and creating a new ul each time then that really isn't a list as such and you should abandon the list and just use the remaining elements instead. You would of course need to make sure the code is adjusted to target the new structure correctly of course.

    If you are getting overlaps then raise the z-index on the element while it is hovered.

    e.g. in you r current structure you would remove the z-index from the ul and apply it the list element instead.

    Code:
    ul.popup {
    	width:106px;
    	border:2px solid #000;
    	margin:0 auto;
    	padding:0;
    	list-style:none;
    /* position:relative;*/
    }
    ul.popup li {
    	display:inline-block;
    	border:2px solid #C96;
    	vertical-align:top;
    	position:relative;
    }
    .popup li:hover{z-index:999}

  3. #3
    SitePoint Member (--eRRoR--)'s Avatar
    Join Date
    Apr 2012
    Location
    Perugia, Italy, Italy
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for the reply Paul,i really appreciate it.I will try this ass soon as i get home.

  4. #4
    SitePoint Member (--eRRoR--)'s Avatar
    Join Date
    Apr 2012
    Location
    Perugia, Italy, Italy
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this is the code that is diplaying those rows.
    Code:
    echo '<table width="541"  border="0" cellspacing="0" cellpadding="0" style="margin-bottom:10px">
    	<tr>
    		<td valign="top" colspan="3"><img src="images/Item_premium_inbox1.gif" width="541" height="8"></td>
    	</tr>	
      	<tr>
      		<td background="images/Item_premium_inbox3.gif" width="8"></td>
      		<td bgcolor="131313" height="420" width="525" valign="top" align="left">
      			<div style="OVERFLOW-y: scroll;bgcolor:red; width:525;height:419">  
    				<table width="500" cellspacing="4" cellpadding="0" border="0">';
    				if (mssql_num_rows($r)==0) 
    				{
    				//echo 'No items found.';
    				}
    				else
    					{
    						for ($i=1;$i<=mssql_num_rows($r);$i++)
    						{
    							$row = mssql_fetch_row($r);
    							if ($row[6]=='')
    							{
    								$pic='no_pic.gif';
    							} 
    							else 
    								{
    									$pic=$row[6];
    									$pic2=$row[10];
    								}
    					echo '<tr>
    						<td width="106px" rowspan="2" id="popup" class="popup">
    							<ul>
    								<li>
    									<div class="item"><img src="images/items/'.$pic.'" /></div>
    									<div class="info">
    										<p><img src="images/items_details/'.$pic2.'" /></p>
    									</div>
    								</li>
    							</ul>
    						</td>
    		  				<td valign="top" align="left" style="padding-left:8px;padding-top:4px" colspan="2"><span class="teal" style="font-size:14px;font-weight:bold;">'.$row[1].'</span><br /><span class="mini">'.$row[2].'</span></td>
    					</tr>
    		  			<tr>
    						<td align="left" style="padding-left:8px" width="270"><img src="images/coins.png" width="30" height="11"/>&nbsp<strong class="orange">'.$row[7].'</strong>&nbsp;<span class="mini">Coins</span></td>
    		  				<td align="center" width="81" height="22">
    		  					<table>
    		  						<tr><strong class="orange">Stock</strong> : <span class="teal" style="font-weight:bold;">'.$row[9].'</span>
    								</tr>
    		  						<tr><img src="images/Purchase.png" style="CURSOR: pointer" onclick="javscript:location.href=\'./buy.php?v1='.$v1.'&v2='.$v2.'&cd='.$row[0].'\'" alt="Confirm purchase" width="81" height="22" />
    								</tr>
    						</td>
    							</table>
    					</tr>
    		  			</tr>
    		  			<tr>
    					<td background="images/Item_premium_R_04.gif" width="7" height="1" colspan="3" style="padding-right:8px"></td>
    					</tr>';
    						  mssql_next_result($r);
    						}
    					}
    				echo '</table>
    			</div>
    		</td>
      		<td background="images/Item_premium_inbox4.gif" width="8"></td>
    	</tr>
    	<tr><td valign="top" colspan="3"><img src="images/Item_premium_inbox2.gif" width="541" height="8"></td>
    	</tr>
    </table>';

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,376
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You have the id on the td which means only the ul in that first td will be targeted.
    Code:
    <td width="106px" rowspan="2" id="popup" class="popup"><ul>

    You can't have more than one id of the same name as the JS will only find the first one because they are unique.

    The id will have to go on the table.

    Code:
    <table id="popup" etc...
    The class should go on the ul though.

    ul class="popup"

    Then follow with the CSS changes I already mentioned.

  6. #6
    SitePoint Member (--eRRoR--)'s Avatar
    Join Date
    Apr 2012
    Location
    Perugia, Italy, Italy
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    editing

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,376
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Text shadow doesn't work in IE6 I'm afraid. There are some proprietary filters for ie6 but they are usually more trouble than they are worth. You can try them out on the online css3 generator.

    I couldn't see the bug you were talking about using the snippets of code above. I did notice an IE6 bug cause by this code:

    Code:
    .popup li:hover .item, .popup li:hover .info, .popup li.over .item, .popup li.over .info {
    	position:relative;
    	z-index:100
    }
    You don't actually need that code (as far as I can tell from the snippet) and it causes ie6 to pop out of the scrollbox at the bottom.

  8. #8
    SitePoint Member (--eRRoR--)'s Avatar
    Join Date
    Apr 2012
    Location
    Perugia, Italy, Italy
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sry for double post but the editing time expired :|

    so here is what i have done so far


    So i edited the css like you sed
    now i have this
    HTML Code:
    p {
        margin:0
    }
    ul.popup {
    	width:106px;
    	border:2px solid #000;
    	margin:0 auto;
    	padding:0;
    	list-style:none;
    /* position:relative;*/
    }
    ul.popup li {
    	display:inline-block;
    	border:2px solid #C96;
    	vertical-align:top;
    	position:relative;
    }
    * html ul.popup li {
        display:inline
    }
    *+html ul.popup li {
        display:inline
    }
    .popup li:hover{z-index:999}
    .item {
        width:100px;
        height:100px;
        border:1px solid #000;
        background:#CCC
    }
    .info {
        position:absolute;
        left:-999em;
        background:#FF9;
        padding:2px;
        margin:-85px 0 0 90px;
        border:1px solid #000;
        width:auto;
    }
    .popup li:hover .item, 
    .popup li:hover .info,
    .popup li.over .item, 
    .popup li.over .info {
        position:relative;
        z-index:100
    }
    .popup li:hover .info,
    .popup li.over .info {
        left:auto;
        position:absolute
    }
    and in the php page i have this
    PHP Code:
    echo '<table width="541"  border="0" cellspacing="0" cellpadding="0" style="margin-bottom:10px">
        <tr>
            <td valign="top" colspan="3"><img src="images/Item_premium_inbox1.gif" width="541" height="8"></td>
        </tr>    
          <tr>
              <td background="images/Item_premium_inbox3.gif" width="8"></td>
              <td bgcolor="131313" height="420" width="525" valign="top" align="left">
                  <div style="OVERFLOW-y: scroll;bgcolor:red; width:525;height:419">  
                    <table width="500" cellspacing="4" cellpadding="0" border="0" id="popup">'
    ;
                    if (
    mssql_num_rows($r)==0
                    {
                    
    //echo 'No items found.';
                    
    }
                    else
                        {
                            for (
    $i=1;$i<=mssql_num_rows($r);$i++)
                            {
                                
    $row mssql_fetch_row($r);
                                if (
    $row[6]=='')
                                {
                                    
    $pic='no_pic.gif';
                                } 
                                else 
                                    {
                                        
    $pic=$row[6];
                                        
    $pic2=$row[10];
                                    }
                        echo 
    '<tr>
                            <td width="106px" rowspan="2">
                                <ul class="popup">
                                    <li>
                                        <div class="item"><img src="images/items/'
    .$pic.'" /></div>
                                        <div class="info">
                                            <p><img src="images/items_details/'
    .$pic2.'" /></p>
                                        </div>
                                    </li>
                                </ul>
                            </td>
                              <td valign="top" align="left" style="padding-left:8px;padding-top:4px" colspan="2"><span class="teal" style="font-size:14px;font-weight:bold;">'
    .$row[1].'</span><br /><span class="mini">'.$row[2].'</span></td>
                        </tr>
                          <tr>
                            <td align="left" style="padding-left:8px" width="270"><img src="images/coins.png" width="30" height="11"/>&nbsp<strong class="orange">'
    .$row[7].'</strong>&nbsp;<span class="mini">Coins</span></td>
                              <td align="center" width="81" height="22">
                                  <table>
                                      <tr><strong class="orange">Stock</strong> : <span class="teal" style="font-weight:bold;">'
    .$row[9].'</span>
                                    </tr>
                                      <tr><img src="images/Purchase.png" style="CURSOR: pointer" onclick="javscript:location.href=\'./buy.php?v1='
    .$v1.'&v2='.$v2.'&cd='.$row[0].'\'" alt="Confirm purchase" width="81" height="22" />
                                    </tr>
                            </td>
                                </table>
                        </tr>
                          </tr>
                          <tr>
                        <td background="images/Item_premium_R_04.gif" width="7" height="1" colspan="3" style="padding-right:8px"></td>
                        </tr>'
    ;
                              
    mssql_next_result($r);
                            }
                        }
                    echo 
    '</table>
                </div>
            </td>
              <td background="images/Item_premium_inbox4.gif" width="8"></td>
        </tr>
        <tr><td valign="top" colspan="3"><img src="images/Item_premium_inbox2.gif" width="541" height="8"></td>
        </tr>
    </table>'

    In the browser work fine and now all the rows popup to but still the popup is not on top of the other images.
    Untitled.jpg



    EDIT:

    Hi,

    Text shadow doesn't work in IE6 I'm afraid. There are some proprietary filters for ie6 but they are usually more trouble than they are worth. You can try them out on the online css3 generator.

    I couldn't see the bug you were talking about using the snippets of code above. I did notice an IE6 bug cause by this code:

    Code:
    .popup li:hover .item, .popup li:hover .info, .popup li.over .item, .popup li.over .info {
    position:relative;
    z-index:100
    }
    You don't actually need that code (as far as I can tell from the snippet) and it causes ie6 to pop out of the scrollbox at the bottom.
    i removed that to and with the css like this
    p {
    margin:0
    }
    ul.popup {
    width:106px;
    border:2px solid #000;
    margin:0 auto;
    padding:0;
    list-style:none;
    /* position:relative;*/
    }
    ul.popup li {
    display:inline-block;
    border:2px solid #C96;
    vertical-align:top;
    position:relative;
    }
    * html ul.popup li {
    display:inline
    }
    *+html ul.popup li {
    display:inline
    }
    .popup li:hover{z-index:999}
    .item {
    width:100px;
    height:100px;
    border:1px solid #000;
    background:#CCC
    }
    .info {
    position:absolute;
    left:-999em;
    background:#FF9;
    padding:2px;
    margin:-85px 0 0 90px;
    border:1px solid #000;
    width:auto;
    }
    .popup li:hover .info,
    .popup li.over .info {
    left:auto;
    position:absolute
    }
    still not showing above the other pictures.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,376
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Remove the position:relative from here and try again. It seems to work ok here.

    Code:
    ul.popup li {
    	display:inline-block;
    	border:2px solid #C96;
    	vertical-align:top;
    	/*position:relative;*/
    }

  10. #10
    SitePoint Member (--eRRoR--)'s Avatar
    Join Date
    Apr 2012
    Location
    Perugia, Italy, Italy
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If i remove that the popup start appearing again every time i scrool down, down.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,376
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    You'll have to mock up a small working demo of what you have got (html/css source only - no php) so I can see the problem first hand.

    So far I have this roughly constructed from the code you gave above but it doesn't seem to exhibit the problem you mention
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style>
    #wrap {
    	width:400px;
    	height:400px;
    	overflow:auto;
    }
    p { margin:0 }
    ul.popup {
    	width:106px;
    	border:2px solid #000;
    	margin:0 auto;
    	padding:0;
    	list-style:none;/* position:relative;*/
    }
    ul.popup li {
    	display:inline-block;
    	border:2px solid #C96;
    	vertical-align:top;/*position:relative;*/
    }
    * html ul.popup li { display:inline }
    *+html ul.popup li { display:inline }
    .popup li:hover { z-index:999 }
    .item {
    	width:100px;
    	height:100px;
    	border:1px solid #000;
    	background:#CCC
    }
    .info {
    	position:absolute;
    	left:-999em;
    	background:#FF9;
    	padding:2px;
    	margin:-85px 0 0 90px;
    	border:1px solid #000;
    	width:200px;/* for testing */
    	height:200px/* for testing */
    }
    .popup li:hover .info, .popup li.over .info {
    	left:auto;
    	position:absolute
    }
    </style>
    <script>
    multiList = function (){
        var sfEl = document.getElementById('popup');
            sfEl.onmouseover=function() {
                this.className+=" over";
            }
            sfEl.onmouseout=function() {
                this.className=this.className.replace(new RegExp(" over\\b"), "");
            }
        var sfEls2 = document.getElementById('popup').getElementsByTagName("LI");
            sfHover(sfEls2); 
    }
    
    sfHover = function(sfEls) {
        for (var i=0; i<sfEls.length; i++) {
            sfEls[i].onmouseover=function() {
                this.className+=" over";
            }
            sfEls[i].onmouseout=function() {
                this.className=this.className.replace(new RegExp(" over\\b"), "");
            }
        }
    }
    if (window.attachEvent) window.attachEvent("onload", multiList);
    </script>
    </head>
    
    <body>
    <div id="wrap">
    		<table id="popup">
    				<tr>
    						<td><ul  class="popup">
    										<li>
    												<div class="item"><img src="images/items/'.$pic.'" /></div>
    												<div class="info">
    														<p><img src="images/items_details/'.$pic2.'" /></p>
    												</div>
    										</li>
    								</ul></td>
    				</tr>
    				<tr>
    						<td><ul  class="popup">
    										<li>
    												<div class="item"><img src="images/items/'.$pic.'" /></div>
    												<div class="info">
    														<p><img src="images/items_details/'.$pic2.'" /></p>
    												</div>
    										</li>
    								</ul></td>
    				</tr>
    				<tr>
    						<td><ul  class="popup">
    										<li>
    												<div class="item"><img src="images/items/'.$pic.'" /></div>
    												<div class="info">
    														<p><img src="images/items_details/'.$pic2.'" /></p>
    												</div>
    										</li>
    								</ul></td>
    				</tr>
    				<tr>
    						<td><ul  class="popup">
    										<li>
    												<div class="item"><img src="images/items/'.$pic.'" /></div>
    												<div class="info">
    														<p><img src="images/items_details/'.$pic2.'" /></p>
    												</div>
    										</li>
    								</ul></td>
    				</tr>
    				<tr>
    						<td><ul  class="popup">
    										<li>
    												<div class="item"><img src="images/items/'.$pic.'" /></div>
    												<div class="info">
    														<p><img src="images/items_details/'.$pic2.'" /></p>
    												</div>
    										</li>
    								</ul></td>
    				</tr>
    				<tr>
    						<td><ul  class="popup">
    										<li>
    												<div class="item"><img src="images/items/'.$pic.'" /></div>
    												<div class="info">
    														<p><img src="images/items_details/'.$pic2.'" /></p>
    												</div>
    										</li>
    								</ul></td>
    				</tr>
    				<tr>
    						<td><ul  class="popup">
    										<li>
    												<div class="item"><img src="images/items/'.$pic.'" /></div>
    												<div class="info">
    														<p><img src="images/items_details/'.$pic2.'" /></p>
    												</div>
    										</li>
    								</ul></td>
    				</tr>
    				<tr>
    						<td><ul  class="popup">
    										<li>
    												<div class="item"><img src="images/items/'.$pic.'" /></div>
    												<div class="info">
    														<p><img src="images/items_details/'.$pic2.'" /></p>
    												</div>
    										</li>
    								</ul></td>
    				</tr>
    				<tr>
    						<td><ul  class="popup">
    										<li>
    												<div class="item"><img src="images/items/'.$pic.'" /></div>
    												<div class="info">
    														<p><img src="images/items_details/'.$pic2.'" /></p>
    												</div>
    										</li>
    								</ul></td>
    				</tr>
    				<tr>
    						<td><ul  class="popup">
    										<li>
    												<div class="item"><img src="images/items/'.$pic.'" /></div>
    												<div class="info">
    														<p><img src="images/items_details/'.$pic2.'" /></p>
    												</div>
    										</li>
    								</ul></td>
    				</tr>
    				<tr>
    						<td><ul  class="popup">
    										<li>
    												<div class="item"><img src="images/items/'.$pic.'" /></div>
    												<div class="info">
    														<p><img src="images/items_details/'.$pic2.'" /></p>
    												</div>
    										</li>
    								</ul></td>
    				</tr>
    				<tr>
    						<td><ul  class="popup">
    										<li>
    												<div class="item"><img src="images/items/'.$pic.'" /></div>
    												<div class="info">
    														<p><img src="images/items_details/'.$pic2.'" /></p>
    												</div>
    										</li>
    								</ul></td>
    				</tr>
    				<tr>
    						<td><ul  class="popup">
    										<li>
    												<div class="item"><img src="images/items/'.$pic.'" /></div>
    												<div class="info">
    														<p><img src="images/items_details/'.$pic2.'" /></p>
    												</div>
    										</li>
    								</ul></td>
    				</tr>
    				<tr>
    						<td><ul  class="popup">
    										<li>
    												<div class="item"><img src="images/items/'.$pic.'" /></div>
    												<div class="info">
    														<p><img src="images/items_details/'.$pic2.'" /></p>
    												</div>
    										</li>
    								</ul></td>
    				</tr>
    				<tr>
    						<td><ul  class="popup">
    										<li>
    												<div class="item"><img src="images/items/'.$pic.'" /></div>
    												<div class="info">
    														<p><img src="images/items_details/'.$pic2.'" /></p>
    												</div>
    										</li>
    								</ul></td>
    				</tr>
    		</table>
    </div>
    </body>
    </html>
    The ul/li construction should really be removed but I've left it n place in order to try and replicate your problem.

  12. #12
    SitePoint Member (--eRRoR--)'s Avatar
    Join Date
    Apr 2012
    Location
    Perugia, Italy, Italy
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Could it be that the version of the internal browser of the game to be even older the IE6 that causes this?

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,376
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    The example I gave above is working back to ie5.5 so there must be another issue.

    What you can do is run the page and then grab the html from view source from the browser options. Then you can edit out any sensitive data (if any) and insert all your css files to make a basic static standalone page. This should enable the bug to be viewed as it will be the only way that I can try and fix it. (Or alternatively a link to a working version of course.)

  14. #14
    SitePoint Member (--eRRoR--)'s Avatar
    Join Date
    Apr 2012
    Location
    Perugia, Italy, Italy
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is a apart of the the html source.It seems ok
    <html>
    <table width="500" cellspacing="4" cellpadding="0" border="0" id="popup"><tr>
    <td width="106px" rowspan="2">
    <ul class="popup">
    <li>
    <div class="item"><img src="images/items/gear/helms/battlehelmsigmetal.png" /></div>
    <div class="info">
    <p><img src="images/items_details/gear/helms/sigmetalhgfaamp+7.png" /></p>
    </div>
    </li>
    </ul>
    </td>
    <td valign="top" align="left" style="padding-left:8px;padding-top:4px" colspan="2"><span class="teal" style="font-size:14px;font-weight:bold;">SIGMetal Headgear(FA) of Amp (MSA)</span><br /><span class="mini"><b>Effect/b> +7, Craft, 38% MSA<br />

    <b>Level/b> 135<br />

    <b>Duration/b> Permanent<br />

    <b>Account Binding</b>

    </span></td>
    </tr>
    <tr>
    <td align="left" style="padding-left:8px" width="270"><img src="images/coins.png" width="30" height="11"/>&nbsp<strong class="orange">50</strong>&nbsp;<span class="mini">Coins</span></td>
    <td align="center" width="81" height="22">
    <table>
    <tr><strong class="orange">Stock</strong> : <span class="teal" style="font-weight:bold;">996</span>
    </tr>
    <tr><img src="images/Purchase.png" style="CURSOR: pointer" onclick="javscript:location.href='./buy.php?v1=1&v2=29FCC842791A4780AF0FE82377E06D48&cd=261'" alt="Confirm purchase" width="81" height="22" />
    </tr>
    </td>
    </table>
    </tr>
    </tr>
    <tr>
    <td background="images/Item_premium_R_04.gif" width="7" height="1" colspan="3" style="padding-right:8px"></td>
    </tr><tr>
    <td width="106px" rowspan="2">
    <ul class="popup">
    <li>
    <div class="item"><img src="images/items/gear/helms/battlehelmsigmetal.png" /></div>
    <div class="info">
    <p><img src="images/items_details/gear/helms/sigmetalhgfbamp+7.png" /></p>
    </div>
    </li>
    </ul>
    </td></html>

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,376
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    That still appears to be working (even though the code is broken and you have no doctype).

    I can't really offer any other ideas until I can see the full html code and full css. The snippets so far all appear to be working to me.

  16. #16
    SitePoint Member (--eRRoR--)'s Avatar
    Join Date
    Apr 2012
    Location
    Perugia, Italy, Italy
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the full html page.I saved it

    And thank you very much for the help untill now.You are a very nice guy.

    http://www.mediafire.com/?ob2wjw72dqc28pf

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,376
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Ok, that's better .

    You need this:

    Code:
    .popup li.over{z-index:999}
    You do realise that without a doctype you render all versions of IE to behave (much) like ie5.5.

  18. #18
    SitePoint Member (--eRRoR--)'s Avatar
    Join Date
    Apr 2012
    Location
    Perugia, Italy, Italy
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you and can you explain more detailed please.I dont know what you mean.

    EDIT: the popup is stiill showing ingame under the other images. :|

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,376
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you are referring to the doctype comment above then read this pages for more information especially the section about quirks mode.

    http://reference.sitepoint.com/html/doctypes
    http://reference.sitepoint.com/css/ie5boxmodel

  20. #20
    SitePoint Member (--eRRoR--)'s Avatar
    Join Date
    Apr 2012
    Location
    Perugia, Italy, Italy
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok now one last question.How do i find out what doctype is mi file?
    It wasnt writted by mi from the first so...

    EDIT:
    Found out.The site was orginali build with
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >

    I will look more over tutorials here and start working on removing deprechated stuff and upgrading the pages

    Thanks again for the help.Much apreciated.

  21. #21
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,376
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    You don't have a doctype on your page so it reverts automatically to quirks mode.

    You need to add one.

    As you are using self closing tags then you would need an xhtml doctype such as this:

    Code:
    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>
    
    <body>
    </body>
    </html>
    The above is a "strict" doctype and assume well formedness but as your code is very old fashioned you would need to use "transitional" until you fix the errors and remove deprecated presentational mark up.

    Code:
    <!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=utf-8" />
    <title>Untitled Document</title>
    </head>
    
    <body>
    </body>
    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •