PDA

View Full Version : DEsign View nothing like IE view


williebee
02-22-2010, 01:09 PM
Hello

I have ben learning html and CSS for a couple of months only and have just started a Dreamweaver course too, so getting a little bit of practice done

I havwe a problem though; the design view is nothing like the 'live' view

I set up a horizontal div section under the header, with 5 new divs ready to take graphics.I adjusted the width oif each to fill the container, as far as width was concerned. That worked OK, leaving no space on the right hand side.

Next I set up a left nav area, all OK

Now for the content area, to sit to the right of the left nav. For some reasonm the design viuew was showing at the bottom of the left nav and partially hidden behind it.

I assumed I needed the float command.

After a bit of messing about, I couldn't get it to look the way I wanted.

Just for the hel of it, I triued the browser view and all was perfect, leftnav on the left with contens section tom it's right.

However, my 5 navigation buttons were now showing a small space on the right. Back to dreamweaver and add a little to the box width. Noe the design view shows as 4 buttons on ther top row and the little orphan below BUT the live view has all 5 in a row and still has a small gap showing at the end

Here's the code so far

Can anybody tell me what's going on, before I pull my hair out

<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#container {
background-color: #99FF99;
width: 800px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
height: 540px;
}
#container #header {
height: 120px;
width: 100%;
background-color:#CCCC00;
}
#leftnavigation {
float: left;
height: 350px;
width: 200px;
background-color:#6699CC;
clear: both;
}
#horizontal_navigation {
background-color: #FFFF99;
height: 40px;
width: 100%;
text-align: center;
}
.nav_button_a {
height: 38px;
width: 157px;
border: thin solid #FF0000;
float: left;
}
#content_area {
height: 350px;
width: 590px;
background-color: #000000;
color: #FFFFFF;
float: right;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="header"></div>

<div id="horizontal_navigation">
<div class="nav_button_a">1</div>
<div class="nav_button_a">1b</div>
<div class="nav_button_a">2</div>
<div class="nav_button_a">3</div>
<div class="nav_button_a">4</div>
</div>
<div id="leftnavigation"></div>
<div id="content_area">hhh</div>
</div>
</body>
</html>

domedia
02-22-2010, 03:27 PM
So most browsers have their own rendering engine, and it's different from each browser version as well. Knowing how these rendering engines works with CS is a crucial part of the web design toolbelt.

#leftnavigation needs to change 'clear: both;' to 'clear: left;' for sure to get the design you want.
If you're still having issues, upload the page somewhere to the web. It's much easier debugging the page when we can use Firebug.