CSS Suckerfish menu problem [Archive]

jdg

02-26-2008, 01:00 PM

Hello again everybody!

Well I am having another problem with my menu. With the help of Centauri and a few other posts, I've gotten the following menu created:

<ul id="vertnav">
<li><div><a href="#" >first Level menu more characters</a></div>
<ul>
<li><div><a href="#" >second Level menu</a></div></li>
<li><div><a href="#" >second Level menu more characters</a></div>
<ul>
<li><div><a href="#" >third Level menu</a></div></li>
</ul>
</li>
</ul>
</li>
<li><div><a href="#" >Human Resources</a></div>
<ul>
<li><div><a href="#" >fifth Level menu</a></div></li>
<li><div><a href="#" >Attendance & Pay</a></div>
<ul>
<li><div><a href="#" >Compensation Plan</a></div></li>
</ul>
</li>
</ul>
</li>
</ul>

and the following CSS page:

#vertnav{
padding:0;
margin:0;
list-style: none;
width: 12em;
}
#vertnav li {
margin:0;
position: relative;
width: 12em;
border:solid 1px white;
border-bottom:none;
padding: 0;
background-image: url(../images/menu/button-left.jpg);
background-repeat: no-repeat;
background-position: left center;
}

#vertnav li:last-child{border-bottom:1px solid #CCC;}

#vertnav a {
text-decoration:none;
display:block;
height:2em;
line-height: 2em;
padding: 0.1em;
color: red;
background-image: url(../images/menu/button-right.jpg);
background-repeat: no-repeat;
background-position: right center;
text-align: center;
}
#vertnav li:hover li, #vertnav li.over li,
#vertnav li:hover li li, #vertnav li.over li li {
background-image: url(../images/menu/button-left.jpg);
}
#vertnav li:hover li a, #vertnav li.over li a,
#vertnav li:hover li li a, #vertnav li.over li li a {
background-image: url(../images/menu/button-right.jpg);
color: red;
}
#vertnav li:hover, #vertnav li.over,
#vertnav ul li:hover, #vertnav ul li.over,
#vertnav ul ul li:hover, #vertnav ul ul li.over {
background-image: url(../images/menu/buttonOver-left.jpg);
}
#vertnav li:hover a, #vertnav li.over a,
#vertnav ul li:hover a, #vertnav ul li.over a,
#vertnav ul ul li:hover a, #vertnav ul ul li.over a {
background-image: url(../images/menu/buttonOver-right.jpg);
color: #FFFFFF;
}
#vertnav ul {
list-style: none;
width:12em;
position:absolute;
left: -999em;
top: 0px;
margin: 0;
padding: 0;
}
#vertnav li:hover ul ul, #vertnav li:hover ul ul ul,
#vertnav li:hover ul ul ul ul, #vertnav li:hover ul ul ul ul ul,
#vertnav li.over ul ul, #vertnav li.over ul ul ul,
#vertnav li.over ul ul ul ul, #vertnav li.over ul ul ul ul ul {
left: -999em;
}
#vertnav li:hover ul, #vertnav ul li:hover ul, #vertnav ul ul li:hover ul,
#vertnav li.over ul, #vertnav ul li.over ul, #vertnav ul ul li.over ul {
left: 12em;
}
* html #vertnav li {
float: left;
}

