PDA

View Full Version : CSS Drop Down help



lizyong
Apr 18th, 2010, 01:38 AM
Hiya,
Many thanks in advance, I'm getting desperate! My website is driving me mad. Just as I thought I had fixed it, my dropdown seems to have stopped working. Clearly I did something to break it, and I've tried to retrace my steps but to no avail. Hence I'd very much appreciate some help!

Basically the problem was that the drop down menu worked fine in everything apart from IE (7, I haven't tested on anything else). The drop down appeared at the same height as the menu item and to the right, and disappeared so quickly you couldn't click on it.

So last night I inserted <br /> before the other list tag as described here
http://www.designerstalk.com/forums/web-design/41904-suckerfish-css-dropdown-menu-doest-look-right-ie7 dot html and voila, it was perfect.

Then, I played around with some table sizing this morning, and a few other things, and now it doesn't work.

The site is http://www.lizyong.com.
Please note it's only index.html that needs fixing, I haven't changed the other pages (e.g. portfolio-->polo, which shows how it was this morning when I found it broken - I've fixed it a bit but not enough)

Also, in IE, the drop down box isn't quite wide enough for the text. I'm sure this was fine last night, but am not 100% sure. Have tried changing the width to 6.8 or 7 em but it looks bad in the other browsers.

Many many thanks,
Liz

Index.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" />
<link rel="stylesheet" type="text/css" href="style2.css" />

<title>Liz Yong Photography</title>

</head>

<body>


<table width="762px" align="center">
<tr>
<td id="logoname" width="300px" align="left"><a href="index.html">&nbsp;&nbsp;&nbsp;liz yong ~ photography </a>
</td>

<td width="460px" valign="baseline">
<ul id="nav">
<li><a href="index.html">home</a>
</li>

<li><a href="about.html">about</a>
</li>

<li><a href="#">portfolio</a>
<br />
<ul>

<li><a href="polo.html">polo</a></li>
<li><a href="artistic.html">artistic</a></li>
<li><a href="other.html">other sports</a></li>

<li><a href="event.html">by event</a></li>
</ul>
</li>

<li><a href="commissions.html">commissions</a>
</li>

<li><a href="prices.html">prices</a>
</li>

<li><a href="contact.html">contact</a>
</li>

</ul>
</td></tr>
</table>

<table width="762px" align="center">
<tr>
<th colspan="2" width="762">


<object width="752" height="536">
<param name="main1" value="/slideshow/main1.swf">
<param name="wmode" value="transparent" />
<embed src="/slideshow/main1.swf" width="752"
height="536" name="main1"
type="application/x-shockwave-flash"
plug inspage="http://www.macromedia.com/go/getflashplayer" main1="http://lizyong.com/slideshow/main1.swf" wmode="transparent">
</object>



</th>
</tr>


<tr>
<th id="contact" colspan="2" width="752px">
&nbsp;All images copyright &copy; Elizabeth Yong. &nbsp;Images may not be reproduced under any circumstances without prior written permission. </th>
</tr>
</table>
</body>
</html>



CSS:


#nav, #nav ul {
float:left;
width: auto;
list-style: none;
line-height: 1;
background: white;
font-size: 0.9375em;
font-weight: inherit;
font-family: baskerville;
padding: 0;
border: solid #666666;
border-width: 0px 0;
margin: 1em 0 1em 0;
#position: relative;
#top: -25%;

}

#nav a {
<!--nav menu top level-->
display: block;
width: auto;
w\idth: auto;
color: #000000;
text-decoration: none;
padding: 0.25em 0.6em;
color: #000000;
}

#nav a:hover {
color:#ff6633;
text-decoration:none;
}


#nav li {
float: left;
padding: 0.25em 0.20em;
width: auto;

}

#nav li ul {
position: absolute;
left: -999em;
height: auto;

width: 6.6em; <!--controls width of drop down-->
w\idth: 6.6em;
font-weight: normal;
border-width: 0.10em;
margin: 0.15em 0 0 0;
color:#ff6633;

}

#nav li li {
padding-right: 0em;
width: 8.5em;
}

#nav li ul a {
<!--first and second level menu links-->
width: 7.5em;
w\idth: 7.5em;
color: #000000;
}

#nav li ul ul {
margin: -1.30em 0 0 7.50em;
color: #ff6633;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
color:#ff6633;
text-decoration:none;
color:#ff6633;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
color:#ff6633;
text-decoration:none;
}


#content {
clear: left;
color: #ccc;
}


What it should look like;
http://www.lizyong.com/problems/safari.png (http://www.lizyong.com/problems/safari.jpg)


Many many thanks for any help at all.

DJCMBear
Apr 22nd, 2010, 12:47 PM
In your css file it has this



#nav li ul {
position: absolute;
left: -999em;
height: auto;

width: 6.6em; <!--controls width of drop down-->
w\idth: 6.6em;
font-weight: normal;
border-width: 0.10em;
margin: 0.15em 0 0 0;
color:#ff6633;
}
It needs to be changed to this


#nav li ul {
position: absolute;
left: -999em;
height: auto;

width: 6.6em; <!--controls width of drop down-->
w\idth: 6.6em;
font-weight: normal;
border-width: 0.10em;
margin: 0.15em 0 0 0;
!margin: 2em 0 0 0;
color:#ff6633;
}