White space using an image-based vertical drop down menu

willc · March 4, 2008

Hello all,

My understanding of CSS is shaky at best and the problem below has completely thrown me.

I have taken a vertical drop down css menu I found online and tried to modify it. Basically, I have tried to substitute images for words in the main navigation area. I realize this is not an advisable practice but I have no alternative solution if I want to keep the uncommon font as the text in the navigation menu (I'm open to suggestions on this front).

In any case, if you look at the page (the code is below) in Explorer and Firefox, there is that white space between the images. I have read about "that" white space on the web but I still am not able to fix it. In Firefox, it appears that the white space shows up only when the link does not lead anywhere. In other words, if the link actually leads to a page, there is no white space. For elements like the dividers (which don't link anywhere), the space appears. As mentioned above, with IE, the spaces appear everywhere. There is no white space in Opera and Safari.

I think the problem has to do with the a href but I cannot figure it out.

Also, FYI, the links for the images below do not work.

Any help is greatly, greatly, greatly appreciated.

Thank you,

Will

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">

body {

text-align:center;

}

#contentleft {

/*width:219px;*/

padding:0px;

float:left;

background:#fff;

text-align:center;

}

a:link.left {

color:#000; text-decoration:none; font-weight:bold;

font-family:Verdana, Arial, Helvetica, sans-serif;

font-size:11px;

margin-top:0;

margin-bottom:0;

}

a:visited.left {

color:#000; text-decoration:none; font-weight:bold;

font-family:Verdana, Arial, Helvetica, sans-serif;

font-size:11px;

}

a:hover.left {

color:#c33; text-decoration:none; font-weight:bold;

font-family:Verdana, Arial, Helvetica, sans-serif;

font-size:11px;

}

p,h1,pre {

margin:0px 10px 10px 0px;

}

#pcenter p {

margin:0px 0px 10px 20px;

font-family:Verdana, Arial, Helvetica, sans-serif;

font-size:12px

}

ul {

/*changes to these numbers affect the entire menu*/

margin: 0px;

padding: 0px;

list-style:none;

width: 219px; /* Width of Menu Items */

border-bottom: 1px solid #933;

}

ul li {

position: relative;

list-style:none;

padding: 0px; /*padding between main nav buttons*/

margin-bottom:0px; /*this does nothing as far as i can tell*/

margin:0px; /*similar to padding*/

vertical-align:top;

padding-left:0px; /*padding from left side of screen*/

list-style-type:none;

}

li ul {

position: absolute;

left: 219px; /* Set 1px less than menu width */

top: 0px;

display: none;

list-style:none;

padding: 0px; /*this affects where the submenu pops out*/

margin-bottom:0px; /*this does nothing as far as i can tell*/

margin:0px;

vertical-align:top;

padding-left:0px;

list-style-type:none;

}

/* Styles for Menu Items */

li.none {

position: absolute;

margin-bottom:0px;

margin:0px;

vertical-align:top;

padding:0px;

list-style:none;

}

/*ul li a {

display: block;

/*text-decoration: none;

color: #933;

background: #fff; /* IE6 Bug */

/*padding-left:0px;

border: 0px solid #933; /* IE6 Bug */

/*border-bottom: 0px;

list-style:none;

list-style-type:none;

margin-top:0px;

margin-bottom:0px;

vertical-align:top;

}*/

ul li2 a {

display: block;

text-decoration: none;

color: #777;

background: #ccc; /* IE6 Bug */

padding: 8px;

border: 1px solid #933; /* IE6 Bug */

border-bottom: 0px;

list-style:none;

margin-top:0px;

margin-bottom:0px;

vertical-align:top;

}

/* Fix IE. Hide from IE Mac \*/

* html ul li { float: left; height: 1%; }

* html ul li a { height: 1%; }

* html ul li2 a { height: 1%; }

/* End */

li:hover ul, li.over ul { display: block; } /* The magic */

</style>

</head>

<body>

<ul>

<ul>

<li2><a class = "left" href="/pages/pages/look5/prez4.html">President's

Page</a></li2> <li2><a class = "left" href="/pages/pages/look5/history4.html">History

and Archives</a></li2> <li2><a class = "left" href="/pages/pages/look5/museum.html">Museum</a></li2>

<li2><a class = "left" href="/pages/pages/look5/mail_list4.html">Join

Our Mailing List</a></li2>

<li2><a class = "left" href="/pages/pages/look5/intern.html">Internships</a></li2>

</ul>

</li>

<ul>

<li2><a class = "left" href="/pages/pages/look5/private_functions4.html">Weddings</a></li2>

<li2><a class = "left" href="#">Receptions</a></li2> <li2><a class = "left" href="#">Meetings/Seminars/Retreats</a></li2>

<li2><a class = "left" href="/pages/pages/look5/pricing.html">Clubhouse

and Room Rental Rates</a></li2> <li2><a class = "left" href="/pages/pages/look5/hors.html">Menu</a></li2>

<li2><a class = "left" href="/pages/pages/look5/beverages.html">Beverages</a></li2>

<li2><a class = "left" href="/pages/pages/look5/banquet_policies.html">Banquet

Policies</a></li2>

</ul>

</li>

<ul>

<li2><a class = "left" href="/pages/look5/pp_briefs4.html">Public Policy

Briefs</a></li2> <li2><a class = "left" href="/pages/look5/statements.html">Statements

and Resolutions</a></li2>

</ul>

</li>

<ul>

<li2><a class = "left" href="/pages/look5/mem_cats.html">Categories</a></li2>

<li2><a class = "left" href="/pages/look5/member_benefits4.html">Member

Benefits</a></li2> <li2><a class = "left" href="/pages/look5/membership_app_instr.html">Application</a></li2>

</ul>

</li>

</ul>

</div>

<br clear="all" />

</body>

</html>

soycharliente · March 12, 2008

Have you tried?

img { margin: 0; padding: 0; }

Sign In

White space using an image-based vertical drop down menu

Recommended Posts

willc

Link to comment

Share on other sites

soycharliente

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information