PDA

View Full Version : div layout problem


silverglade
01-20-2009, 09:46 PM
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.html

here is the html and css

<!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>


and here is the ie6 fix css file

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

/* fixed floats for internet explorer 6*/

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