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
    May 2006
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Layout problems (learning css)

    I have a layout that im doing in css and im having a problem with the wrapper div in my layout working correctly in firefox. below is what it looks like in fire fox and in IE.
    Firefox


    IE


    My css
    Code:
    * {
     padding: 0;
     margin: 0; 
    }
    body {
     font-family: Arial, Helvetica, sans-serif;
     color: #666666;
     font-size: 12px;
     background-color:#003366;
    }
    #wrapper {
     width: 770px;
     margin: 0px auto 0px auto;
     background-color:#FFFFFF;
     border-left:1px solid #666666;
     border-right:1px solid #666666;
     height:100%;
    }
    #header {
     border: 1px solid #ccc;
     margin: 5px 5px 5px 5px;
     height: 70px;
     padding: 10px;
     background-color: #C9C9BE;
    }
    #navbar {
     border: 1px solid #ccc;
     margin: 0px 5px 5px 5px;
     padding: 4px;
     background-color: #A3A38F;
    }
    #centercolumn {
     margin: 0 5px 5px 5px;
     display: inline; /* IE Hack */
     padding: 0px;
     width: 98.4%;
     float: left;
     min-height: 300px;
    }
    * html #centercolumn {height:300px} /* IE Min-Height Hack */ 
    
    #footer {
     background-color: #A3A38F;
     margin: 0 5px 5px 5px;
     display: inline; /* IE Hack */
     padding: 4px;
     float: left;
     width: 97.7%;
    }
    
    #google{
    background-color:#006699;
    height:62px;
    }
    
    #welcome{
    background-color:#999999;
    padding-left:.5em;
    padding-right: .5em;
    padding-bottom:.5em;
    }
    
    #latestnews{
    background-color:#333333;
    padding-left:.5em;
    padding-right: .5em;
    padding-bottom:.5em;
    }
    
    #pointsstanding{
    background-color:#00CCFF;
    padding-left:.5em;
    padding-right:.5em;
    padding-bottom:.5em;
    }
    
    #raceresults{
    background-color:#3399FF;
    padding-left:.5em;
    padding-right:.5em;
    padding-bottom:.5em;
    }
    my html
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>CSS Layouts - 1 Column Layout - 34</title>
    <link rel="stylesheet" type="text/css" href="main.css" />
    </head>
    
    <body>
    <div id="wrapper">
    
       <div id="header">
          navigation</div>
       
       <div id="navbar">Flash Section </div>
       
       <div id="centercolumn">
        <div class="style1" id="google">Google Adsense Here</div>
    	<div id="welcome">Welcome Text Here</div>
    	<div id="latestnews">Latest News Here</div>
    	<div id="pointsstanding">Points Standing Here</div>
    	<div id="raceresults">Race Resilts Here</div>
       </div>
       <div id="footer">Footer</div>
    </div>
       
    </body>
    </html>
    Any help would be great, im tryin to learn this css layout deal, not as easy as i thought it would be. but i know its really powerful.

    Thanks in advance
    KurveMedia

  • #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
    Why were you floating everything? That was your main problem in Firefox.
    Try this
    Code:
    * {
     padding: 0;
     margin: 0; 
    }
    body {
     font-family: Arial, Helvetica, sans-serif;
     color: #666666;
     font-size: 12px;
     background-color:#036;
    }
    #wrapper {
     width: 770px;
     margin: auto;
     background-color:#FFF;
     border-left:1px solid #666666;
     border-right:1px solid #666666;
    }
    #header {
     border: 1px solid #ccc;
     margin: 5px;
     height: 70px;
     padding: 10px;
     background-color: #C9C9BE;
    }
    #navbar {
     border: 1px solid #ccc;
     margin: 0 5px 5px 5px;
     padding: 4px;
     background-color: #A3A38F;
    }
    #centercolumn {
     margin: 0 5px 5px 5px;
     padding: 0px;
     min-height:300px;
    }
    * html #centercolumn {height:300px} /* IE Min-Height Hack */ 
    
    #footer {
     background-color: #A3A38F;
     margin: 0 5px 5px 5px;
     padding: 4px;
    }
    
    #google{
    background-color:#069;
    height:62px;
    }
    
    #welcome{
    background-color:#999;
    padding:0 0.5em 0.5em 0.5em;
    }
    
    #latestnews{
    background-color:#333;
    padding:0 0.5em 0.5em 0.5em;
    }
    
    #pointsstanding{
    background-color:#0CF;
    padding:0 0.5em 0.5em 0.5em;
    }
    
    #raceresults{
    background-color:#39F;
    padding:0 0.5em 0.5em 0.5em;
    }
    A div will expand to fit its containing elements width.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    May 2006
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Aerospace_Eng_

    thanks for the help works perfect.

    KurveMedia


  •  

    Posting Permissions

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