My menu bar extends to the next line. I have 6 menu headers and the last header "Contact Us" keeps falling into the next line, I can't seem to keep it in the same row as the other menu headers. Does anyone happen to know why? Thanks so much.
Here's the codes if you need it. Thanks again!
<!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>Inland Empire Waterkeeper</title>
<link href="_css/styles.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body,td,th {
color: #333333;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
}
body {
background-color: #FFFFFF;
color: #D6D6D6;
background-image: url(_images/background_teal.png);
background-repeat: repeat-x;
margin: auto;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
h1 {
font-size: 28px;
color: #666666;
}
h2 {
font-size: 26px;
color: #666666;
}
h3 {
font-size: 24px;
color: #666666;
}
h4 {
font-size: 22px;
color: #666666;
}
h5 {
font-size: 20px;
color: #666666;
}
h6 {
font-size: 18px;
color: #666666;
}
</style>
</head>
<body>
<div class="container">
<div class="header"><img src="_images/banner.jpg" width="933" height="300" /></div>
<div class="menubar">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#" class="MenuBarItemSubmenu">About Us</a>
<ul>
<li><a href="organization.html" class="MenuBarItemSubmenu">Our Org.</a>
<ul>
<li><a href="mission.html">Our Mission</a></li>
<li><a href="history.html">Our History</a></li>
<li><a href="community.html">Our Community</a></li>
</ul>
</li>
<li><a href="team.html" class="MenuBarItemSubmenu">Our Team</a>
<ul>
<li><a href="staff.html">Staff</a></li>
<li><a href="supporters.html">Supporters</a></li>
<li><a href="advisoryboard.html">Advisory Board</a></li>
</ul>
</li>
<li><a href="coastkeeper.html">Coastkeeper</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">What We Do</a>
<ul>
<li><a href="programs.html" class="MenuBarItemSubmenu">Programs</a>
<ul>
<li><a href="advocacy.html">Advocacy</a></li>
<li><a href="education.html">Education</a></li>
<li><a href="research.html">Research</a></li>
<li><a href="restoration.html">Restoration</a></li>
<li><a href="enforcement.html">Enforcement</a></li>
</ul>
</li>
<li><a href="prokects.html">Projects</a></li>
<li><a href="datareports.html">Data & Reports</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Get Involved</a>
<ul>
<li><a href="volunteer.html">Volunteer</a></li>
<li><a href="employment.html">Employment</a></li>
<li><a href="events.html">Events & Meetings</a></li>
<li><a href="donate.html">Donate</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">News Room</a>
<ul>
<li><a href="pressrelease.html">In the News and Press Releases</a></li>
<li><a href="legislation.html">Legislative Updates</a></li>
<li><a href="waternews.html">Water in the News</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Resources</a>
<ul>
<li><a href="#" class="MenuBarItemSubmenu">Information</a>
<ul>
<li><a href="watershed.html">Our Watershed</a></li>
<li><a href="reportpollution.html">Report Pollution</a></li>
</ul>
</li>
<li><a href="photos.html">Photo Gallery</a></li>
</ul>
</li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
<div class="body">
<div class="emptyspacecontent">
<h4><strong style="text-align: justify;"><br />
</strong></h4>
</div>
<div class="emptyspace4"></div>
</div>
<div class="footer"><img src="_images/footer_transparent.png" width="933" height="100" alt="Inland Empire Waterkeeper" /></div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
This is what I get using the markup and style rules that you have supplied
As you can see, the menu bar has plenty of space to house all of the items without resorting to a new line. It looks like the problem lies elsewhere, something that you have not supplied to us.
To stop this dallying around, upload the site and supply a link.
Gramps
I hate to ask this again but before I really dwelve into my project, I was wondering if anyone might have an answer to this question. When I'm working on my html file in dreamweaver, the menu bar extends to the next line. Here is a photo of what it looks like:
See how "Contact Us" is on the next line and not in-line with the rest of the menu items? When I preview it in Firefox or other, it's okay, it shows all on the same line. I just don't understand why it's doing this in Dreamweaver. Does anyone happen to know why or what I can do about this? Thanks ahead of time.
North America
Europe, Middle East and Africa
Asia Pacific