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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Layout is wrecked in IE but perfect in FF!? Anyway to make it right in both?

    Hi everyone!

    So I love coding in Div's/css but one thing I hate (and this is probably just me ) is I can always get it perfect in FF (main browser I use) but it is horrible or almost-close in IE. And this is something I always face, I can never get it right!

    I've started coding my new design for my site and though I'm not done, I can't continue unless I know what I have so far is good on both browsers. It's perfect in FF but terrible in IE! Here is the demo page I've set for your viewing: Click here.

    Here is the css snippet:
    Code:
    /************************* JLN BODY *************************
    ----------------------------------------------------------------------------------- */
    
    body {
        font-family: "Verdana"; 
        font-size: 11px;
        text-align: center; 
        margin: 0 0px;
        padding: 0px;
        background: #f6f6f4 url("images/bgx.png") repeat-x;
    }
    
    #Inner_Page {
        width: 900px; 
        margin: 0 auto;
        text-align: justify; 
        position: relative;
    }
    
    
    /************************* LAYOUT STRUCTURE *************************
    ----------------------------------------------------------------------------------- */
    #header {
    width: 900px;
    height: 516px;
    background: url("images/blue-haze_01.png") top no-repeat;
    font-family: "Times New Roman", Times, serif;
    font-size: 10px;
    color: #8b8b89;
    line-height: 12px;
    text-align: justify;
    }
    
    #header-links {
    width: 330px;
    height: 41px;
    padding: 93px 0px 0px 398px;
    margin: 0px;
    }
    
    #header-links img {
    padding: 0px;
    border: 0px;
    }
    
    #header-links img:hover {
    padding: 0px;
    border: 0px;
    }
    
    
    .ad {
    width: 728px;
    height: 90px;
    padding: 8px 0px 0px 3px;
    }
    
    #intro {
    width: 238px;
    height: 126px;
    padding: 20px 0px 0px 295px;
    }
    
    #images {
    padding: 0px 0px 0px 575px;
    width: 280px;
    height: 126px;
    margin-top: -130px;
    }
    Is there anyway I can fix this to have it right in both browsers?

    Thanks for any help!

  • #2
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    you have no doctype which is almost certainly the problem

    add this to the top:

    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=utf-8" />
    using transitional. strict may be used, down to preference

    read : http://www.alistapart.com/articles/doctype/

    edit ~ fix these validation errors - http://validator.w3.org/check?verbos...%2FBlueHaze%2F

  • Users who have thanked met for this post:

    vivalaart (08-15-2010)

  • #3
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you so much! I can't believe I forgot to add the doctype!

    And I'm working on the errors...thanks!!


  •  

    Posting Permissions

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