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 7 of 7
  1. #1
    New Coder
    Join Date
    May 2006
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question IE not displaying my header properly

    I've got a short bit of code, which I literally just whipped up. Anyway, its supposed to be the full width of the page, in IE its a bit short, in Firefox its perfect.

    I know of a way to get around it that would probably work but will take more time than this little problem deserves, so was wondering if there was something simple that I could change.

    Below is the code, its not much but its just the beginning and i want to get it sorted before I continue.
    Code:
    <html>
    <head>
    <style type="text/css">
    
    #header {
    position: absolute;
    background-color: #8C0000;
    height: 100px; width: 100%;
    left: 0px; top: 0px;
    }
    
    </style>
    </head>
    
    <body>
    <div id="header">&nbsp</div>
    
    </body>
    </html>
    Thank you for any help!

    Flic

  • #2
    Regular Coder BonRouge's Avatar
    Join Date
    Mar 2006
    Location
    Sendai, Japan
    Posts
    328
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You need a valid DTD.

  • #3
    New Coder
    Join Date
    Aug 2006
    Location
    Kansas, USA
    Posts
    52
    Thanks
    0
    Thanked 0 Times in 0 Posts
    your code should be like this bacuse of preset margins and paddings in different browsers:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html dir="ltr" lang="en">
    
    <head>
    <style type="text/css">
    html, body {
    padding:0;
    margin:0;
    }
    #header {
    position: absolute;
    background-color: #8C0000;
    height: 100px; width: 100%;
    left: 0px; top: 0px;
    }
    
    </style>
    </head>
    
    <body>
    <div id="header">&nbsp</div>
    
    </body>
    </html>
    Last edited by hurloon; 09-22-2006 at 04:37 PM.

  • #4
    New Coder
    Join Date
    May 2006
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile

    Quote Originally Posted by hurloon View Post
    your code should be like this bacuse of preset margins and paddings in different browsers:
    Code:
    html, body {
    padding:0;
    margin:0;
    }
    Perfect, thank you!

  • #5
    New Coder
    Join Date
    May 2006
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, so setting the padding and margin for the page worked for the problem I had, but now i've taken the code a tiny bit further and have come acropper.

    I've uploaded what I've done at http://airraid.mancubus.net/flic/coder/design.html

    If you view this using firefox its perfect, yet again it is IE that is showing it incorrectly. On the right hand side there is a 1px gap between the curve and the side. Right is set to 0px.

    Once again, any help is appreciated

    Flic

    PS. I know that I need to add DTD.

  • #6
    Regular Coder BonRouge's Avatar
    Join Date
    Mar 2006
    Location
    Sendai, Japan
    Posts
    328
    Thanks
    0
    Thanked 0 Times in 0 Posts
    There's no point testing without a valid DTD. The page will probably render differently when you finally add it. I haven't checked, but it's actually possible that your current problem could go away if you put your DTD in now.

  • #7
    New Coder
    Join Date
    May 2006
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hm, apparently I underestimated DTD!

    You're right, it did fix it.

    Thank you!


  •  

    Posting Permissions

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