SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Port Sunlight
    Posts
    815
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Definition Lists

    Hi I am using DL to display an image gallery of sorts. This is my code:

    Code:
     <div id="level1">
     
     <dl class="logos">
     	<dt><img src="_images/skype.gif" /></dt>
     	<dt>Skype</dt>
     </dl>
     
     <dl class="logos">
     	<dt><img src="_images/xten.gif" /></dt>
     	<dt>Xten</dt>
     </dl>
     
     <dl class="logos">
     	<dt><img src="_images/xten.gif" /></dt>
     	<dt>Xten</dt>
     </dl>
     
     <dl class="logos">
     	<dt><img src="_images/xten.gif" /></dt>
     	<dt>Xten</dt>
     </dl>
     
     </div>
     
     <div id="level2">
     
     <dl class="logos">
     	<dt><img src="_images/skype.gif" /></dt>
     	<dt>Skype</dt>
     </dl>
     
     <dl class="logos">
     	<dt><img src="_images/xten.gif" /></dt>
     	<dt>Xten</dt>
     </dl>
     
     <dl class="logos">
     	<dt><img src="_images/xten.gif" /></dt>
     	<dt>Xten</dt>
     </dl>
     
     <dl class="logos">
     	<dt><img src="_images/xten.gif" /></dt>
     	<dt>Xten</dt>
     </dl>
     
     </div>
     
     <div id="level3">
     
     <dl class="logos">
     	<dt><img src="_images/skype.gif" /></dt>
     	<dt>Skype</dt>
     </dl>
      
     </div>
    This is my css

    Code:
     dl.logos {
     	width: 140px;
     	text-align: center;
     	padding: 10px;
     	float: left;
     	margin-right: 1em;
     	}
     	
     .logos dt { font-weight: bold;}
     
     .logos dt img {
     	width: 140px;
     	}
     	
     #level1 {
     	margin: 0x;
     	}
     
     #level2 {
     	padding-top: 20px;
     	clear: both;
     	}
     	
     #level3 {
     	padding-top: 20px;
     	padding-bottom: 20px;
     	clear: both;
     	}
    As you can probably see what I am doing, here is the page if you dont:

    http://www.b2bnative.com/voip/partners.php

    My problem is in FF the grey content bg doesn' t reach the teaser boxes whereas in IE it does. Is this a FF bug?

  2. #2
    SitePoint Evangelist Maujor's Avatar
    Join Date
    Mar 2005
    Location
    Rio de Janeiro - Brazil - South America
    Posts
    409
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Change to: padding-bottom:100px; for #level3
    Mauricio Samy Silva
    http://www.maujor.com/

  3. #3
    SitePoint Zealot Linn Hastur's Avatar
    Join Date
    Jun 2005
    Posts
    190
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by NickToye
    My problem is in FF the grey content bg doesn' t reach the teaser boxes whereas in IE it does. Is this a FF bug?
    I don't think it's a bug: you just have to clear the float after having displaying them.

    So, add "<div style="clear:both;"></div>" after your </div> which closes the level3 in your HTML file, or change/add
    Code:
    #level3 {
    	padding-top: 20px;
    /*	padding-bottom: 20px;*/
    	clear: both;
    	}
    
    #level3:after {
        content: ".";
        display: block; 
        height: 0; 
        clear: both; 
        visibility: hidden;
    }
    in your CSS file.


    L.H.

    J'ai décidé d'être heureux, c'est bon pour la santé !
    I decided to be happy, it is good for health!
    (Voltaire)

  4. #4
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Port Sunlight
    Posts
    815
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, so either will work? I have applied both and have seen that they do work.

    Can you explain to me the second method as it looks quite interesting, are there any benefits?

  5. #5
    SitePoint Zealot Linn Hastur's Avatar
    Join Date
    Jun 2005
    Posts
    190
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by NickToye
    Ok, so either will work? I have applied both and have seen that they do work.

    Can you explain to me the second method as it looks quite interesting, are there any benefits?

    The trick comes from http://www.positioniseverything.net/easyclearing.html.


    I currently have a discussion with all4nerds about this in "clearing float container problem".


    L.H.

    J'ai décidé d'être heureux, c'est bon pour la santé !
    I decided to be happy, it is good for health!
    (Voltaire)


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
  •