verticla spacing in menu with submenu [Archive]

View Full Version : verticla spacing in menu with submenu

IRG

11-21-2008, 05:31 PM

I have a vertical menu with a submenu. Unfortunately the spacing between main links and links in the submenu is slightly different. I attached an image to illustrate what i mean. How can I make the vertical spacing between submenu items the same as in the main menu? Thank you.

html code
-------------------------------------------------------------
<div id="sidebar1">
<a class="menusingleitem" href="#">Home</a>
<a class="menusingleitem header" href="#">About TreatOA</a>
<div class="subitems">
<ul>
<li><a href="#">Consortium</a></li>
<li><a href="#">Aims</a></li>
<li><a href="#">Work Packages</a></li>
<li><a href="#">Scientific Advisory Board</a></li>
</ul>
</div>
<a class="menusingleitem" href="#">About OA</a>
<a class="menusingleitem" href="#">About genetics of OA</a></div>
------------------------------------------------------------------
css
-----------------------------------------------------------------
#sidebar1 a.menusingleitem {
display: block;
position: relative;
width: auto;
padding: 4px 0;
padding-left: 10px;
text-decoration: none;
color: #000000;
}

#sidebar1 .subitems ul {
margin: 0;
padding: 0;
list-style-type: none;
}

#sidebar1 .subitems ul li a {
display: block;
padding: 0 0;
text-decoration: none;
padding-left: 20px;
color: #000000;
}
--------------------------------------------------------------

Snookerman

11-22-2008, 09:16 AM

What browser are you using? I tried your code in FF and IE and I didn't get any extra spacing. Please post the entire page.
PS. you have a typo in the headline (verticla)

IRG

11-24-2008, 05:17 PM

thanks for looking into this. I tried with ie6 and mozilla 1.0.7. the spacing is different between the items in the main menu and the items in the submenu. the link to my test page is: http://www.treatoa.eu/menu_test1.html

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" />
<title>Untitled Document</title>
<link href="css/test.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="sidebar1">
<a class="menusingleitem" href="#">Home</a>
<a class="menusingleitem header" href="#">About TreatOA</a>
<div class="subitems">
<ul>
<li><a href="#">Consortium</a></li>
<li><a href="#">Aims</a></li>
<li><a href="#">Work Packages</a></li>
<li><a href="#">Scientific Advisory Board</a></li>
</ul>
</div>
<a class="menusingleitem" href="#">About OA</a>
<a class="menusingleitem" href="#">About genetics of OA</a>
<a class="menusingleitem" href="#">News</a>
<a class="menusingleitem" href="#">Publications</a>
<a class="menusingleitem" href="#">Events</a>
<a class="menusingleitem" href="#">Links</a>
<a class="menusingleitem" href="#">Contact Us</a>
</div>
</body>
</html>

css:

@charset "utf-8";
/* CSS Document */
#sidebar1 {
float: left; /* since this element is floated, a width must be given */
width: 200px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
background: #EDECE8; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 0;
margin-top: 10px;
font-weight: bold;
}

#sidebar1 a.menusingleitem {
display: block;
position: relative;
width: auto;
padding: 4px 0;
padding-left: 10px;
text-decoration: none;
color: #000000;
}

#sidebar1 .subitems ul {
margin: 0;
padding: 0;
list-style-type: none;
}

#sidebar1 .subitems ul li a {
display: block;
padding: 0 0;
text-decoration: none;
padding-left: 20px;
color: #000000;
}