Hi Leutz!
Ich arbeite eigentlich schon eine ganze Weile mit CSS, doch manchmal überraschen mich auch noch Browser mit ihrem zeitweise seltsamen Verhalten. Diesesmal Opera.
Gegeben sei der folgende HTML und CSS Code:
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Width Test for Opera</title>
<style type="text/css" media="screen">
html, body, div, p {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
body {
line-height: 1em;
color: black;
background: white;
font-family: Arial, Helvetica, sans-serif;
}
div {
font-size: 0.8em; /* <-- Hier liegt die Krux */
width: 44.5em;
border: 1px solid green;
margin: auto;
margin-top: 5em;
}
</style>
</head>
<body>
<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam iaculis nisl quis metus. Donec et tellus eu purus iaculis consectetuer. Nunc volutpat arcu quis diam. Fusce sit amet leo. Sed pretium neque nec felis. Donec sed pede. Integer sed erat. Nulla facilisi. Phasellus nunc ligula, malesuada non, ornare ut, facilisis non, urna. Quisque venenatis dui. Aliquam dictum, lacus ac tincidunt aliquam, risus massa consectetuer justo, id sagittis sapien mi a est. Integer tincidunt. Maecenas dictum sapien nec neque. Duis leo. Vivamus posuere. Duis tellus purus, ornare non, semper nec, placerat ac, massa.</p>
</div>
</body>
</html>
Der Div-Kasten wird in FF 3.0.1 und Opera 9.51 unterschiedlich breit dargestellt (IE6 hat Verhalten von FF). Ohne die font-size Anweisung beim div wird in beiden Browsern der Kasten gleich breit angezeigt.
Wie bringe ich Opera dazu die font-size gleich wie FF zu interpretieren?
Flexible und barrierefreie Layouts werden sonst recht schwierig, oder?
Danke & Grüße,
Fred
