josephbastin Posted November 11, 2006 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> Link to comment Share on other sites More sharing options...
BiteMe Posted November 13, 2006 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! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now