josephbastin 0 Posted November 11, 2006 Report Share Posted November 11, 2006 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> Quote Link to post Share on other sites
BiteMe 0 Posted November 13, 2006 Report Share Posted November 13, 2006 Can we clean it up for you? Cheek, im all for helping others, but if we did it for you you wont learn anything.I will have a look and get back to u! Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.