Menu
Hey all,
I’m having a lot of trouble w/ the “Suckerfish Dropdowns” methodology in Firefox, IE 5-7, and Safari. In short, I’ve placed the site crumbtrail directly underneath the top navigation, which is horizontal and has a few dropdowns. In Safari, the crumbtrail appears where it should but, when you hover over the navigation and the dropdowns render, it “pushes” the crumbtrail out of the way. In the other browsers, they seem to calculate the size of the longest dropdown beforehand and automatically move the crumbtrail down on the page to clear it.
I’ve included the HTML & CSS in one file for ease of use, and i”ve also attached a screenshot of the desired effect for your reference. Don’t worry about the content on the bottom half of the page as those are easy for me to fix.
[URL=”http://a.parsons.edu/~jrandolph/test/newLayout2.html”]Code in Question
[URL=”http://a.parsons.edu/~jrandolph/test/PageMockup.jpg”]Desired Effect
And here is all the code for quick reference:
[code=php]
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<title>NEW MERLCO LAYOUT</title>
<meta http-equiv=”content-type” content=”text/html; charset=iso-8859-1″>
<style type=”text/css”>
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,th,td,img {
margin: 0;
padding: 0;
}
body {
font-family: Arial, Verdana, Trebuchet MS, sans-serif;
font-size: 75%;
background:#43536E;
}
html>body {
font-size: 12px;
}
p {
font-size:1em;
line-height:1.4em;
margin:1.4em;
}
a, a img {
text-decoration:none;
color:#69f;
border:none;
}
a:hover {
text-decoration:underline;
}
div#container {
width:800px;
margin:20px auto;
background:#fff;
padding:10px;
border:1px solid #000;
}
div#header {
margin:0;
height:78px;
}
div#logo {
width:240px;
height:78px;
float:left;
}
div#navigation {
}
ul #navlist {
margin-left:250px;
list-style:none;
width:561px;
}
ul#navlist a, ul#navlist a:visited, ul#navlist a:hover, ul#navlist a:active {
text-decoration:none;
color:#000;
font-size:1em;
}
ul#navlist li {
float: left;
z-index:100;
list-style:none;
width:120px;
text-align:left;
height:20px;
padding-left:2px;
background-image:url(images/navbtn2.png);
background-repeat:repeat-x;
background-position:bottom left;
}
ul#navlist li.shortName {
width:103px;
}
ul#navlist li a img {
border:none;
text-decoration:none;
float:right;
margin-right:2px;
margin-top:-10px;
}
ul#navlist li ul {
clear:right;
display: none;
border:1px solid #666;
}
ul#navlist li:hover ul {
display:block;
}
ul#navlist li ul li {
padding:2px 4px 0px 4px;
clear:left;
text-align:left;
width:140px;
background-image:none;
background:#cbd5e9;
border-left:5px solid #69f;
border-top:1px solid #666;
}
ul#navlist li ul li a img {
border:none;
text-decoration:none;
float:right;
margin-right:4px;
}
ul#navlist li ul li:hover {
border-left:5px solid #fff;
}
ul#navlist li ul {
border:1px solid #666;
}
div#crumbtrail {
float:left;
width:561px;
height:30px;
}
div#crumbtrail h1 {
background:#fffddc;
}
div#crumbtrail h1 a {
text-decoration:none;
color:#000;
font-size:0.8em;
}
div#crumbtrail h1 a:hover {
color:#69f;
}
div#content {
float:right;
width:561px;
background:#efefef;
min-height:308px;
}
div#picture {
float:left;
width:239px;
height:308px;
}
div#footer {
clear:both;
width:100%;
}
div#footer p {
text-align:center;
}
div#footer p a {
color:#000;
text-decoration:none;
}
div#footer p a:hover, #footer p a.over {
color:#6699ff;
}
.hidden {
display: none;
}
.shown {
display: inline;
}
</style>
</head>
<body onload=”startList(); startArrows(); hideSpans(‘blurb1’);”>
<div id=”container”>
<div id=”header”>
<div id=”logo”>
<a href=””><img src=”images/logo.gif” alt=”Merlco” /></a>
</div>
<div id=”navigation”>
<ul id=”navlist”>
<li class=”shortName”><a href=”index.php”>Home <img src=”images/ico_static.gif” alt=”icon-static” /></a></li>
<li><a href=”overview.php”>Business Overview <img src=”images/ico_dropdown.gif” alt=”icon-dropdown” /></a>
<ul>
<li><a href=”corevalues.php”>Core Values <img src=”images/ico_static.gif” alt=”icon-static” /></a></li>
</ul>
</li>
<li class=”shortName”><a href=”services.php”>Services <img src=”images/ico_dropdown.gif” alt=”icon-dropdown” /></a>
<ul>
<li><a href=”sourcing.php”>Sourcing <img src=”images/ico_static.gif” alt=”icon-static” /></a></li>
<li><a href=”quality.php”>Quality Control <img src=”images/ico_static.gif” alt=”icon-static” /></a></li>
<li><a href=”consulting.php”>Business Consulting <img src=”images/ico_static.gif” alt=”icon-static” /></a></li>
<li><a href=”whymerlco.php”>Why Merlco? <img src=”images/ico_static.gif” alt=”icon-static” /></a></li>
</ul>
</li>
<li class=”shortName”><a href=”catalog.php”>Product Catalog <img src=”images/ico_static.gif” alt=”icon-static” /></a></li>
<li class=”shortName”><a href=”contact.php”>Contact <img src=”images/ico_static.gif” alt=”icon-static” /></a></li>
</ul>
</div>
<div id=”crumbtrail”>
<h1><a href=”index.php”>Merlco</a> >> <a href=”overview.php”>Business Overview</a> >> <a href=”corevalues.php”>Core Values</a></h1>
</div>
</div>
<div id=”wrapper”>
<div id=”content”>
<div id=”text”>
<p>Since its foundation, Merlco has been governed by its core values. They shape the culture and define the character of our company. They guide how we behave and make decisions.</p>
<p>
<ul id=”content_subpoints”>
<li onMouseOver=”hideSpans(‘blurb1’); swapImage(‘picArea’, ‘images/corevalues_focus.jpg’);”>Focus</li>
<li onMouseOver=”hideSpans(‘blurb2’); swapImage(‘picArea’, ‘images/corevalues_teamwork.jpg’);”>Teamwork</li>
<li onMouseOver=”hideSpans(‘blurb3’); swapImage(‘picArea’, ‘images/corevalues_commitment.jpg’);”>Commitment</li>
</ul>
</p>
<div class=”subpoint_text”>
<span id=”blurb1″><p><b>Focus:</b> In order to overcome the challenges with doing business in China; Merlco feels it is vital to understand the big picture and also the precise details of what the client wants.</p></span>
<span id=”blurb2″><p><b>Teamwork:</b> Merlco strives to be an extension of our clients and their needs. Proper communication and honesty are significant traits that are needed to accomplish these tasks.</p></span>
<span id=”blurb3″><p><b>Commitment:</b> Merlco is devoted to quality and continuously improving our services to achieve the highest standard for our clients. We are driven to exceed our clients’ expectations.</p></span>
</div>
</div>
</div>
</div>
<div id=”picture”>
<img src=”images/businessoverview.jpg” alt=”” />
</div>
<div id=”footer”>
<p><a href=”index.php”>Privacy Policy</a> | <a href=”index.php”>Contact Us</a></p>
</div>
</div>
</body>
</html>
Thanks a lot in advance for any help you can provide!