Michael40221: Rand unter Bilden in Firefox & IE 6

Beitrag lesen

SELF-Forum

Rand unter Bilden in Firefox & IE 6

Michael40221
– Informationen zu den Bewertungsregeln

Hallo zusammen,

ich habe ein Problem mit dem ich überhaupt nicht weiterkomme!

Ich habe eine verschachtelte Tabelle, die unter anderem eine Navspalte enthält. In dieser Spalte habe ich vier Bilder (als Links) mit CSS platziert.
Dazu habe ich die Bilder mit JAVA-Script mit einem Onmouseover-Effekt bearbeitet.

Ich habe um die Bilder einzeln noch ein Tabelle als Rahmen angelegt. Am unteren Rand der Bilder stellen Firefox und IE jetzt einen ca. 2 px großen leeren Raum dar. Safari und Opera machen es so wie es sein soll, nämlich als direkt anliegenden Rahmen.

Hier mal die notwendigen Quelltexte Stück für Stück: (nur für eines der vier Bilder)

  
<html xmlns="http://www.w3.org/1999/xhtml">  
  <head>  
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
   <title>Homepage</title>  
   <link href="main.css" rel="stylesheet" type="text/css">  
 <SCRIPT LANGUAGE="JavaScript">  
<!-- Begin  
loadImage1 = new Image();  
loadImage1.src = "bildmaterial/nav/profil.jpg";  
staticImage1 = new Image();  
staticImage1.src = "bildmaterial/nav/profil_g.jpg";  
// End -->  
  </script>  
 </head>  
 <body bgcolor="#666666">  
  <div style="max-width:1000px"><!--[if IE]><table><tr><td style="width: 1000px"><![endif]-->  
   <table width="90%"  border="0" cellspacing="0" cellpadding="0" bgcolor="#c8c8c8" style="margin-left:auto; margin-right:auto; margin-top:20px; height:500px">  
    <tr>  
<!---top-->  
     <td colspan="3" height="*" style="max-width:300px">&nbsp;</td>  
    </tr>  
    <tr height="90%">  
<!---left-->  
     <td width="*">&nbsp;</td>  
      <td width="95%">  
       <table width="100%" height="100%" border="1" cellspacing="0" cellpadding="0">  
        <td width="220px">  
  <div id="profil">  
   <table style="border: 2px solid #4C4C4C" cellspacing="0" cellpadding="0" >  
    <tr>  
     <td>  
      <a  href="profil.htm" onmouseover="image1.src=loadImage1.src;" onmouseout="image1.src=staticImage1.src;">  
       <img class="nav" name="image1" src="bildmaterial/nav/profil_g.jpg" border="0">  
     </a>  
           </td>  
   </tr>  
         </table>  
 </div>  
  
      </td>  
      <td>  
 content  
      </td>  
     </table>  
    </td>  
<!---right--->  
    <td width="*">&nbsp;</td>  
   </tr>  
   <tr>  
<!---bottom--->  
    <td colspan="3" height="*">&nbsp;</td>  
   </tr>  
  </table>  
  <!--[if IE]></td></tr></table><![endif]--></div></body>  
 </html>

dazu noch die CSS Inhalte:

  
#profil{  
  position:relative;  
  top:-80px;  
  left:10px;  
}

Ich hoffe, dass das ganze nicht zu unübersichtlich ist! Für Hilfe wäre ich außerordentlich dankbar!

Michael

Beitrag melden
–
Informationen zu den Bewertungsregeln