Jump to content

List menu using CSS giving extra padding in IE, FF & Netscape


Recommended Posts

Hi,I tried creating a vertical rollover list using CSS. The concept is taken from another source on net. The rollover effects are working perfect. But there is one problem.--> In IE, there is unwanted left and bottom padding for the div that holds the list.--> In FireFox and Netscape, there is unwanted left and top padding for the div that holds the list. Also, if the text in the menu is long and if it wraps to the next line, the first line and the second line are colliding.According to me, the padding and margin are set to zero wherever necessary. Still this unwanted padding is happening.Given below is the CSS and HTML code. Could you please clean up the CSS and make it working proper for me without the padding?CSSbody { background-color: #000000; font-family: Tahoma, Arial, sans-serif; font-size: 0.8em; padding: 0px; margin: 0px;}div#mainNav { background-color: #CCCCFF/*url('images/mainNav_holder_primary_bg.gif') repeat-y right top*/; vertical-align: top; padding: 0px; margin: 0px; width: 150px; height: 177px; float: left;}#navList { color: #FFFFFF; vertical-align: top; padding: 0px; margin: 0px; width: auto;}#navlist li { list-style-type: none; margin: 0px 0px 0px 0px; padding: 0px;}#navlist a { color: #FFFFFF; text-decoration: none; background-color: #8E3A14; border-top: 1px solid #B24D23; border-right: 1px solid #5C2208; border-bottom: 1px solid #5C2208; border-left: 10px solid #5C5C5C; padding: 0px 5px 1px 8px; margin: 0px; height: 34px; line-height: 34px; display: block;}#navlist a#current { background-color: #5C5C5C; border-color: #B24D23 #5C2208 #5C2208 #444444;}#navlist a { width: 100%; /* only necessary for Internet Explorer */}#navlist a { voice-family: "\"}\""; voice-family: inherit; width: 100%; /* Tantek-hack should only used if Internet-Explorer 6 is in standards-compliant mode */}#mainNav>#navlist a { width: auto; /* only necessary if you use the hacks above for the Internet Explorer */}#navlist a:hover, #navlist a#current:hover { background-color: #5C5C5C; border-color: #444444 #777777 #777777 #444444; padding: 1px 4px 0px 9px; margin: 0px; height: 34px; line-height: 34px;}#navlist a:active, #navlist a#current:active { border-color: #B24D23 #5C2208 #5C2208 #444444; padding: 0px 5px 1px 8px; margin: 0px; height: 34px; line-height: 34px;}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><title>Untitled Document</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><link href="list.css" rel="stylesheet" type="text/css" /></head><body><div id="mainNav"> <ul id="navlist"> <li id="active"><a href="#" id="current">Link 1 Active</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> </ul></div></body></html>

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...