Hallo,
ich versuche grade eine Webseite komplett Größen skalierbar zu machen. Genauer gesagt, die Schriftgröße verändern und es sieht trotzdem gut aus. Beispiel wie beim
WDR.de.
Ich habe jetzt das Problem, dass es im IE7 nicht funktioniert. Ich arbeite mit "em", damit sich alles gleichmäßig mitvergrößert. Nur im IE7 verändert sich das Bild nicht richtig mit dem Div-Tag, wodurch der Hintergrund viel stärker skaliert als das Bild.
Woran kann es liegen? Brauch ich für IE7 ein Hack?
Hier Code und Beispiel:
Beispiel
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Skalierungs Test</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html {
margin: 0;
padding: 0;
}
body {
margin:0;
padding: 0;
font: 100.01%/1.5em Verdana, Arial, Helvetica, sans-serif;
background-color: #B8E9FF;
text-align:center;
}
a {
color: #000000;
}
img {
border: 0;
}
input, textarea, select {
font-size: 1em;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
/**/
#wrapper {
margin:0 auto;
width: 48.75em;
text-align:left;
background-color: #BD0000;
}
#header {
position:relative;
width: 100%;
height: 8.0625em;
}
#testblock {
width:2em;
height: 6em;
background:#FFFF00;
}
#testbild {
width: 10.6875em;
height: 8.0625em;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<img src="zuhoeren.jpg" id="testbild" />
</div>
</div>
</body>
</html>
bin für jede Hilfe dankbar!