PDA

View Full Version : Issues with positioning pullup menu



jaffee
Jan 4th, 2010, 03:27 PM
Hi there, I'm looking for help with fixing a pullup menu that is positioned at the bottom of the browser window, and is designed to "pullup" (instead of drop down) when the user rolls over it. No matter what I do, the pullup part of the menu will not come to rest flush against the hover state of the top navigation tab, in this case named 'portfolio'. Instead, it will not go any lower than the top of the navbar, resulting in a big vertical gap between the nav tab and the menu. I've tried wrapping the menu in a div with a specified height, playing with the z-index, and absolutely positioning the menu, and nothing has worked!

The link to check out the page is http://www.jaffydesigns.com/2010_redesign/, and the relevant code is below. Any assistance is much appreciated!

HTML

<div id="nav_wrapper">
<dl class="dropdown">
<dt id="one-ddheader" onmouseover="ddMenu('one',1)" onmouseout="ddMenu('one',-1)">Portfolio</dt>
<dd id="one-ddcontent" onmouseover="cancelHide('one')" onmouseout="ddMenu('one',-1)">
<ul>
<li><a href="#web" class="underline">Web</a></li>
<li><a href="#email" class="underline">Email</a></li>
<li><a href="#logo" class="underline">Logo</a></li>
<li><a href="#print" class="underline">Print</a></li>
<li><a href="#other">Etc.</a></li>
</ul>
</dd>
</dl>
</div>
</div>

CSS

#nav_wrapper {
margin: 28px 0 0 595px;
width: auto;
height: auto;
}
* {
padding:0;
margin:0
}
.dropdown {
float: left;
}
.dropdown dt {
width: 123px;
height: 35px;
margin: 0;
font-weight: bold;
cursor: pointer;
color: #ff9900;
text-align: center;
}
.dropdown dt:hover {
background: url(../images/nav_drop_bottom.gif) no-repeat; color: #ffffcc;
}
.dropdown dd {
position: relative;
right: 66px;
overflow: hidden;
width: 175px;
padding-left: 14px;
background: #333333;
opacity: 0;
z-index: 10000;
}
.dropdown ul {
list-style: none;
}
.dropdown li {
display: inline
}
.dropdown a, .dropdown a:active, .dropdown a:visited {
float: left;
width: 78px;
height: 31px;
margin: 1px 1px 0 0;
font-size: .7em;
color: #ffffff;
text-decoration: none;
text-align: center;
background: #666666;
border: 1px solid #999999;
}
.dropdown a:hover {
background: #ff9900;
color: #ffffff;
border: 1px solid #ffcc66;
text-decoration: underline;
}

abduraooft
Jan 4th, 2010, 03:39 PM
Start with fixing the errors in your markup, see http://validator.w3.org/check?uri=http%3A%2F%2Fwww.jaffydesigns.com%2F2010_redesign%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

jaffee
Jan 4th, 2010, 03:51 PM
Thanks Abduraooft, I'm slapping my forehead for missing that step right now. I'll fix the errors and report back.

jaffee
Jan 6th, 2010, 05:19 AM
Apologies for the delay in replying!

Ok, I've gone through to make sure my HTML and CSS are validating, however the positioning issue persists.

HTML - http://validator.w3.org/check?uri=http://www.jaffydesigns.com/2010_redesign/&charset=(detect+automatically)&doctype=Inline&group=0

Stylesheets
- http://jigsaw.w3.org/css-validator/validator?uri=http://www.jaffydesigns.com/2010_redesign/styles/styles.css&profile=css21&usermedium=all&warning=1&lang=en
- http://jigsaw.w3.org/css-validator/validator?uri=http://www.jaffydesigns.com/2010_redesign/styles/dropdown.css&profile=css21&usermedium=all&warning=1&lang=en

abduraooft
Jan 6th, 2010, 08:20 AM
Not sure, just have a try by the following
.dropdown dd {/*dropdown.css (line 5)*/
background:#333333 none repeat scroll 0;
overflow:hidden;
padding-left:14px;
position:relative;
right:66px;
top:-71px;
width:175px;
z-index:10000;
}

jaffee
Jan 6th, 2010, 08:33 AM
Updated - the menu appears to have moved down, but it's now obscuring the tab when I roll over it.

http://www.jaffydesigns.com/2010_redesign/

abduraooft
Jan 6th, 2010, 09:36 AM
Try increasing that negative top value by some.
Not sure how your script at http://www.jaffydesigns.com/2010_redesign/js/dropdown.js calculates the top value.