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

    Div Trouble, left div overlaps main div...

    Hi!

    I've just started using css (I know it's a bit late) And i ran into trouble fairly quickly... Thats why I thought you guys could help me. The site looks good in Internet Explorer, but in Firefox the left div seems to overlap the main div and it just looks weird...

    That's how it's supposed to look like:


    And this is just wrong:


    HTML:
    <body>
    <div id="main">
    <div id="left">
    <hr style="clear: both; visibility: hidden;"></div>
    </div><div id="footer"></div>
    </body>
    </html>

    CSS:
    * {
    margin: 0;
    padding: 0;
    }

    body {
    background-color: #ECECEC;
    color: #000000;
    font-size: 8pt;
    font-family: "Trebuchet MS", Verdana, arial, Tahoma, sans-serif;
    text-align: center;
    }

    a {
    color: #C7E813;
    font-size: 11px;
    background-color:transparent;
    text-decoration: none;
    }

    pre {
    color: #564b47;
    font-size: 11px;
    background-color: #fefefe;
    font-family: Courier, Monaco, Monospace;
    }

    p,h1, h3, pre {
    padding: 5px 4px;
    margin: 0px;
    }

    h3 {
    font-size: 13px;
    text-transform:uppercase;
    color: #FFFFFF;
    background-color: transparent;
    }

    #main {
    width: 700px;
    margin: 0px auto;
    text-align: left;
    padding: 20px;
    background-color: #FFFFFF;
    border-left: 5px solid #E4E4E4;
    border-right: 5px solid #E4E4E4;
    }

    #footer {
    width: 700px;
    margin: 0px auto;
    text-align: right;
    padding: 20px;
    height: 50px;
    background-color: #FFFFFF;
    border-left: 5px solid #E4E4E4;
    border-right: 5px solid #E4E4E4;
    }

    #left {
    width: 410px;
    text-align: left;
    background-color: #ffffff;
    border-right: 1px #AFCB17 solid;
    float: left;
    height="100%"
    }

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    we need to see the html also

  • #3
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here's the html...


    <body>
    <div id="main">
    <div id="left">
    <hr style="clear: both; visibility: hidden;"></div>
    </div><div id="footer"></div>
    </body>
    </html>

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    try this for your css
    Code:
    * {
    margin: 0;
    padding: 0;
    }
    
    html,body {
    background-color: #ECECEC;
    color: #000000;
    font-size: 8pt;
    font-family: "Trebuchet MS", Verdana, arial, Tahoma, sans-serif;
    text-align: center;
    height:100%;
    }
    
    a {
    color: #C7E813;
    font-size: 11px;
    background-color:transparent;
    text-decoration: none;
    }
    
    pre {
    color: #564b47;
    font-size: 11px;
    background-color: #fefefe;
    font-family: Courier, Monaco, Monospace;
    }
    
    p,h1, h3, pre {
    padding: 5px 4px;
    margin: 0px;
    }
    
    h3 {
    font-size: 13px;
    text-transform:uppercase;
    color: #FFFFFF;
    background-color: transparent;
    }
    
    #main {
    width: 700px;
    height:100%;
    margin: 0px auto;
    text-align: left;
    padding: 20px;
    background-color: #FFFFFF;
    border-left: 5px solid #E4E4E4;
    border-right: 5px solid #E4E4E4;
    }
    
    #footer {
    width: 700px;
    margin: 0px auto;
    text-align: right;
    padding: 20px;
    height: 50px;
    background-color: #FFFFFF;
    border-left: 5px solid #E4E4E4;
    border-right: 5px solid #E4E4E4;
    }
    
    #left {
    width: 410px;
    text-align: left;
    background-color: #ffffff;
    border-right: 1px #AFCB17 solid;
    float: left;
    height:100%;
    }
    your had height=100% in your #left css and for firefox in order to get percentages for heights to work you have to apply it to the html element also

  • #5
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    your had height=100% in your #left css and for firefox in order to get percentages for heights to work you have to apply it to the html element also
    What am i putting in the HTML? - i'm pretty much a no0b in this area...

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    u put nothing in your html almost every element can be defined in css, you just dont use = signs when you are coding css, the html was fine


  •  

    Posting Permissions

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