Hallo,
das leidige Thema IE
Diesem eine max-width über mit Hilfe von Expression (JavaScript innerhalb von CSS) und Conditional Comment beizubringen ist keine große Sache. Abgesehen davon dass der IE sich nur die Pixel-Breite des Viewports auslesen läßt, also nicht etwa andere Einheiten wie "em", aber gut - wir nehmen ja was geht.
Code:
<!--[if lt IE 7]>
<style type="text/css">
#id1,
#id2 {
width:expression(document.body.clientWidth > 900 ? "54em": "auto" );
}
</style>
<![endif]-->
min-width dagegen läßt sich leider nicht so trivial einstellen. Da müssen schon schwerere Geschütze an den Start.
"IE :hover/:focus auf alle Elemente (expression)" konsequent weitergedacht bedeutet zwar einen gehbaren Lösungsansatz, bedarf aber auch einem Event (leider).
Code:
<!--[if lt IE 7]>
<style type="text/css">
body {
ulle: expression(
this.onmouseover =
new Function ("if (document.body.clientWidth < 760) { this.className = 'body-min-width'; }")
);
}
</style>
<![endif]-->
Als einziger verbleibender Event für den BODY bleibt wohl nur onmouseover-Event, da die Mouse wohl meist im Fenster steht
Dies ist aber eher SUB-optimal, onload-Event wäre wohl optimal, leider funktioniert dieser nicht in der "expression" Konfiguration. Somit ist zusätzlich "echtes" JavaScript für dieses Addon wohl vorausgesetzt.
Trotzdem poste ich mal den Ansatz, evtl. hat ja jemand noch eine weitere Idee
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" xml:lang="de-DE" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>xxxx</title>
<style type="text/css" media="screen,projection" title="Druckvorschau => Markup-Semantic">
/*<![CDATA[*/
* {
margin: 0;
padding: 0;
border-collapse:collapse;
border-spacing: 0;
}
html[xmlns] {
height : 100%;
padding-bottom : .005em;
}
html,
body {
color: #000000;
background: #DDDDDD;
line-height: 1.45;
}
body {
font-size: 100.01%;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
padding: 5px;
min-width: 46em;
}
.body-min-width
{
width: 46em;
}
#id1,
#id2 {
margin: 1em auto;
border: 1px solid #000000;
padding: 1em;
background-color: #FFFFFF;
max-width: 54em;
}
/*]]>*/
</style>
<!--[if lt IE 7]>
<style type="text/css">
body {
ulle: expression(
this.onmouseover =
new Function ("if (document.body.clientWidth < 760) { this.className = 'body-min-width'; }")
);
}
#id1,
#id2 {
width:expression(document.body.clientWidth > 900 ? "54em": "auto" );
}
</style>
<![endif]-->
</head><body>
<div id="id1">
textfluss......
</div>
<div id="id2">
link-test
</div>
</body></html>