SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast cowboystyle's Avatar
    Join Date
    Jun 2005
    Location
    Binghamton, NY or New Windsor, NY
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    mozilla image gallery problem

    works fine in ie (thats a first...) broken in mozilla:

    check out the site: Arbor Day 2005

    here is gallery.css:
    Code:
    .gallery {margin:5px 0 0 5px;}
    
    .thumbnail {
    	float:left;
    	width:60px;
    	border:1px solid #9C9;
    	margin:0 15px 15px 0;
    	padding:5px;
    }
    
    .gallery img {border-style:none;}
    
    .clearboth {clear:both;}
    here is the html for the "gallery":
    HTML Code:
    		<h2>Photo Gallery</h2>
    <div class="gallery">
    
    <div class="thumbnail"><a href="arborday2005/01.jpg">
    	<img src="arborday2005/01t.jpg" alt="Arbor Day 2005 Thumbnail"/>
    </a></div>
    
    <div class="thumbnail"><a href="arborday2005/02.jpg">
    	<img src="arborday2005/02t.jpg" alt="Arbor Day 2005 Thumbnail"/>
    </a></div>
    
    <div class="thumbnail"><a href="arborday2005/03.jpg">
    	<img src="arborday2005/03t.jpg" alt="Arbor Day 2005 Thumbnail"/>
    </a></div>
    
    <div class="clearboth"></div>
    
    <div class="thumbnail"><a href="arborday2005/04.jpg">
    	<img src="arborday2005/04t.jpg" alt="Arbor Day 2005 Thumbnail"/>
    </a></div>
    
    <div class="thumbnail"><a href="arborday2005/05.jpg">
    	<img src="arborday2005/05t.jpg" alt="Arbor Day 2005 Thumbnail"/>
    </a></div>
    
    <div class="thumbnail"><a href="arborday2005/06.jpg">
    	<img src="arborday2005/06t.jpg" alt="Arbor Day 2005 Thumbnail"/>
    </a></div>
    
    <div class="clearboth"></div>
    
    <div class="thumbnail"><a href="arborday2005/07.jpg">
    	<img src="arborday2005/07t.jpg" alt="Arbor Day 2005 Thumbnail"/>
    </a></div>
    
    <div class="thumbnail"><a href="arborday2005/08.jpg">
    	<img src="arborday2005/08t.jpg" alt="Arbor Day 2005 Thumbnail"/>
    </a></div>
    
    <div class="clearboth"></div>
    
    </div>
    thanks in advance!

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Those images are 100px wide. IE is wrongly expending their containers.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ...so change this :
    Code:
    .thumbnail { 
    float:left; 
    width:60px; 
    border:1px solid #9C9; 
    margin:0 15px 15px 0; 
    padding:5px; 
    }
    to this
    Code:
    .thumbnail { 
    float:left; 
    width:100px; 
    border:1px solid #9C9; 
    margin:0 15px 15px 0; 
    padding:5px; 
    }
    and it'll look perfect.


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
  •