float not clearing in dreamweaver

[stevedc]

Hi all,

I worked on a project quite some time ago and eventually handed it off to some one else to develop. However, I'm being brought back into the project and have to make some updates. Even though the homepage (and all other pages) display well, in dreamweaverCS3 (yes I use dreamweaver...) the page looks as though the main body container doesn't float up into the position it should. Instead, if clears the float left side bar. But, in the all major browsers things look fine.

here is the home page

here is what it looks like in dreamweaver.

I don't see any extra or missing closing tags...

This isn't "that" big of a deal, but most of my training is in visual and graphic design, so when I'm working with what I see, it's hard to add things knowing dreamweaver is displaying something different.

The odd thing is that the page looked fine in DW, but once I upgraded to CS3, this happened...perhaps its just a coincidence.

here is the css:

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

#container {
	width: 950px;
	margin: 0 auto;
	text-align: left;
}
#header_container {
	float: left;
	width:630px;
	height:88px;
	background-image: url(../images/heading_tab.png);
	margin-left: 25px;
	background-repeat: no-repeat;
	padding-left: 80px;
}


#header_container a {color:white; text-decoration:none;} 
#header_container a:hover {color:white; text-decoration:none;}
#header_sitemap {
	float: right;
	width:55px;
	height:15px;
	margin-top: 12px;
	padding-left: 10px;
	border-right-width: 1px;
	border-right-style: dotted;
	border-right-color: #FFFFFF;
	margin-bottom: 15px;
}
#header_home {
	float: right;
	width:40px;
	height:15px;
	margin-top: 12px;
	border-right-width: 1px;
	border-right-style: dotted;
	border-right-color: #FFFFFF;
}

#header_contact {
	float: right;
	width:60px;
	height:15px;
	margin-top: 12px;
	padding-left: 10px;
}

#left_blue_bar {
	float: left;
	width:25px;
	height:613px;
	clear: both;
	background-image: url(../images/left_blue_bar.png);
	behavior: url(../iepngfix.htc);
}
#body {
	width:710px;
	background-color: white;
	margin-top: 0px;
	float: left;
}	
#body_copy{
	float: left;
	margin-left: 15px;
	margin-top: 15px;
	width: 400px;
}
#body_copy a {color: #0066FF; text-decoration:none;} 
#body_copy a {color: #0033FF; text-decoration:none;}
#welcome_to_kpscholars {
	float: left;
	left:150px;
	width:250px;
	height:25px;
	background-image: url(../images/welcome_to_kpscholars.png);
	background-repeat: no-repeat;
    behavior: url(../iepngfix.htc);
}

#blue_quote_box {
	float: left;
	width:91px;
	height:36px;
	clear: none;
	background-image: url(../images/orange_box_quote.png);
	behavior: url(../iepngfix.htc);
	margin-top: 5px;
	margin-left: 10px;
	padding-top: 135px;
	padding-left: 140px;
}

#right_image_box {
	width:449px;
	height:170px;
	clear: none;
	background-image: url(../images/banners/teen_girl_banner_02.png);
	behavior: url(../iepngfix.htc);
	margin-top: 5px;
	margin-right: 10px;
	float: right;
}

#right_blue_bar_container {
	float: left;
	width:191px;
	height:593px;
	clear: right;
	background-image: url(../images/right_blue_bar.png);
	padding-left: 17px;
	padding-top: 20px;
}

#member_login {
	float: left;
	width:117px;
	height:24px;
	background-image: url(../images/member_login.png);
	behavior: url(../iepngfix.htc);
}

#login_fields {
	float: left;
	width:165px;
	height:100px;
	margin-top: 10px;
	clear: both;
}

#latest_news{
	float: left;
	width:170px;
	height:160px;
	background-image: url(../images/horizontal_rule.png);
	padding-top: 10px;
	margin-top: 20px;
	background-repeat: repeat-x;
	clear: both;
}

#latest_news a {color: #0066FF; text-decoration:none;} 
#latest_news a {color: #0033FF; text-decoration:none;}

#kp_speakers_bureau{
	float: left;
	width:175px;
	margin-top: 15px;
	clear: left;
	background-image: url(../images/horizontal_rule.png);
	background-repeat: repeat-x;
	padding-top: 10px;
	height: 175px;
}
#kp_speakers_bureau a {color: #0066FF; text-decoration:none;} 
#kp_speakers_bureau a {color: #0033FF; text-decoration:none;}

#featured_video_content a {color: #0066FF; text-decoration:none;} 
#featured_video_content a {color: #0033FF; text-decoration:none;}
#featured_video_content_cont {
	float: left;
	width:235px;
	clear: both;
	margin-left: 10px;
	margin-top: 10px;
}
#featured_video_image {
	float: left;
	width:231px;
	height:120px;
	clear: both;
	background-image: url(../images/featured_video.png);
	behavior: url(../iepngfix.htc);
	margin-left: 0px;
	margin-top: 5px;
	}

#featured_video_type{
	float: left;
	width:215px;
	height:25px;
	clear: left;
	background-image: url(../images/featured_video_type.png);
	background-repeat: no-repeat;
	behavior: url(../iepngfix.htc);
	margin-left: 15px;
	margin-top: 10px;
	margin-bottom: 0px;
}

#more_button_orange {
	float: left;
	width: 20px;
	height: 25px;
	clear: none;
	margin-top: 135px;
	margin-left: 130px;
}

[codeexploiter]

I wonder why you are worrying about the display in DW CS3's integrated browser the only thing you need to make sure is the page looks fine in most popular browser than using/trusting the integrated DW CS3 display section.

No WYSIWYG web page editors offers a cross browser compatible display section. DW CS3 has its own problems. So better trust original browsers while testing the pages before uploading them in your website.

I've checked your site in Firefox 2.0.0.14 and IE 7 and in both it looked good.

[stevedc]

I'm not worried about DWCS3's integrated browser so much as what it actually looks like in dreamweaver. For example, if I built the entire site in php and had a bunch of include files, I wouldn't be able see the design in DWCS3 unless I tested it in a browser anyhow. But, since I haven't developed much with php, I haven't gotten used to the fact that "What I see is NOT what I'm getting". What I'm getting looks great, but it's "NOT" what I actually see in my code editor. So I guess I have to eventually make that jump. %90 of what I care about is how it actually looks on major browsers when the site is live, but coming from a visual design background, if my file doesnt look like a design, but rather jumbled all over the place in DWCS3, it's hard to understand what things will look like unless I'm constantly jumping back and forth between browser and code editor. In the past, if I've built the page in DWCS3 (basic html /css) and it looks right in safari, opera and firefox when previewing, it always looked good in DW...it's just a bit annoying / distracting that it makes me think the body content is clearing the left blue bar...when in fact it's not.

If I open up the actions panel in flash and start coding something up, I don't really have much of a reference point until I test the movie. But Since DW has both code and design view - it just gets confusing I guess and I want to limit that confusion as much as possible.

[boogyman]

If I open up the actions panel in flash and start coding something up, I don't really have much of a reference point until I test the movie. But Since DW has both code and design view - it just gets confusing I guess and I want to limit that confusion as much as possible.

use the code view and the real internet... what confusion is there? just because its there doesn't mean you need to use it?

[stevedc]

well anyway all, thanks for the help...