SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    double-margin, 3px jog, or something else? (IE6)

    Greetings,

    I have floated a list of thumbnail images within a DIV on my page. I applied some right padding to each LI to get 4 images to fill the declared width of the containing div (and stripped that padding from the last LI in each horizontal row so it doesn't get pushed down to the next line) and then a new row is populated with images.

    This is working on FF/Safari on the Mac and FF/IE7 on the PC.... but in IE6 that fourth image is getting pushed down to the next line. So I read through Paul's great FAQ about "all you neeed to know about Floats". I've applied the display:inline technique to the floated items to try to get IE to remove the double-margin (originally i used margins to get spacing between the LI, but then changed to padding to try to fix the 3px jog... see below).

    I also began to apply the 3 steps to remove 3px jog of floated items, but in Paul's example it's ONE floated div next to one static div... i've got several LI which are all floated, so I'm not sure how to apply some of those techniques.

    Would someone be willing to look at this example and compare what you see in IE6 to any of the other browsers mentioned on any of the platforms? I know it's a sizing issue in that the #mainContent div is declared at 691px and my images+padding come up to very close to that so that the outside edges of rows of images mostly line up vertically with the nav bar and header image above.

    My HTML code:
    HTML Code:
     <!-- START MAIN CONTENT -->
            <div id="mainContent">
            	<ul id="gallery">
                	<li><a href="../images/large/cabin_2door.jpg" rel="lightbox[images]" title="Cabin with new chinking"><img src="../images/thumbs/cabin_2door.jpg" width="150" height="150" alt="" /></a><h3>Chinking</h3></li>
                    <li><a href="../images/large/restoration_before.jpg" rel="lightbox[images]" title="Before Log Restoration"><img src="../images/thumbs/restoration_before.jpg" width="150" height="150" alt="" /></a><h3>Before Restoration</h3></li>
                    <li><a href="../images/large/restoration_after.jpg" rel="lightbox[images]" title="After Log Restoration"><img src="../images/thumbs/restoration_after.jpg" width="150" height="150" alt="" /></a><h3>After Restoration</h3></li>
                    <li class="lastPic"><a href="../images/large/new_home_1.jpg" rel="lightbox[images]" title="Custom Home Chinking"><img src="../images/thumbs/new_home_1.jpg" width="150" height="150" alt="" /></a><h3>Custom Home Chinking</h3></li>
                    <li><a href="../images/large/blasting_before.jpg" rel="lightbox[images]" title="Before Corn Cob Blasting"><img src="../images/thumbs/blasting_before.jpg" width="150" height="150" alt="" /></a><h3>Before Blasting</h3></li>
                    <li><a href="../images/large/blasting_during.jpg" rel="lightbox[images]" title="During Corn Cob Blasting"><img src="../images/thumbs/blasting_during.jpg" width="150" height="150" alt="" /></a><h3>During Blasting</h3></li>
                    <li><a href="../images/large/blasting_after.jpg" rel="lightbox[images]" title="After Corn Cob Blasting"><img src="../images/thumbs/blasting_after.jpg" width="150" height="150" alt="" /></a><h3>After Blasting</h3></li>
                    <li class="lastPic"><a href="../images/large/new_home_2.jpg" rel="lightbox[images]" title="Custom Home Chinking"><img src="../images/thumbs/new_home_2.jpg" width="150" height="150" alt="" /></a><h3>Custom Home Chinking</h3></li>
                </ul>        	                    	
            </div>
            <!-- END MAIN CONTENT -->
    And the offending CSS:
    Code:
    #mainContent {
    	width: 691px;
    	font-size: 1.2em;
    	line-height: 1.6;
    	text-align: left;
    	margin: 0 auto;
    
    }
    
    #gallery li {
    	float: left;
    	list-style: none;
    	width: 150px;
    	padding: 0 30px 30px 0;
    	display: inline; /* to fix IE double margin on floats */
    
    }
    
    * html #gallery li {margin-right: -3px;} /* step 1 of eliminating 3px jog */
    
    #gallery li.lastPic { padding-right: 0; }
    
    #gallery li h3 { font-size: 0.8em; }
    Thank you for any ideas about reeling in that fourth image in each row! I appreciate your time.

    Pedro

  2. #2
    SitePoint Zealot rhlowe's Avatar
    Join Date
    Sep 2006
    Location
    San Diego
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    in your stylesheet 'iestyles.css' or if you prefer, using the start hack (please don't) add the rule

    Code:
    #gallery li {padding-right:28px;}
    San Diego Freelance Web Development Contractor
    Great Taste, no Filler. Now with no Trans Fat!

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    rhlowe,

    Thanks, I added that declaration in my iestyles.css stylesheet and I realize that's feeding IE (both 6 and 7) a slightly smalller padding on the right side of the images. I'm curious if you know which problem IE6 was having? Obviously it was addding more padding than I was declaring, but due to which bug?

    Thanks for your help!
    Pedro

  4. #4
    SitePoint Zealot rhlowe's Avatar
    Join Date
    Sep 2006
    Location
    San Diego
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I couldn't tell you exactly which issue it was having, just how to fix it.

    Also on my ride home, I realized that you would likely have that problem with it affecting IE, so instead of this:
    Code:
    #gallery li {padding-right:28px;}

    I would use

    Code:
    #gallery li 
    {
    padding: 0 0 28px 30px;
    /* Whatever additional rules you have*/
    }
    * > #gallery li 
    {
    padding-right:30px; /* Adjusts the padding to the correct amount for IE7 and Firefox*/
    }
    You can of course leave out the comments, I just put those there for you!
    San Diego Freelance Web Development Contractor
    Great Taste, no Filler. Now with no Trans Fat!


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
  •