asked on
div positions, looks ok in dreamweaver but not one div moves in a browser...

Hi,

I am making a webpage and have used a menu from css play... i have got it to fit in the right position on my dreamweaver page but when i preview it in a browser the 'header' div moves down and the 'wrap' div which contains the header and menu seems to be hidden?

heres the test page: http://www.nugrafik.com/index_s3.html

please see the image below for how it looks in my dreamweaver page.

the menu position is relative and i tried changing all my other divs to relative but that didnt make a difference..

everything was fine before i added the menu.

can anybody help?

thank you, kira
here is my html for the page and the external css is below.
 
my html:
 
<!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>STORM Training &amp; Development</title>
 
 
<style type="text/css">
 
 
/* ================================================================ 
This copyright notice must be untouched at all times.
 
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/upmenu.html
Copyright (c) 2005-2009 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
 
 
.menu {
	font-family: Tahoma, Verdana;
	width:950px;
	font-size:16px;
	background-color: #CCCCCC;
	margin-top: 130px;
	margin-right: 0;
	margin-bottom: 0px;
	margin-left: 0;
}
.menu ul li a, .menu ul li a:visited {
	display:block;
	text-decoration:none;
	height:25px;
	text-align:left;
	color:#333333;
	padding-left:5px;
	font-size:16px;
	background-color: #CCCCCC;
	border-top-width: 0;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 0;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #CCCCCC;
	border-right-color: #CCCCCC;
	border-bottom-color: #CCCCCC;
	border-left-color: #CCCCCC;
	
 
}
.menu ul {padding:0; margin:0;list-style-type: none; }
.menu ul li {
	float:left;
	position:relative;
	background-color: #CCCCCC;
}
.menu ul li ul {visibility:hidden; position:absolute;}
 
.menu table {border-collapse:collapse; margin:0; padding:0; font-size:1em; margin:-1px;}
 
.menu ul li:hover a, .menu ul li a:hover {
	color:#000;
	background-color: #CCCCCC;
}
 
.menu ul li:hover ul, .menu ul li a:hover ul {visibility:visible; bottom:26px; left:0;}
 
.menu ul li:hover ul li a.sub, .menu ul li a:hover ul li a.sub {
	color:#000;
	background-color: #CCCCCC;
}
 
.menu ul li:hover ul li, .menu ul li a:hover ul li {display:block; background:#fff; color:#000;width:120px; clear:both;}
 
.menu ul li:hover ul li:hover a.sub, .menu ul li a:hover ul li a:hover.sub {
	color:#000;
	background-color: #FFFFFF;
}
 
.menu ul li:hover ul li ul, .menu ul li a:hover ul li a ul {visibility:hidden; position:absolute;}
 
.menu ul li:hover ul li a, .menu ul li a:hover ul li a {
	display:block;
	color:#000;
	width:100%;
	padding-left:5px;
	background-color: #CCCCCC;
}
 
.menu ul li:hover ul li a:hover, .menu ul li a:hover ul li a:hover {
	color:#000;
	background-color: #FFFFFF;
}
 
.menu ul li:hover ul li:hover ul, .menu ul li a:hover ul li a:hover ul {visibility:visible; left:210px; bottom:0;}
 
.menu ul li:hover ul li:hover ul li a, .menu ul li a:hover ul li a:hover ul li a {
	color:#000;
	background-color: #FFFFFF;
}
 
.menu ul li:hover ul li:hover ul li a:hover, .menu ul li a:hover ul li a:hover ul li a:hover {
	color:#000;
	background-color: #FFFFFF;
}
 
.menu ul li:hover ul.left, .menu ul li a:hover ul.left {left:-105px;}
 
.menu ul li:hover ul li:hover ul.left, .menu ul li a:hover ul li a:hover ul.left {left:-210px; width:209px;}
 
body {
	background-color: #CCCCCC;
	margin-top:0px;
}
body,td,th {
	color: #333333;
}
</style>
 
 
<link href="storm_css/storm_wrapper.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
a:link {
	color: #333333;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #CCCCCC;
}
a:hover {
	text-decoration: none;
	color: #999999;
}
a:active {
	text-decoration: none;
	color: #999999;
}
.style2 {color: #333333; }
-->
</style></head>
 
<body>
<div id="wrap">
  <div id="header">
    <div class="menu">
<ul>
<li><a href="../menu/index.html">About STORM |<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	
 
	<li><a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">press <!--[if gte IE 7]><!--></a><!--<![endif]-->
 
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li><a href="http://twitter.com/"title="twitter link">Twitter</a></li>
	<li><a href="file:///Macintosh HD/Users/kira/a) KIRA_WORK/DREAMWEAVER/menu/bodies.html" title="fun with background images">Linkedin</a></li>
	<li><a href="file:///Macintosh HD/Users/kira/a) KIRA_WORK/DREAMWEAVER/menu/fade_scroll.html" title="fade-out scrolling">Facebook</a></li>
	<li><a href="file:///Macintosh HD/Users/kira/a) KIRA_WORK/DREAMWEAVER/NU GRAFIK/contact.html" title="em size images compared">Newsletter</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="index.html">STORM Team |<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
	<li><a href="file:///Macintosh HD/Users/kira/a) KIRA_WORK/DREAMWEAVER/kiraaskaroff.com/vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
	<li><a href="file:///Macintosh HD/Users/kira/a) KIRA_WORK/DREAMWEAVER/kiraaskaroff.com/expand.html" title="an enlarging unordered list">enlarging list</a></li>
	<li><a href="file:///Macintosh HD/Users/kira/a) KIRA_WORK/DREAMWEAVER/kiraaskaroff.com/enlarge.html" title="an unordered list with link images">link images</a></li>
	<li><a href="file:///Macintosh HD/Users/kira/a) KIRA_WORK/DREAMWEAVER/kiraaskaroff.com/cross.html" title="non-rectangular links">non-rectangular</a></li>
	<li><a href="file:///Macintosh HD/Users/kira/a) KIRA_WORK/DREAMWEAVER/kiraaskaroff.com/jigsaw.html" title="jigsaw links">jigsaw links</a></li>
	<li><a href="file:///Macintosh HD/Users/kira/a) KIRA_WORK/DREAMWEAVER/kiraaskaroff.com/circles.html" title="circular links">circular links</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="../layouts/index.html">Workshops &amp; Programs |<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li>
	<li><a href="file:///Macintosh HD/Users/kira/a) KIRA_WORK/DREAMWEAVER/layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li>
	<li><a href="file:///Macintosh HD/Users/kira/a) KIRA_WORK/DREAMWEAVER/layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li>
	<li><a href="file:///Macintosh HD/Users/kira/a) KIRA_WORK/DREAMWEAVER/layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li>
	<li><a href="file:///Macintosh HD/Users/kira/a) KIRA_WORK/DREAMWEAVER/layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="../boxes/index.html">Living Room &amp; Seminars |<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
	<li><a href="file:///Macintosh HD/Users/kira/a) KIRA_WORK/DREAMWEAVER/kiraaskaroff.com/vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
	<li><a href="file:///Macintosh HD/Users/kira/a) KIRA_WORK/DREAMWEAVER/kiraaskaroff.com/expand.html" title="an enlarging unordered list">enlarging list</a></li>
	<li><a href="file:///Macintosh HD/Users/kira/a) KIRA_WORK/DREAMWEAVER/kiraaskaroff.com/enlarge.html" title="an unordered list with link images">link images</a></li>
	<li><a href="file:///Macintosh HD/Users/kira/a) KIRA_WORK/DREAMWEAVER/kiraaskaroff.com/cross.html" title="non-rectangular links">non-rectangular</a></li>
	<li><a href="file:///Macintosh HD/Users/kira/a) KIRA_WORK/DREAMWEAVER/kiraaskaroff.com/jigsaw.html" title="jigsaw links">jigsaw links</a></li>
	<li><a href="file:///Macintosh HD/Users/kira/a) KIRA_WORK/DREAMWEAVER/kiraaskaroff.com/circles.html" title="circular links">circular links</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="../mozilla/index.html">Storm Report |<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li>
	<li><a href="file:///Macintosh HD/Users/kira/a) KIRA_WORK/DREAMWEAVER/mozilla/cascade.html" title="A cascading menu">cascading menu</a></li>
	<li><a href="file:///Macintosh HD/Users/kira/a) KIRA_WORK/DREAMWEAVER/mozilla/content.html" title="Using content:">content:</a></li>
	<li><a href="file:///Macintosh HD/Users/kira/a) KIRA_WORK/DREAMWEAVER/mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li>
	<li><a href="file:///Macintosh HD/Users/kira/a) KIRA_WORK/DREAMWEAVER/mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li>
	<li><a href="file:///Macintosh HD/Users/kira/a) KIRA_WORK/DREAMWEAVER/mozilla/snooker.html" title="Snooker cue">snooker cue</a></li>
	<li><a href="file:///Macintosh HD/Users/kira/a) KIRA_WORK/DREAMWEAVER/mozilla/target.html" title="Target Practise">target practise</a></li>
	<li><a href="file:///Macintosh HD/Users/kira/a) KIRA_WORK/DREAMWEAVER/mozilla/splittext.html" title="Two tone">two tone</a></li>
	<li><a href="file:///Macintosh HD/Users/kira/a) KIRA_WORK/DREAMWEAVER/mozilla/shadow_text.html" title="Shadow text">shadow text</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="../ie/index.html">Clients  |<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a href="../ie/exampleone.html" title="Example one">example one</a></li>
	<li><a href="file:///Macintosh HD/Users/kira/a) KIRA_WORK/DREAMWEAVER/ie/weft.html" title="Weft fonts">weft fonts</a></li>
	<li><a href="file:///Macintosh HD/Users/kira/a) KIRA_WORK/DREAMWEAVER/ie/exampletwo.html" title="Vertical align">vertical align</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="contact.html">Contact<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
</div>
 
<div id="body_info">
<div id="image"><img src="storm_images/stones.jpg" width="300" height="450" /></div>
<div id="storm_txt">
  <p class="style2"><strong>Welcome to STORM Training &amp; Development. </strong></p>
  <p class="style2"><em>Its not what you say about yourself, its what others say about you</em></p>
  <p class="style2">We take bespoke to a new level - Everything we do, we do with energy, creativity &amp; total commitment to you.</p>
  <p class="style2">We are experts in training workshops, learning &amp; true development of people. We understand people &amp; know how to get the best from people. </p>
  <p class="style2"><br />
    Call STORM HQ today to find out what we can do for you</p>
  <p class="style2">STORM HQ +44208 8912547 or <a href="mailto:stormhq@stormtraining.co.uk">stormhq@stormtraining.co.uk</a></p>
  </div>
  </div>
</div>
</body>
</html>
 
 
 
and the css:
 
#wrap {
	background-color: #FF00FF;
	width: 950px;
	margin-right: auto;
	margin-left: auto;
	height: 400px;
	background-image: url(../../STORM/storm_images/header_v2.gif);
	background-repeat: no-repeat;
	
}
#wrap #body_info {
	background-color: #FFFFFF;
	height: 400px;
	width: 950px;
	clear: both;
}
#wrap #header {
	background-color: #CCCCCC;
	height: 26px;
	background-repeat: no-repeat;
	background-image: url(../storm_images/header_v2.gif);
}
#wrap #body_info #image {
	float: left;
	width: 300px;
 
}
#wrap #body_info #storm_txt {
	float: right;
	width: 620px;
	background-color: #FFFFFF;
	height: 375px;
	font-family: Tahoma, Verdana;
	font-size: 16px;
	color: #333333;
	text-align: center;
	padding-top: 60px;
	padding-right: 15px;
	padding-bottom: 15px;
	padding-left: 15px;
	
}
Open in new window
how-it-looks-in-dreamweaver.jpg
SOLUTION