CSS Forum

**silverglade** · 03:23 PM

i just posted a long message, but found (kind of ) a solution to my problems so i edited it. i will post again if i have problems with it, im trying to fix it now. basically, the floated divs are going all over the place and im having a hard time learning to position them in relation to eachother , and inside eachother. thanks. derek

**silverglade** · 03:48 PM

ok im lost now. my page looks good in dreamweaver and my code seems good. i put the floated elements in the fix css for IE6, and the page still looks wrong. any help GREATLY appreciated again. im trying to get 6 images on the left page, and text scroll on the right. of course, it looks good in firefox, but in internet explorer again!!!! its bad!!! thank you. derek

here is the page

http://derekvanderven.com/flower_events/testimonials.htm

here is the code and html for the page. i made the style local, i couldnt find a better way when its page specific.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<link href="flowers.css" rel="stylesheet" type="text/css">
<html xmlns="http://www.w3.org/1999/xhtml"><style type="text/css">
.style1 {color: #666666}

 div.testimonials
  {
  margin: 2px;
  /*border: 1px solid #0000ff;*/
  height: 122px;
  width: 80px;
  float: left; 
  text-align: center;
  
  }  

#testimonial_block {
    float: left;
    width: 260px;
    height: 325px;
    margin-top: 80px;
    margin-left: 80px;
    }
    
    #right_block {
    float: right;
    width: 275px;
    height: 300px;
    margin-right: 70px;
    margin-top: 80px;
    overflow: scroll;
    
    }
    #testimonial_header {
    margin: 0 auto 0 auto;
    width: 200px;
    height: 30px;
    text-align: center;
     padding-top: 10px;
     ;
     
    }
.style3 {font-style: italic; font-size: x-large;}
</style><head>
<!--[if lt IE 7]>
<link href="iefixes.css" rel="stylesheet" type="text/css" /> <![endif]--> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>flower events home</title>
</head>

