Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problem With the Height of a Layer

    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>&nbsp;</p>
    </body>
    </html>

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

    Thanks a lot,

    Chris

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Hello chr2010,
    Look what happens when you use a DocType -
    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">
    <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>&nbsp;</p>
    </body>
    </html>
    Read about DocTypes in my sig below -


    ...
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Hi there,
    You'd need to set font-size:0; to get it right in IE.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •