shelzmike
17 Jun 2009, 04:45 PM
Okay, this is one of those “probably a little thing I am completely missing” type of issues (at least I hope it is). I am working on a website, and trying the navigation a little differently this time but am running into problems and I have no idea why.
When working in DW (CS4), the nav bar is displaying properly as the following screen shot shows:
http://i42.tinypic.com/6s9egk.jpg
However, when I look at it in a browser (any browser) and in LIVE mode in DW, the menu suddenly shifts vertical left as so:
http://i43.tinypic.com/15663on.jpg
I am so baffled on this one. I am getting an error in Dreamweaver that says “Float drop problem” - If a container (including the browser window itself) is not wide enough to accommodate both a float with a specified width and any content with a specified width that follows it, the content after the float will drop below the float rather than wrapping around it.
Affects: Internet Explorer 6.0, 7.0
Likelihood: Likely
To start with, I am not sure this is the problem as it says it only effects IE 6 and 7, but this problem presents itself in all browsers.
So that being said, here is 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>Paradigm Forward Technology Group</title>
<link href="styles/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header"><img class="displayed" src="img/court_header.jpg" width="960" height="150" alt="Welcome to Paradigm Forward Technology Group" /></div><!--End header div-->
<div id="innerWrapper">
<div id="nav">
<div id="left_menu" />
<div id="buttons">
<div class="menu_item about"><a href="#">ABOUT PFTG</a></div>
<div class="menu_item menu_divider" />
<div class="menu_item home_services"><a href="#">HOME SERVICES</a></div>
<div class="menu_item menu_divider" />
<div class="menu_item managed_it"><a href="#">MANAGED IT</a></div>
<div class="menu_item menu_divider" />
<div class="menu_item website_design"><a href="#">WEBSITE DESIGN</a></div>
<div class="menu_item menu_divider" />
<div class="menu_item sales_consulting"><a href="#">SALES CONSULTING</a></div>
<div class="menu_item menu_divider" />
<div class="menu_item contact"><a href="#">CONTACT</a></div>
<div id="right_menu" />
</div><!--buttons-->
</div><!--nav-->
</div><!--End innerWrapper div-->
<div id="footer"></div><!--End footer div-->
</div><!--End wrapper div-->
</body>
</html>
And here is my CSS file. Hopefully this is not too complicated. Thanks in advance for any help.
@charset "utf-8";
body, h1, h2, h3, h4, h5, p, ul, ol, li {
margin: 0px;
padding: 0px;
}
#wrapper {
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFF;
}
#header {
background-color: #071A38;
background-image: url(../img/header_bg.jpg);
background-repeat: repeat-x;
background-position: center top;
height: 158px;
width: 100%;
}
img.displayed {
display: block;
margin-right: auto;
margin-left: auto;
padding-top: 8px;
}
#footer {
background-color: #071A38;
background-image: url(../img/footer_bg.jpg);
background-repeat: repeat-x;
background-position: center top;
height: 75px;
width: 100%;
}
#innerWrapper {
height: 350px;
width: 980px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
position: relative;
z-index: 4;
top: -28px;
}
#buttons {
text-align: center;
height: 50px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.menu_item {
font-family: "Book Antiqua", Arial, Helvetica, sans-serif;
font-size: 16px;
float: left;
height: 50px;
clear: none;
}
.menu_divider {
background-color: #071A38;
height: 50px;
width: 1px;
}
#nav {
height: 50px;
width: 980px;
margin-right: auto;
margin-left: auto;
}
#nav div.home_services a, #nav div.managed_it a, #nav div.website_design a, #nav div.contact a {
width: 156px;
}
#nav div.about a {
width: 155px;
}
#nav div.sales_consulting a {
width: 156px;
padding-top: 3px;
}
#left_menu {
background-attachment: scroll;
background-image: url(../img/menu_left.jpg);
background-repeat: no-repeat;
background-position: left top;
height: 50px;
width: 20px;
float: left;
}
#right_menu {
background-attachment: scroll;
background-image:url(../img/menu_right.jpg);
background-repeat: no-repeat;
height: 50px;
width: 20px;
float: right;
background-position: left top;
}
#nav a:link, #nav a:visited, #nav a:hover, #nav a:active {
font-family: "Book Antiqua", Arial, Helvetica, sans-serif;
font-size: 16px;
color: #FFF;
}#buttons a {
padding-top: 13px;
text-decoration: none;
}
.menu_item a {
background-image: url(../img/menu_bg.jpg);
background-repeat: repeat-x;
background-position: center top;
height: 50px;
clear: none;
float: left;
}
When working in DW (CS4), the nav bar is displaying properly as the following screen shot shows:
http://i42.tinypic.com/6s9egk.jpg
However, when I look at it in a browser (any browser) and in LIVE mode in DW, the menu suddenly shifts vertical left as so:
http://i43.tinypic.com/15663on.jpg
I am so baffled on this one. I am getting an error in Dreamweaver that says “Float drop problem” - If a container (including the browser window itself) is not wide enough to accommodate both a float with a specified width and any content with a specified width that follows it, the content after the float will drop below the float rather than wrapping around it.
Affects: Internet Explorer 6.0, 7.0
Likelihood: Likely
To start with, I am not sure this is the problem as it says it only effects IE 6 and 7, but this problem presents itself in all browsers.
So that being said, here is 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>Paradigm Forward Technology Group</title>
<link href="styles/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header"><img class="displayed" src="img/court_header.jpg" width="960" height="150" alt="Welcome to Paradigm Forward Technology Group" /></div><!--End header div-->
<div id="innerWrapper">
<div id="nav">
<div id="left_menu" />
<div id="buttons">
<div class="menu_item about"><a href="#">ABOUT PFTG</a></div>
<div class="menu_item menu_divider" />
<div class="menu_item home_services"><a href="#">HOME SERVICES</a></div>
<div class="menu_item menu_divider" />
<div class="menu_item managed_it"><a href="#">MANAGED IT</a></div>
<div class="menu_item menu_divider" />
<div class="menu_item website_design"><a href="#">WEBSITE DESIGN</a></div>
<div class="menu_item menu_divider" />
<div class="menu_item sales_consulting"><a href="#">SALES CONSULTING</a></div>
<div class="menu_item menu_divider" />
<div class="menu_item contact"><a href="#">CONTACT</a></div>
<div id="right_menu" />
</div><!--buttons-->
</div><!--nav-->
</div><!--End innerWrapper div-->
<div id="footer"></div><!--End footer div-->
</div><!--End wrapper div-->
</body>
</html>
And here is my CSS file. Hopefully this is not too complicated. Thanks in advance for any help.
@charset "utf-8";
body, h1, h2, h3, h4, h5, p, ul, ol, li {
margin: 0px;
padding: 0px;
}
#wrapper {
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFF;
}
#header {
background-color: #071A38;
background-image: url(../img/header_bg.jpg);
background-repeat: repeat-x;
background-position: center top;
height: 158px;
width: 100%;
}
img.displayed {
display: block;
margin-right: auto;
margin-left: auto;
padding-top: 8px;
}
#footer {
background-color: #071A38;
background-image: url(../img/footer_bg.jpg);
background-repeat: repeat-x;
background-position: center top;
height: 75px;
width: 100%;
}
#innerWrapper {
height: 350px;
width: 980px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
position: relative;
z-index: 4;
top: -28px;
}
#buttons {
text-align: center;
height: 50px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.menu_item {
font-family: "Book Antiqua", Arial, Helvetica, sans-serif;
font-size: 16px;
float: left;
height: 50px;
clear: none;
}
.menu_divider {
background-color: #071A38;
height: 50px;
width: 1px;
}
#nav {
height: 50px;
width: 980px;
margin-right: auto;
margin-left: auto;
}
#nav div.home_services a, #nav div.managed_it a, #nav div.website_design a, #nav div.contact a {
width: 156px;
}
#nav div.about a {
width: 155px;
}
#nav div.sales_consulting a {
width: 156px;
padding-top: 3px;
}
#left_menu {
background-attachment: scroll;
background-image: url(../img/menu_left.jpg);
background-repeat: no-repeat;
background-position: left top;
height: 50px;
width: 20px;
float: left;
}
#right_menu {
background-attachment: scroll;
background-image:url(../img/menu_right.jpg);
background-repeat: no-repeat;
height: 50px;
width: 20px;
float: right;
background-position: left top;
}
#nav a:link, #nav a:visited, #nav a:hover, #nav a:active {
font-family: "Book Antiqua", Arial, Helvetica, sans-serif;
font-size: 16px;
color: #FFF;
}#buttons a {
padding-top: 13px;
text-decoration: none;
}
.menu_item a {
background-image: url(../img/menu_bg.jpg);
background-repeat: repeat-x;
background-position: center top;
height: 50px;
clear: none;
float: left;
}