Posts
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<title>height loose</title>
</head>
<body>
<div style="margin:auto;width:350px;border:5px solid #CCC;">
<img style="float:left;margin-top:0.5em" src="Design.jpg" />
<span style="float:right;margin-top:1em; margin-right:0.5em">
<b>Development</b>
</span>
</div>
</body>
</html>
To solve the problem, it's necessary to explicitly set the height of block and it's better to use em for height size unit cuz of covering different font size of contents:
<style type="text/css">
#hdr {
height: 4em;
}
</style>
<div id="hdr" style="margin:auto;width:350px;border:5px solid #CCC;">
...
</div>
IE doesn't show such a behavior, it's yet another place that coder should consider cross browser development techniques.
No comments:
Post a Comment