Problem im IE: Links und Layout

joobie · 22. November 2007

Hallo,

ich habe hier ein kleines Problem und komme nicht weiter. Firefox stellt alles richtig dar, doch im Internet Explorer (v6) funktioniert ein Link nicht (JavaScript-Hover geht nicht, Link an sich geht auch nicht) und ist zudem nicht richtig positioniert (Problem 1), und das Layout einer Tabellenzelle wird nicht richtig dargestellt (Problem 2).

Hier ist die HTML:

Code:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>

<link rel="stylesheet" type="text/css" href="css.css">

<script language="JavaScript">
<!--
function namosw_exchange_src(name, rpath, nsdoc)
{
  str = (navigator.appName == 'Netscape') ? nsdoc+'.'+name : 'document.all.'+name;
  img = eval(str);
  if (img) {
    if (img.altsrc == null) {
      img.altsrc = img.src;
      img.src    = rpath;
    } else {
      var temp   = img.src;
      img.src    = img.altsrc;
      img.altsrc = temp;
    }
  }
}

function namosw_preload_img()
{
  var img_list = namosw_preload_img.arguments;
  if (document.preloadlist == null)
    document.preloadlist = new Array();
  var top = document.preloadlist.length;
  for (var i=0; i < img_list.length; i++) {
    document.preloadlist[top+i]     = new Image;
    document.preloadlist[top+i].src = img_list[i];
  }
}

//-->
</script>

</head>
<body>

<div id="wrapper">

<div id="mainbg">
<div id="main">

<div style="position:absolute; left:0px; top:5px; width:568px; height:467px; background-image:url(m_mda.jpg); background-repeat:no-repeat">
</div>

<div style="position:absolute; top:437px; right:7px">								<!-- PROBLEM 1 -->
<a href="#refs" target="_self" onmouseout="namosw_exchange_src('linka', 'linka2.gif', 'document')"
onmouseover="namosw_exchange_src('linka', 'linka2.gif', 'document', 'parent.location')"><img src="linka.gif"
width="251" height="26" border="1" align="right" name="linka"></a>
</div>

<div style="position:absolute; top:473px; left:0px">

<table width="548" border="0">
<a name="linka" id="linka"></a>

<tr height="119">	
<td valign="top">
...
</td></tr>

<tr height="119">                  
<td valign="top">
...
</td></tr>

<tr height="119"> 
<td valign="top">
...
</td></tr>

<tr height="119">
<td width="257">
                              <!-- PROBLEM 2 -->
<img src="pic.gif" width="257" height="100" border="0" style="float:left">					
<h2 style="margin-top:34px; text-align:center">Dieser Text steht rechts oben neben dem Pic. Darunter muss der Link hin</h2>
<a href="linkb.html" target="_self" onmouseout="namosw_exchange_src('linkb', 'linkb2.gif', 'document')"
onmouseover="namosw_exchange_src('linkb', 'linkb2.gif', 'document', 'parent.location')"><img src="linkb.gif"
width="254" height="41" border="1" align="right" style="margin:-50px 22px 0px 0px" name="linkb"></a>

</td></tr>
</table>

</div>

</div>
</div>

</div>

</body>
</html>

Und die CSS:

Code:

html,body {
          height:100%;
          background:#000000;
          margin:0px;
}

/********************************************************************************/

#wrapper {
     position:relative;
     width:100%;
     height:100%;
     top:0px;
     left:0px;
     background-image:url(bg.jpg);
     background-position:top left;
     background-repeat:no-repeat;
}

#mainbg {
     position:absolute;
     width:588px;
     height:487px;
     top:7px;
     left:466px;
     overflow:hidden;
     background-image:url(bg_main.gif);
}

#main {
     position:absolute;
     width:568px;
     height:467px;
     top:10px;
     left:10px;
     overflow:auto;
     overflow-x:hidden;
}

/********************************************************************************/

h2 {
   font-family: Tahoma, Arial, sans-serif;
}

h2 {                                                      /* maintext */
   font-size:10pt;
   text-align:left;
   font-weight:normal;
   color:#FFFFFF;
   margin-right:5px;
   margin-top:10px;
   margin-bottom:10px;
}

table h2 {
   margin-left:270px;
   margin-right:10px;
}

/********************************************************************************/

img {
    margin-top:5px;
}

table img {
      margin-left:10px;
      margin-top:5px;
}

table {
      padding:0px;
}

Nochmal: FF geht, aber IE macht Folgendes:
Problem 1: - Link funktioniert überhaupt nicht (weder Hover noch Funktion)
- Position der Grafik ist um ca. 20px nach rechts verschoben
Problem 2: - Die Elemente (Grafik, Text, Grafik-Link) werden nicht wie im FF nebeneinander dargestellt, sondern untereinander.

Ich hoffe, dass jemand Bescheid weiss... Gibt es evtl. einen Workaround für den IE?

Danke schonmal!
LG Joobie

Maik · 22. November 2007

Hi,

das zweite Problem löst du ganz einfach, indem du die Breitendefinition für die Tabellenzelle rausnimmst, denn die zu umfliessende Grafik besitzt dieselbe Breite.

Code:

<td width="257">

Das erste Problem wird vermutlich daran liegen, dass der IE mit dem Scriptcode nichts anzufangen weiß, weshalb ich dich in das JS-Forum überweise.

Problem im IE: Links und Layout

joobie

Mitglied

Maik

Neue Beiträge