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

    IE7 ok, not working in FF

    i have a two column layout that works in IE7 but not FF. the part that wont work is my thick left border..

    Code:
    #container{
    	margin: 0 auto;
      background-color:#ffffff;
      width:465px;
      border-left:335px solid #8FADB4;
      border-right:1px solid #8FADB4;
      border-top:1px solid #8FADB4;
      border-bottom:1px solid #8FADB4;
      background:  url('images/br_logo.jpg') no-repeat bottom right;
    
    }
      /* The width and color of the left rail */
    #leftRail{
    	float:left;
    	padding: 5px;
    	width:315px;
    	margin-left:-335px;
    	position:relative;
    
    
    
    }
    #center{
     float:left;
        padding: 7px;
      width:455px;
      margin-right:-465px;
    }

    my html is as follows:

    PHP Code:
    <div id="container">
      <
    div id="center"Right column
            
    </div>
      <
    div id="leftRail">
    left column
      
    </div>
    </
    div
    can anybody help?

  • #2
    Banned
    Join Date
    Feb 2008
    Location
    Winnipeg, Canada
    Posts
    396
    Thanks
    0
    Thanked 29 Times in 29 Posts
    It seems you could go about this whole thing in a better way, without negative margins and such - however I think this HTML fix may solve some of your woes:

    PHP Code:
    <div id="container">
       <
    div id="center">
          
    Right column
       
    </div>
       <
    div id="leftRail">
          
    left column
       
    </div>
       <
    br style="clear:both" />
    </
    div

  • #3
    New Coder
    Join Date
    Feb 2006
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    that worked thanks! although im not sure why, will read up on br styles

  • #4
    Banned
    Join Date
    Feb 2008
    Location
    Winnipeg, Canada
    Posts
    396
    Thanks
    0
    Thanked 29 Times in 29 Posts
    Just read up on the "clear" css attribute and how it affects "float"ing objects.

    EXTREMELY important to understand if you use floating div's and the like, but a lot of people don't know about it for some reason.

  • #5
    New Coder
    Join Date
    Feb 2006
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ive designed another css template as im trying to learn about clearing floats. my css is as follows:

    Code:
    #container{
    	margin: 0 auto;
      background-color:#ffffff;
      width:760px;
      border:1px solid #8FADB4;
          padding: 12px;
    
    }
    
    #header{
       width:100%;
    }
    #links {
    	margin-top: 5px;
    	margin-bottom: 10px;
    	height:25px;
        background: url('images/links.jpg') repeat-y;
    	width: 100%;
    }
    #bodycontainer
    {
        background:  url('images/mainbody.jpg') repeat-y;
    	width:100%;
    
    }
    #left{
    float: left;
    width:220px;
      padding: 5px;
    
    }
    #content{
      padding: 5px;
      width:520px;
    }

    my html:

    PHP Code:
    <div id="container">
            <
    div id="header">
            
    header info here (banner etc)        
            </
    div>
            <
    div id="links">links go here after header</div>
            
                <
    div id="bodycontainer">
            <
    div id="left">left hand column info here        </div>
            <
    div id="content">
            
    right content here
            
    </div>
            </
    div>
            <
    div id="footer">stuff for footer</div>
        </
    div
    i have the same problem in that it works in IE7 but not FF, so i tried to add the following to my css:

    Code:
    #left{
    float: left;
    clear: both;
    width:220px;
      padding: 5px;
    
    }
    this seemed to help but my site is still a mess! it seems to be that the 'links' section is not low enough down the page. any ideas? 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
    •