The problem that I am having now is that my menu has to be a fixed width, but a lot of the menu items are larger then the width, and screws up everything. In firefox, the images I am using for the background are aligned to the top of the text, and everything else just flows below it out of the box. In IE, the background images are centered to the text regardless of the size (but still the smaller image so doesn't look right).

I've tried creating taller images and assigning them via classes instead of my regular images when the text is greater then a certain value (I am actually using a recursive PHP script I created to dynamically get the values from a MYSQL table and create the menu, but it originally looked like the above code and still functions the same way) but I don't get the desired result. Mainly I don't think I am calling my "special" classes properly and it just plainly isn't working. All i did for the extra classes for the taller images was copy the whole thing, then put a class name after #vertnav in each of the class definitions (I also tried adding it at the end of each line in the class definition. EX: #vertnav li:hover li .biggerimages This ended with another undesired result, nothing even close to what I want). Then I added the class to my menu.

I've been struggling on this problem for a little while now. Any help you can offer would be greatly appreciated.

Jeremy

PS: In case anyone asks for it, the following is my actual index page:
<?PHP

$server = "myserver"; //your mysql server address
$usr = "username"; //your server user name
$pwd = "password"; //your server password

$con = mysql_connect($server, $usr, $pwd); //connects to the database server
mysql_select_db("mydatabase"); //selects the database

function getMenuItems($menuID){
if($menuID == 1)
$sql = "SELECT * FROM menu_categories WHERE subof = '$menuID' ORDER BY 'menu_order' ASC";
else
$sql = "SELECT * FROM menu_categories WHERE subof = '$menuID' ORDER BY 'name' ASC";
$result = mysql_query($sql);

if($result != FALSE){
if($menuID == 1)
echo "<ul id='vertnav'>";
else
echo "<ul>";
}

while($row = mysql_fetch_array($result)){
if(strlen($row['name']) > 17)
# This is the extra class I added to try and get the taller images to display instead
echo "<li class = 'biggerimages' ><div><a href='". $row['link'] . "'>" . $row['name'] . "</a></div>";
else
echo "<li><div><a href='index.php?page=". $row['link'] . "'>" . $row['name'] . "</a></div>";
getMenuItems($row['id']);
echo "</li>";
}

if ($result != FALSE)
echo "</ul>";

return;
}

?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>


<script type="text/javascript" src="javascript/menu.js"></script>
<script type="text/javascript" src="javascript/search.js"></script>


<link Rel="Stylesheet" Type="Text/css" Href="css/search.css">
<link rel="stylesheet" Type="text/css" Href="css/menu.css">
<link Rel="Stylesheet" Type="Text/css" Href="css/style.css">

</head>

<body class = "menucolor" onLoad="Signin.username.focus()">


<div id = "topborder"><span id = "date"><?PHP echo date("F j, Y") ?></span></div>

<div id = "logotop">&nbsp </div>
<div id = "logotop2">&nbsp </div>


<form Name="Signin" Action="./scriptss/trlogin.php" target="Training Room" Method="post">

<div style = "Position: absolute; Right: 0px; Top: 16px;">
<span class = "tohide" style = "Position: Absolute; Right: 120px; Font-Size: 11px; Width: 130px;">Training Room Sign In</span>
<input class = "tohide" Name="username" style="Position: absolute; Right: 25px; Width: 85px;">
</div>


<div style = "Position: absolute; Right: 0px; Top: 39px;">
<span class = "tohide" style= "Position: absolute; Right: 120px; Font-Size: 11px; Width: 70px;">PASSWORD</span>
<input class = "tohide" type="password" Name="ppassword" style="Position: absolute; Right: 24px; Width: 85px;">
<input class = "tohide" type="image" src="images/index/ok_button.gif" onClick="submit" value="GO" onBlur="reset()">
</div>
</form>


<div style = "Position: relative; Left: 23px; Top: 85px;">
<div class = "sample_attach" id="src_parent">Site Search</div>

<div style = "Position: Relative; Top: -120px;" >
<form class = "sample_attach" id="src_child" action="index.php">
<b>Enter search terms:</b><br>
<input class="sample_attach" type="text" name="terms">
<center><input type="submit" value="Submit"></center>
</form>
</div>

<script type="text/javascript">
at_attach("src_parent", "src_child", "click", "x", "pointer");
</script>
</div>

<?PHP

# Sets up the main menu to show on the left side in the yellow bar left side
echo "<div id = 'menucontainer'>";
# include ("menu.php");
getMenuItems(1);

echo "<BR><div id = 'logobottom'></div>";
echo "</div>";

if(!isset($page))
$page = "welcome.htm";

# Main content and navigation menu container is setup and both are called
echo "<div id = 'content'>";
include ("../documents/".$page);
echo "</div>";

?>

</body>
</html>

Centauri

02-26-2008, 08:29 PM

Jeremy,

Am having a play with this, and was just about ready to post something when i noticed the height and line-heights of the <a> tags are now set to 2em rather than the 1em originally used when sorting this menu before. Before I posted too much, I just wanted to check that this is now 2em (which gives the effect of extra spacing between buttons) as the bottom border put in with the :last-child rule looks a little strange. The extra height does make a larger class a bit more difficult, and spacing between the <li>s may be better to provide space, if indeed that is what you are trying to do.

jdg

02-27-2008, 09:22 AM

Hi Centauri,

The 2em I had put in for the height and line-height's for the <a> tags was because without it, the menu looks squished. The images that are used for the background look about half the size as it should be, it is essentially hugging the text with no extra room above or below. I changed it to 2 em, because with that value the background images are the correct size, and the text is centered in the box. You can see what I mean better by looking at the two attachments. I added what both menu's look like. However I also changed the padding to 0em on the <a> tags because with the 2em heights, there is too much of a space in between.

I'm really not that concerned about the values assigned to anything, as long as the menu looks right. If it can be done with 1em somehow, then I'm all for it, but I tried substituting the menu I was originally using (the one you first helped me with) instead of my recursive php script, but it behaves the same way. I also tried removing everything else on my page besides the menu (in case something was conflicting with a different CSS class), but I also got the same end result, just with the rest of my page missing.

I should mention that I took the images using Firefox. With IE, I still have the above issues as the text is centered to the cell so it expands both above and below the image background, throwing the whole thing off. Firefox just aligns the text with the top of the image and everything else just trails below. Looks more or less fine, if you didn't know that the menu items were bigger then what is shown. I just wanted to show the difference in the menu's concerning 1em and 2em, not how badly IE screws things up on top of the difference in heights.

Thanks for your help,
Jeremy

jdg

02-27-2008, 03:00 PM

I'm also having another problem with the menu that I just figured out what it was being caused by.

Since I am not the one responsible for updating the menu content, a few of the menu items have numerous sub menus (like 40-50, don't ask me why they did this). The problem that I am having now with the css menu, is it adds all the sub menus and everything immediately, although hidden, so while I can't see them scrolling down, they are causing my page to scroll vertically an extra page or two, even though there is "nothing" on the page.

Does anyone know how I might be able to stop this from happening. Or stop the page from scrolling until the sub menu is actually made visible? Aside from trimming the menu down to an appropriate size (I plan on doing this, but I still may run into it even afterwards).

Thanks again,
Jeremy