SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: fluid boxes in FireFox

  1. #1
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    fluid boxes in FireFox

    Hi, Trying to make a fluid photo gallery in a left-floated container,all seems well in all but firefox,any help.
    thanks.
    Geoff
    http://www.jakebanks.com/fluidbox/#

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>fluidGallery</title>
    <style type="text/css">
    
    
    #wrapper {
    border:1px solid #000;
    width:55%;
    float:left;
    }
    
    .inlineBox {
    background-color:#FF0000;
    margin:0px;
    display: inline-block;
    }
    
    
    div.img
       {
       margin:2px 2px 10px 10px;
       padding:0 2px 0 2px;
       border: solid 2px #000;
       -moz-border-radius: 5px;
       -webkit-border-radius: 5px;
        border-radius: 5px;
       height:auto;
       width:auto;
       float:left;
       text-align:center;
       }
       
     div.img img
       {
       display:inline;
       margin:3px auto 0 auto;
       border:2px solid  #999;
       -moz-border-radius: 5px;
       -webkit-border-radius: 5px;
        border-radius: 5px;
       }
     
     div.desc
       {
       text-align:center;
       font-weight:normal;
       width:120px;
       margin:2px;
       }
      
     
    </style>
    
    </head>
    
    <body>
    
    <div id="wrapper">
      
         <div class="box"><div class="img">
               <a target="_blank" href="#"><img src="house1.jpeg"  width="120" height="120"/> </a>
               <div class="desc">Text Text Text Text Text TextText Text</div>
           </div><!----end img---->
           </div><!----end box---->
     <div class="box"><div class="img">
               <a target="_blank" href="#"><img src="house1.jpeg"  width="120" height="120"/> </a>
               <div class="desc">Text Text Text Text Text TextText Text</div>
           </div><!----end img---->
           </div><!----end box---->
    	   
    	   <div class="box"><div class="img">
               <a target="_blank" href="#"><img src="house1.jpeg"  width="120" height="120"/> </a>
               <div class="desc">Text Text Text Text Text TextText Text</div>
           </div><!----end img---->
           </div><!----end box---->
    	   
    	   <div class="box"><div class="img">
               <a target="_blank" href="#"><img src="house1.jpeg"  width="120" height="120"/> </a>
               <div class="desc">Text Text Text Text Text TextText Text</div>
           </div><!----end img---->
           </div><!----end box---->
    	   
    	   <div class="box"><div class="img">
               <a target="_blank" href="#"><img src="house1.jpeg"  width="120" height="120"/></a>
               <div class="desc">Text Text Text Text Text TextText Text</div>
           </div><!----end img---->
           </div><!----end box---->
    	   
    	   <div class="box"><div class="img">
               <a target="_blank" href="#"><img src="house1.jpeg"  width="120" height="120"/> </a>
               <div class="desc">Text Text Text Text Text TextText Text</div>
           </div><!----end img---->
           </div><!----end box---->
    	   
    	   <div class="box"><div class="img">
               <a target="_blank" href="#"><img src="house1.jpeg"  width="120" height="120"/> </a>
               <div class="desc">Text Text Text Text Text TextText Text</div>
           </div><!----end img---->
           </div><!----end box---->
    	   
    	   <div class="box"><div class="img">
               <a target="_blank" href="#"><img src="house1.jpeg"  width="120" height="120"/> </a>
               <div class="desc">Text Text Text Text Text TextText Text</div>
           </div><!----end img---->
           </div><!----end box---->
    	   
    	   <div class="box"><div class="img">
               <a target="_blank" href="#"><img src="house1.jpeg"  width="120" height="120"/> </a>
               <div class="desc">Text Text Text Text Text TextText Text</div>
           </div><!----end img---->
           </div><!----end box---->
     
     
     
     </div><!----end wrapper---->
     
    		
    	
    
    </body>
    </html>

  2. #2
    It's all Geek to me silver trophybronze trophy
    SitePoint Award Recipient ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, Australia
    Posts
    19,978
    Mentioned
    216 Post(s)
    Tagged
    2 Thread(s)
    Rather than float the image, you are better off doing that to the boxes. But then, rather than floating the boxes, this works better:

    Code:
    .box {display: inline-block; vertical-align: top;}
    Try adding that to your style sheet and see what you think.

    For older versions of IE, you'll need

    Code:
    .box {display: inline}

  3. #3
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Many thanks ,but embarrassingly i used the wrong class, .box should be .inlineBox doh!!!!!.but now is it poss to center the inlineboxes in the floated container .
    thanks again.

    http://www.jakebanks.com/fluidbox/index+1.html

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>fluidGallery</title>
    <style type="text/css">
    
    
    #wrapper {
    border:1px solid #000;
    width:55%;
    float:left;
    }
    
    .inlineBox {
    background-color:#FF0000;
    margin:0 0 2px 0;
    display: inline-block;
    vertical-align: top;
    }
    
    
    div.img
       {
       margin:2px 2px 2px 2px;
       padding:0 2px 0 2px;
       border: solid 2px #000;
       -moz-border-radius: 5px;
       -webkit-border-radius: 5px;
        border-radius: 5px;
       height:auto;
       width:auto;
       float:left;
       text-align:center;
       }
       
     div.img img
       {
       display:inline;
       margin:3px auto 0 auto;
       border:2px solid  #999;
       -moz-border-radius: 5px;
       -webkit-border-radius: 5px;
        border-radius: 5px;
       }
     
     div.desc
       {
       text-align:center;
       font-weight:normal;
       width:120px;
       margin:2px;
       }
      
     
    </style>
    
    </head>
    
    <body>
    
    <div id="wrapper">
      
         <div class="inlineBox"><div class="img">
               <a target="_blank" href="#"><img src="house1.jpeg"  width="120" height="120"/> </a>
               <div class="desc">Text Text Text Text Text TextText Text</div>
           </div><!----end img---->
           </div><!----end inlineBox---->
    	   
    	   <div class="inlineBox"><div class="img">
               <a target="_blank" href="#"><img src="house1.jpeg"  width="120" height="120"/> </a>
               <div class="desc">Text Text Text Text Text TextText Text</div>
           </div><!----end img---->
           </div><!----end inlineBox---->
    	   
    	   <div class="inlineBox"><div class="img">
               <a target="_blank" href="#"><img src="house1.jpeg"  width="120" height="120"/> </a>
               <div class="desc">Text Text Text Text Text TextText Text</div>
           </div><!----end img---->
           </div><!----end inlineBox---->
    	   
    	   <div class="inlineBox"><div class="img">
               <a target="_blank" href="#"><img src="house1.jpeg"  width="120" height="120"/> </a>
               <div class="desc">Text Text Text Text Text TextText Text</div>
           </div><!----end img---->
           </div><!----end inlineBox---->
    	   
    	   <div class="inlineBox"><div class="img">
               <a target="_blank" href="#"><img src="house1.jpeg"  width="120" height="120"/> </a>
               <div class="desc">Text Text Text Text Text TextText Text</div>
           </div><!----end img---->
           </div><!----end inlineBox---->
    	   
    	   <div class="inlineBox"><div class="img">
               <a target="_blank" href="#"><img src="house1.jpeg"  width="120" height="120"/> </a>
               <div class="desc">Text Text Text Text Text TextText Text</div>
           </div><!----end img---->
           </div><!----end inlineBox---->
    	   
    	   
    	   <div class="inlineBox"><div class="img">
               <a target="_blank" href="#"><img src="house1.jpeg"  width="120" height="120"/> </a>
               <div class="desc">Text Text Text Text Text TextText Text</div>
           </div><!----end img---->
           </div><!----end inlineBox ---->
    	   
    	   
    	   <div class="inlineBox"><div class="img">
               <a target="_blank" href="#"><img src="house1.jpeg"  width="120" height="120"/> </a>
               <div class="desc">Text Text Text Text Text TextText Text</div>
           </div><!----end img---->
           </div><!----end inlineBox---->
    	   
    	   <div class="inlineBox"><div class="img">
               <a target="_blank" href="#"><img src="house1.jpeg"  width="120" height="120"/> </a>
               <div class="desc">Text Text Text Text Text TextText Text</div>
           </div><!----end img---->
           </div><!----end inlineBox---->
    	   
    	   
    	   <div class="inlineBox"><div class="img">
               <a target="_blank" href="#"><img src="house1.jpeg"  width="120" height="120"/> </a>
               <div class="desc">Text Text Text Text Text TextText Text</div>
           </div><!----end img---->
           </div><!----end inlineBox---->
    	   
    	   
    	   
    	   <div class="inlineBox"><div class="img">
               <a target="_blank" href="#"><img src="house1.jpeg"  width="120" height="120"/> </a>
               <div class="desc">Text Text Text Text Text TextText Text</div>
           </div><!----end img---->
           </div><!----end inlineBox---->
     
     
     
     
     </div><!----end wrapper---->
     
    		
    	
    
    </body>
    </html>

  4. #4
    It's all Geek to me silver trophybronze trophy
    SitePoint Award Recipient ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, Australia
    Posts
    19,978
    Mentioned
    216 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by geoff-lanz View Post
    is it poss to center the inlineboxes in the floated container
    You could try

    Code:
    #wrapper {
      border: 1px solid #000000;
      float: left;
      width: 55%;
      text-align: center;
    }

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
  •