Frank Runte: Internet Explorer und Grafiken zu gross.

Beitrag lesen

Hallo und ein frohes neues Jahr zusammen.
Ich bin Änfänger im Bereich HTML/CSS und habe folgendes Problem mit dem Internet Explorer.

Ich habe eine Index-Seite, die enhält vier frames,im unteren rechten Frame sollen A4 Scannes dargestellt werden.

Ich habe jeden scann in einer Tabelle auf einer seperaten HTML-Seite verpackt.
Wenn ich nun über den Link die Seiten in den Frame lade, sieht das mal gut aus mal sind die Tabellen 3mal zu gross ?

Wenn ich die selbe Seite die bereits korrekt Angezeigt wird nochmals aufrufe, wird die Seite um das 3fache vergrössert, so das sich eine vertikale Scrollleiste zeigt.(unkonfortabel)

Die Tabellen habe ich mit (width="100%") begrenzt.

Dieses Phänomen tritt aber nur im Internet Explorer 6.0 auf, im Firefox funktionier alles prima.

Wenn ich die Scannes aus den Seiten heraus nehme, werden die Tabelle korrekt dargestellt.

Hat jemand eine Erklärung ?

Vielen Dank
Hier mal die CSS

h1, h2, h3, p{color:#000000;
     font-family:Verdana;}

h1 { text-decoration:none;
     color: red;
  font-size:20pt;
  margin:0pt;
  padding:0pt;
 }

h2 { text-decoration:none;
  font-size:15pt;
  margin:0pt;
  padding:0pt;
 }

h3  { text-decoration:none;
  font-size:12pt;
  margin:0pt;
  padding:0pt;
 }

img {width:100%;
  height:100%;
  margin:5pt;
 }

table { border:1px solid #111111;
  width:100%;
   }

td {border:1px solid #111111;
 width:33%;
   }

p { margin-top:7pt;
 margin-bottom:7pt;
 margin-left:2pt;
 margin-right:2pt;
 padding:0pt;
 }

.kopfzeile {height:3%;
   width:33%;
   border:1px solid #111111;
   }

.bold { font-weight:bold;}

.UeberschriftenMenue {color:blue;}

.UeberschriftenLL{margin-top:10pt;
      font-weight:bold;
      text-decoration:underline;}

.linksoben {text-align:left;
   vertical-align:top;}

.rechtsoben {text-align:right;
   vertical-align:top;
   }

.mitteoben {text-align:center;
   vertical-align:top;
   }

.menue {font-family:Verdana, Helvetia,sans-serif;
  text-decoration:none;
  text-align:center;
  vertical-align: bottom;
  font-size:12pt;

background-repeat:no-repeat;
  width:110pt;
  height:20pt;

display: block;

padding-left:5pt;
  padding-right:5pt;
  padding-top:5pt;
  padding-bottom:5pt;

margin-left:1pt;
  margin-right:1pt;
  margin-top:1pt;
  margin-bottom:1pt;
  }

a.menue:link {
    background-image: url('schaltflaechen/button-normal.gif');
    font-weight:bold;
    color:blue;
    }

a.menue:visited {background-image: url('schaltflaechen/button-visited.gif');
    font-weight:normal;
    color:#000000;

}

a.menue:hover { background-image: url('schaltflaechen/button-hover.gif');
    color:#ffffff;
    font-weight:bold;
    font-size:12pt;
    }

a.menue:active { background-image: url('schaltflaechen/button-activate.gif');
     color:#000000;
     font-size:12pt;
    }

Hier die HTML-Seite

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<title>Neue Seite 1</title>

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

<base target="Mainframe">

</head>

<body>

<table>

<tr class="kopfzeile">

<td width="33%">

<a href="javascript:history.back()"> zurück</a>

</td>

<td width="33%">
    </td>

<td width="34%">
    </td>

</tr>

<tr>
    <td colspan="3">

<p><img src="images/test.jpg"></p>

</td>
  </tr>

<tr class="kopfzeile">
    <td width="33%" >

<a href="javascript:history.back()"> zurück</a>

</td>
    <td width="33%" >
 </td>
    <td width="34%" >
    </td>
  </tr>
</table>

</body>

</html>