PDA

View Full Version : Display screen mismatch


Andymoses
08-25-2009, 08:44 PM
Sometimes when I'm constructing a site with divs, the display will show something different to what is displayed on screen when i press F12.

Ex: I had the first div floated left (loadarea) and the right hand side div(thumbarea) with a margin left > loadarea width. Both these are in a content div.
What I then wanted to do was put another div underneath loadarea, i called this "info" and floated this left too. this moved thumbarea down so the top of that div was level with the new info div. But when viewing in a browser, the effect is exactly how I want it.

code:

<!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">
<!--
#loadarea {
height: 272px;
width: 400px;
border: 4px solid #CCCCCC;
float: left;
background-color: #FF9900;
}
#thumbarea {
width: 150px;
height: 410px;
margin-left: 416px;
background-color: #CCCCFF;
}
#info {
width: 408px;
height: 200px;
margin-top: 10px;
float: left;
background-color: #00FF99;
}
#content {
width: 576px;
height: 100%;
border: 2px solid #0000FF;
}
.clearing {
font-size: 1px;
line-height: 0px;
clear: both;
height: 0px;
}
-->
</style>
</head>
<body>
<div id="content">
<div id="loadarea">Loadarea</div>
<div id="info">info</div>
<div id="thumbarea">thumbarea</div>
<br class="clearing" />
</div>
</body>
</html>

I got around this by changing thumbarea to float right and remove the floats on the other 2 divs, but why does Dreamweaver display it like this if in the browsers, its going to be different?

DWcourse
08-25-2009, 09:40 PM
Dreamweaver's design view is far from perfect. If it works in the browser that's all you need to worry about. But sometimes it will work in one browser but not in others. That why you need to test with multiple browsers and operating systems (not just the one you preview with on your computer).

Corrosive
08-26-2009, 06:48 AM
I agree. I stopped caring what design view shows me a long time ago. Browsers are your target not design view!