Problem With the Height of a Layer

chr2010

01-15-2010, 11:11 PM

Hi to all,

I created a layer and filled it with color. I changed the size to 500 pixels in width x 10 pixels in height. This creates a long, thin colored rectangle.

when I open the HTML document in Firefox, the layer is correctly displayed exactly 10 pixels in height. However, when I open the HTML with Internet Explorer the layer is 19 pixels in height.

Here is a copy of the HTML coding that contains the layer:

------------------------------------------------------------------------------------------------------------

<html>
<head>
<title> No title</title>

<meta name="">
</head>
<body>

<div id="layer1" style="background-color:red; width:500px; height:10px; position:absolute; left:20px; top:57px; z-index:1;"></div>

<p> </p>
</body>
</html>

------------------------------------------------------------------------------------------------------------

Thanks a lot,

Chris

Excavator

01-15-2010, 11:20 PM

Hello chr2010,
Look what happens when you use a DocType - <!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div id="layer1" style="background-color:red; width:500px; height:10px; position:absolute; left:20px; top:57px; z-index:1;"></div>
<p> </p>
</body>
</html>

Read about DocTypes in my sig below -

...

abduraooft

01-16-2010, 07:26 AM

Hi there,
You'd need to set font-size:0; to get it right in IE.

chr2010

01-18-2010, 04:29 AM

Excavator,

Thanks very much for teaching me about the importance of using a doc type.

Abduraooft,

Thank you for the tip regarding setting the font size to 0.

Chris