SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    derrrp
    Join Date
    Aug 2006
    Location
    earth
    Posts
    923
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Margins and Floats question

    I have two divs within the page that are giving me problems.

    The first is the #QVS div. It contains floated elements. Does that mess up the margins for everything after? The bottom margin is not applying to this div.

    So I try to give the next div, #catalog, a top margin, but it doesn't push it down.

    It looks like it's supposed to in IE7, but Opera and FF aren't budging.

    Also, notice the differences in the positioning of the navigation at the top. I can't get this straightened out either.

    Everything is validating, btw.

    Here's the page.

    XHTML:
    HTML Code:
    <body>
    <!-- PAGE WRAPPER -->
    <div id="pagewrapper">
    
    <!-- HEADER DIV -->
    <div id="header">
      <div id="headerContent">
      </div>
    </div>
    <!-- END HEADER DIV -->
    
    <!-- CONTENT DIV -->
    <div id="contentwrapper">
    
    <!-- NAVIGATION DIV -->
    <div id="navigation">
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">FAQ</a></li>
    <li><a href="#">Testimonials</a></li>
    <li><a href="#">Contact Us</a></li>
    </ul>
    <div class="clearer"></div>
    </div>
    <!-- END NAVIGATION DIV -->
    
    <!-- CONTENT DIV -->
    <div id="content">
    <h1 class="titleh1">Welcome to Chairs by Design</h1>
      
      <!-- HOME IMG -->
      <div id="homeimg">
      <img src="images/chairs.jpg" alt="Chairs by Design" />
      </div>
      <!-- END HOME IMG -->
    <p class="front">
    Chairs by Design is your direct link to the finest Italian Chair manufacturers. Now you have access to many of the latest world renowned chair designs before they reach the stores; enabling you to purchase the highest quality craftmanship at a fraction of the retail price.
    </p>
      <!-- QVS DIV -->
      <div id="QVS">
    <ul>
    <li id="quality"><a href="#" title="Quality">Quality</a></li>
    <li id="value"><a href="#" title="Value">Value</a></li>
    <li id="service"><a href="#" title="Service">Service</a></li>
    </ul>
      </div>
      <!-- END QVS DIV -->
      
      <!-- CATALOG DIV -->
      <div id="catalog">
    <p>
    <a href="#" title="Browse Catalog">Browse Catalog</a>
    </p>
      </div>
      <!-- CATALOG DIV -->
    
    </div>
    <!-- END CONTENT DIV -->
    
    </div>
    <!-- END CONTENTWRAPPER DIV -->
    
    <!-- FOOTER DIV -->
      <div id="footer">
        <div id="footnav">
          <p class="footnavText"><a href="#" title="Home">Home</a> | <a href="#" title="About Us">About Us</a> | <a href="#" title="FAQ">FAQ</a> | <a href="#" title="Testimonials">Testimonials</a> | <a href="#" title="Contact Us">Contact Us</a> | <a href="#" title="Terms and Conditions">Terms and Conditions</a> | <a href="#" title="Sitemap">Sitemap</a>
          </p>
        </div>
      </div>
    <!-- END FOOTER DIV -->
    
    </div><!-- END PAGE WRAPPER DIV -->
    </body>
    </html>
    CSS:

    Code:
    /* CSS Document */
    
    * {
    margin: 0px;
    padding: 0px;
    }
    
    html {
    margin: 0px;
    padding:  0px;
    }
    
    body {
    margin: 0px;
    padding: 0px;
    text-align: center;
    background: #FFF;
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    font-size: 76%;
    color: #000066;
    }
    
    .clearer { 
    clear: both; 
    font-size: 1px;
    padding: 0px;
    margin: 0px;
    }
    
    #pagewrapper {
    width: 760px;
    margin: 5px auto;
    padding: 0px;
    background: #FFF;
    color: #000066;
    text-align: left;
    
    }
    
    #header {
    width: 760px;
    height: 80px;
    margin: 0px;
    padding: 0px;
    background-image: url(../images/headerBG.jpg);
    background-repeat: repeat-x;
    }
    
    #headerContent {
    width: 439px;
    height: 80px;
    margin: 0px;
    padding: 0px;
    background-image: url(../images/header.jpg);
    background-repeat: no-repeat;
    }
    
    #contentwrapper {
    width: 760px;
    position: relative;
    padding: 0px;
    margin: 0px;
    }
    
    #navigation {
    width: 379px;
    padding: 0px;
    margin-left: 375px;
    /*position: relative;
    top: 0px;
    left: 405px;*/
    }
    #navigation ul {
    padding: 0px;
    margin: 0px;
    display: inline;
    }
    #navigation ul li {
    list-style-type: none;
    display: inline;
    padding: 0px;
    margin: 0px;
    }
    #navigation ul li a {
    display: block;
    float: left;
    border: 1px solid #287FC4;
    color: #FFF;
    background: #000066;
    margin: 0px;
    padding: 5px 8px;
    font-family: Tahoma, sans-serif;
    text-decoration: none;
    letter-spacing: 1.5px;
    text-align: center;
    }
    #navigation ul li a:hover {
    display: block;
    float: left;
    border: 1px solid #287FC4;
    color: #000066;
    background: #AEC8DC;
    margin: 0px;
    padding: 5px 8px;
    font-family: Tahoma, sans-serif;
    text-decoration: none;
    letter-spacing: 1.5px;
    text-align: center;
    }
    
    #content {
    width: 760px;
    }
    .titleh1 {
    color: #000066;
    font-family: Tahoma, sans-serif;
    font-size: 1.25em;
    letter-spacing: 2.5px;
    word-spacing: 2px;
    padding-top: 20px;
    padding-bottom: 1px;
    margin: 0px;
    border-bottom: 1px solid #000066;
    }
    
    /* FRONT PAGE IMAGE */
    
    #homeimg {
    width: 100%;
    margin-top: 36px;
    margin-bottom: 30px;
    text-align: center;
    }
    
    /* FRONT PAGE PARAGRAPH */
    p.front {
    display: block;
    width: 92%;
    margin: 0 auto;
    font-size: 1.1em;
    line-height: 20px;
    word-spacing: 3px;
    text-align: center;
    }
    
    /* QUALITY, VALUE AND SERVICE TABS */
    
    #QVS {
    width: 213px;
    padding: 0px;
    margin: 20px auto;
    }
    #QVS li {
    display: inline;
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    }
    #QVS li a{
    display: block;
    width: 61px;
    height: 20px;
    float: left;
    margin-right: 10px;
    text-indent: -1000px;
    }
    #quality a{
    background-image: url(../images/quality.jpg);
    background-repeat: no-repeat;
    }
    #value a{
    background-image: url(../images/value.jpg);
    background-repeat: no-repeat;
    }
    #service a{
    background-image: url(../images/service.jpg);
    background-repeat: no-repeat;
    }
    
    /* BROWSE CATALOG TAB */
    
    #catalog {
    clear: both;
    width: 126px;
    height: 18px;
    margin: 35px auto;
    }
    #catalog a{
    display: block;
    width: 126px;
    height: 18px;
    background-image: url(../images/catalog.jpg);
    background-repeat: no-repeat;
    text-indent: -1000px;
    margin: 0px;
    padding: 0px;
    }
    
    /* FOOTER */
    
    #footer{
    border-top: 1px solid #000066;
    text-align: center;
    margin: 0px;
    padding: 5px;
    font-size: .9em;
    word-spacing: 2px;
    letter-spacing: 1px;
    color: #000066;
    }
    #footer a{
    text-decoration: none;
    color: #000066;
    }
    #footer a:hover{
    text-decoration: underline;
    color: #000066;
    }
    Could someone let me in on what I'm missing?
    Thanks!
    No, I REALLY dislike having to use Joomla.

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For starters (congrats on the valid code), you have the universal selector which is stripping the margins and padding from virtually every element in your document, so there's no need to re-declare all of that in your document's other selectors. As for your problem, I think I see it but I'm on a library computer right now and will have to wait until I get home to test it for myself.

    Keep in mind there are three people ahead of you right now, so I'll tackle yours once I'm done with them .

    Or someone can beat me to the proverbial punch.

  3. #3
    derrrp
    Join Date
    Aug 2006
    Location
    earth
    Posts
    923
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No problem, and thanks for the margins and padding tip...I was under the assumption it needed to be declared for all selectors.
    No, I REALLY dislike having to use Joomla.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    Your qvs element contains only floated elements therefore it contains nothing and its height is zero. A 20px bottom margin therefore would not reach below the floated elements so it has no effect. You need to clear the floats.

    A quick fix is to add overflow:hidden to the qvs element.

    Code:
    #QVS {
    width: 213px;
    padding: 0px;
    margin: 20px auto;
    overflow:hidden;
    }
    However read the faq on floats and the section on clearing for more reliable methods.

    Once the float is cleared then the margins will take effect as expected. You should note that floats only repel foreground content and do not repel backgrounds, borders and margins on static content which will all slide under the floated content. Margins between floats themselves however never collapse.

    Hope that helps.

  5. #5
    derrrp
    Join Date
    Aug 2006
    Location
    earth
    Posts
    923
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul!

    ...now for that navigation problem. Same deal because of the floats?
    No, I REALLY dislike having to use Joomla.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    The navigation problem is because you have set the letter spacing at 1.5px and there is no such thing. Firefox rounds it up to2px and other browers round it down to 1px.

    Set it 1 px or 2px and it will be the same
    Code:
    #navigation ul li a {
    display: block;
    float: left;
    border: 1px solid #287FC4;
    color: #FFF;
    background: #000066;
    margin: 0px;
    padding: 5px 8px;
    font-family: Tahoma, sans-serif;
    text-decoration: none;
    letter-spacing: 1px;
    text-align: center;
    }

  7. #7
    derrrp
    Join Date
    Aug 2006
    Location
    earth
    Posts
    923
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Son of Suckerfish Dropdowns

    Thanks so much Paul.

    Oh I can't wait for the day a half pixel exists.

    Another question (for anyone)... same site, I have applied the son of suckerfish drop downs under the QVS tabs (Quality, Value, Service). It looks fine in all the browsers I want, except IE7 where it removes the list bullets.

    How do I get them to stay?
    No, I REALLY dislike having to use Joomla.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    Its a bug in IE when you float a list its display is changed to display:block and it should be display:list-item (or something like that) and then it is no longer a list and the bullet won't appear.

    If you stop it floating then the bullets will appear.
    Code:
     #qvsnav li ul li {
     list-style-type: disc;
     width: 100px;
     padding: 3px;
     float:none;
     }
    Otherwise if you want it to remain as a float then you will have to use a background image for the bullet instead.


Bookmarks

Posting Permissions

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