Ie6 Bug With Layout

[pbifaro]

I need help fixing my site so it looks correct in IE6. In IE6 I have some images that fall to the bottom. I thought about doing [if then] code for just IE6 because it looks correct in all other browsers but I'm not sure how to apply this method. Any help would be greatly appreciated.Here is the link to my site; http://www.cleanwaterguys.com/here is my CSS@charset "utf-8";body { background-color: #EEEEE4; color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; line-height: 17px;}h2 { font-size: 15px; line-height: 10px;}h2.blue { color: #00427B;}.grn_hdr { font-size: 12px; font-weight: bold; color: #54A403; text-align: left;}.red_form_hdr { font-size: 12px; font-weight: bold; color: #990000;}.blk_hdr_sm { font-size: 12px; font-weight: bold; color: #000000; text-align: left;}a:link { font-size: 12px; font-weight: bold; color: #00427B; text-decoration: underline;}a:visited { font-size: 12px; font-weight: bold; color: #00427b; text-decoration: underline;}a:hover { font-size: 12px; font-weight: bold; color: #54A403; text-decoration: underline;}#wrap { background: url(blue_white_bkgd.gif) repeat-y 50% 0%; margin: 0px auto; padding: 0px; width: 800px;}#wrappd { background: url(blue_bkgd.gif) repeat-y 50% 0%; margin: 0px auto; padding: 0px; width: 800px;}#bot_pics img { background-color: #CCE6FF; margin: 0px; float: left; width: 780px; padding-top: 15px; padding-right: 10px; padding-bottom: 15px; padding-left: 10px;}#wrap #whitebkgd { background-color: #FFFFFF; margin: 0px; padding: 0px; width: 800px;}.blk_hdr_sm { font-size: 11px; font-weight: bold; color: #000000;}#main_body { margin: 0px; padding: 20px; width: 760px;}#prdbrochure_main_content { background: url(blue_bkgd.gif) repeat-y 50% 0%; padding: 0px; width: 800px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto;}#top_prd_bro { margin: 0px; padding: 15px; background-color: #FFFFFF;}#bot_prd_bro { margin: 0px; padding: 15px; background-color: #CCE6FF;}#l_prod_bro { margin: 0px; float: left; width: 500px; padding-top: 25px; padding-right: 0px; padding-bottom: 25px; padding-left: 0px;}#r_prod_bro { margin: 0px; float: right; width: 250px; padding-top: 35px; padding-right: 0px; padding-bottom: 25px; padding-left: 0px;}#prd_content { background-color: #CCE6FF; width: 770px; padding: 15px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;}.med_blk_hdr { font-size: 12px; font-weight: bold; color: #000000;}#product_container_left { float: left; width: 500px; padding-top: 15px; padding-right: 10px; padding-bottom: 10px; padding-left: 15px;}#prod_cont_right { margin: 0px; float: right; width: 250px; padding-top: 15px; padding-right: 15px; padding-bottom: 0px; padding-left: 0px;}#prd_content { background-color: #CCE6FF; margin: 0px; padding: 0px; width: 800px; height: 750px;}#header { margin: 0px auto; padding: 0px; width: 800px;}#content { margin: 0px; padding: 0px; float: left; width: 370px; background: url(file:///BIFARO/reply/none);}#left_top { background: #D9DAD5; margin: 0px; padding: 15px; width: 340px; width'px !important; width: 338px;}#left_bot { margin: 0px; padding: 15px; width: 340px; width'px !important; width: 338px;}#right { margin: 0px; padding: 0px; float: right; width: 430px;}#bbb_copy { margin: 0px; float: right; width: 400px; padding-top: 0px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px;}#footer { clear: both; background: #000000; width: 770px; margin: 0px; padding: 15px; color: white;}.bot_nav { font-size: 12px; line-height: 20px; font-weight: 600; color: #FFFFFF;}a.bot_nav:link { font-size: 12px; line-height: 20px; font-weight: 600; color: #FFFFFF; text-decoration: underline;}a.bot_nav:visited { font-size: 12px; line-height: 20px; font-weight: 600; color: #FFFFFF; text-decoration: underline;}a.bot_nav:hover { font-size: 12px; line-height: 20px; font-weight: 600; color: #54A403; text-decoration: underline;}.brochure_list { line-height: 17px; font-weight: bold;}.table_text { font-size: 11px; color: #000000;}#about_us_content { background-color: #D9DAD5; margin: 0px; padding: 15px; width: 770px;}

[dsonesuk]

Almost there! i don't know if you changed the margins for left_top and left_bot cause this seems to have corrected itself width: 340px works for IE6 and no longer need the !important to correct it?????all you have to do is assign a float: right to #image to correct it for IE6 (see below for amendments required) i have tested it, and it is positioned as it should be, but don't know if it has thrown any problems in the other browser (i very much doubt it would).#left_top {background: #D9DAD5;margin: 0px;padding: 15px;width: 340px;}#left_bot {margin: 0px;padding: 15px;width: 340px;}#images {float: right;}and this should fix the problem.Note i have'nt checked this with FF, IE7 or opera as i'm dont have permission to install these to do a proper test, im stuck with crappy IE6 only at the moment.

[dsonesuk]

There was a problem with Firefox only surprisingly (it decided take on the IE6 problem ie flash/images content centred at bottom of page) but was fixed by setting the width of #images to 430px;#images { float: right; width: 430px;}