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 Coder
    Join Date
    Oct 2007
    Location
    Michigan
    Posts
    36
    Thanks
    27
    Thanked 0 Times in 0 Posts

    got FF positioning issue

    The rule > .sidebar ul < is pushed outside of the container in FF
    check it out www.invision-online.com

  • #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
    Always helps to zero out defaults with
    Code:
     
    * {
    margin: 0;
    padding: 0;
    }

    Try making your CSS look like this:
    Code:
    #content { 
    background:#ffcccc ;
    margin : 1px 0 0 0;
    height : 700px;
    width : 600px;
    padding : 0 1px 0 2px;
    border-top : 0;
    border-right: 0;
    border-bottom : 0;
    border-left : 5px solid #ff0000;
    }
     
    #sidebar { 
    height : 712px;
    width : 246px;
    background : #ffcccc url(../media/a_red_b_bas.gif) repeat-y top right;
    float : right;
    margin: 0 4px 0 0;
    } 
    * {
    margin: 0;
    padding: 0;
    }
    #sidebar ul {
    color:#ffffff;
    margin:0 2px 0 0px; 
    width:246px;
    height:20px;
    text-decoration:none;
    list-style:circle;
    }
    
    
    
    
    #sidebar li { 
    width:246px;
    height:20px;
    font-weight:bold;
    background:#FF9999;
    border-bottom:solid 1px #FF0000;
    padding-top:5px;
    text-align:center;
    text-decoration:none;
    list-style:none;
    }
    
    
    .bar { 
    height : 21%;
    width : 246px;
    } 
    
    .bar ul {
    margin:0 0 0 0; 
    width:248px;
    height:20px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:0.7em;
    text-decoration:none;
    list-style:none;
    }
    
    .bar li {
    width:248px;
    height:20px;
    }
    
    .bar li li {
    width:248px;
    height:20px;
    }
    
    
    .bar h3 { 
    height : 20px;
    width : 100%;
    background : url(../media/a_red_ba.gif) repeat-x top left;
    color : #ffffff;
    text-align : center;
    padding : 3px 0 0 0;
    margin : 1px 0 0 0;
    font-family : Arial, Helvetica, sans-serif;
    font-weight : 600;
    font-size : 1em;
    }
    Check the CSS validator.

    I like the looks of this page - striking.
    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
    New Coder
    Join Date
    Oct 2007
    Location
    Michigan
    Posts
    36
    Thanks
    27
    Thanked 0 Times in 0 Posts
    thank you, i will try and zero the margins as you suggest


  •  

    Posting Permissions

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