<body>

    <div id= "container"> 
    <div id= "navigation">  
          
          <!-- START OF DROPDOWN MENU -->
          
          <ul id="nav">
                   <li class="current"><a href="#" title="bouquets">Bouquets</a>    <!-- navigation headers -->
                
                <ul class="sub">
         <li><a href="bouquets/cascading.html" title="cascading">Cascading</a></li>
         <li><a href="bouquets/presentation.html" title="presentation">Presentation</a></li>
         <li><a href="bouquets/blue_white.html" title="blue & white ">Round-blue &amp; white</a></li>
         <li><a href="bouquets/fall.html" title="fall">Fall</a></li>
         <li><a href="bouquets/green_white.html" title="green_white">Green and White</a></li>
         <li><a href="bouquets/lavender_purple.html" title="lavender and purple">Lavender &amp; Purple</a></li>
         <li><a href="bouquets/mixed.html" title="mixed">Mixed</a></li>
         <li><a href="bouquets/pastel.html" title="pastel">Pastel</a></li>
         <li><a href="bouquets/pink.html" title="pink">Pink</a></li>
         <li><a href="bouquets/red.html" title="red">Red</a></li>
         <li><a href="bouquets/red_white.html" title="red & white">Red &amp; White</a></li>
         <li><a href="bouquets/white.html" title="white">White</a></li>
         <li><a href="bouquets/yellow.html" title="yellow">Yellow</a></li>
      </ul>
      </li>
         
        <li class="current"><a href="#" title="personal flowers">Personal</a>    <!-- navigation headers -->
                
                <ul class="sub">
         <li><a href="personal/boutonnieres.html" title="boutonnieres">Boutonnieres</a></li>
         <li><a href="personal/corsages.html" title="corsages">Corsages</a></li>
         <li><a href="personal/pomanders.html" title="pomanders ">Pomanders</a></li>
         <li><a href="personal/tussie_mussies.html" title="tussie-mussies">Tussie_Mussies</a></li>
         <li><a href="personal/flower_girl.html" title="flower girl and ring bearer">Flower Girl and Ring Bearer</a></li>
      </ul>
      </li>
      
      
      <li class="current"><a href="#" title="ceremony">Ceremony</a>    <!-- navigation headers -->
                
                <ul class="sub">
         <li><a href="ceremony/ceremony_decor.html" title="ceremony decor">Ceremony Decor</a></li>
         <li><a href="ceremony/arches.html" title="arches">Arches</a></li>
         <li><a href="ceremony/huppas.html" title="huppas ">Huppas</a></li>
         <li><a href="ceremony/gazebos.html" title="gazebos">Gazebos</a></li>
         <li><a href="ceremony/church_decor.html" title="church decor">Church Decor</a></li>
         <li><a href="ceremony/chairs_pews.html" title="Chairs and Pews">Chairs &amp; Pews</a></li>
      </ul>
      </li>
      
      
      <li class="current"><a href="#" title="reception">Reception</a>    <!-- navigation headers -->
                
                <ul class="sub">
         <li><a href="reception/centerpieces.html" title="centerpieces">Centerpieces</a></li>
         <li><a href="reception/high.html" title="high">High</a></li>
         <li><a href="reception/low.html" title="low">Low</a></li>
         <li><a href="reception//cocktail_hour.html" title="cocktail hour">Cocktail Hour</a></li>
         <li><a href="reception//place_card_table.html" title="place card table">Place Card Table</a></li>
         <li><a href="reception/sweetheart_table.html" title="sweetheart table">Sweetheart Table</a></li>
         <li><a href="reception/cake_decor.html" title="cake decor">Cake Decor</a></li>
      </ul>
      </li>
      
      
      <li class="current"><a href="#" title="rentals">Rentals</a>    <!-- navigation headers -->
                
                <ul class="sub">
         <li><a href="rentals/arches.html" title="arches">Arches</a></li>
         <li><a href="rentals/huppas.html" title="huppas">Huppas</a></li>
         <li><a href="rentals/candelabras_stands.html" title="candelabras & Stands">Candelabras &amp Stands</a></li>
         <li><a href="rentals/columns_colonnades.html" title="columns & colonnades">Columns &amp Colonnades</a></li>
      </ul>
      </li>
      
      <li class="current"><a href="testimonials.html" title="testimonials">Testimonials</a>    <!-- navigation headers -->
      </li>
      
      <li class="current"><a href="contact.html" title="contact us">Contact Us</a>    <!-- navigation headers -->
          </li>
       </ul>    <!--end of nav--><!-- END OF DROPDOWN MENU-->
          </div> <!--end of navigation-->
        
        
        <div id="homelink"><a href="home.html"><img src="home_link.gif" border="0" /></a> </div>
        
       
        <div id= "testimonial_block"> 
         <div class="style3" id="testimonial_header">Testimonials</div>
         <div class ="testimonials"><img src="testimonials/images/t1.gif" width="79" height="116" /> </div>
         <div class ="testimonials"><img src="testimonials/images/t2.gif" width="81" height="120" /> </div>
         <div class ="testimonials"><img src="testimonials/images/t3.gif" width="78" height="116" /> </div>
         <div class ="testimonials"><img src="testimonials/images/t4.gif" width="79" height="115" /></div>
         <div class ="testimonials"><img src="testimonials/images/t5.gif" width="78" height="119" /></div>
         <div class ="testimonials"><img src="testimonials/images/t6.gif" width="78" height="120" /></div>
          
      </div> <!-- end testimonial block-->
      
       <div id= "right_block">text goes on the right page</div>
      <!-- end flashblock div -->
      <div class="style1" id="footer"> Website Design by Derekvanderven.com &copy; 2009</div>
</div> 
<!--end of container-->
        </body>
</html>

l

here is the IE6 fix CSS.

Code:

@charset "utf-8";
/* CSS Document */

/* fixed floats for internet explorer 6*/

#right_block, #testimonial_header, #testimonial_block, div.testimonials, #local_footer, div.desc_wide, #footer, #scrolltextblock, #flashblock, #contentblock, #img_container, #textblock{display: inline;}

**silverglade** · 08:54 AM

awesome! i found a fix on the net. i added overflow: hidden; to the div.testimonials., and the images stayed. i also fixed the header to stay centered with margin: auto. sorry for all the posts. derek