Hi Joan,
You get all kinds of problem when you're changing font-size on hover
but the problem lay in basic.css, you had a padding-top of 4px on all
<li>s. This css works for FF, not sure about IE but i can't see that it
would be any different:
ul#nav li {
float: left;
height: 27px;
background-color: #AADFE0;
margin: 1px 1px 0 1px; /* this controls the space between tabs */
border: 1px solid #59C0C3;
border-bottom: 0;
padding: 0; /* reset the padding */
}
ul#nav a:link, ul#nav a:visited {
display: block;
color: #BE32FE;
background-color: transparent;
text-decoration: none;
padding: 4px 15px;
height: 19px; /* fix the height to avoid it spilling downwards */
}
Hope that solves the problem.
Robert O'Rourke
Joanie Mae wrote:
> I also have a problem with background color change on hover, and the
> fix for the problem K. Wilcox had did not work for me.
>
> Perhaps someone can tell me what it is I am not doing correctly. The
> hover on this site: http://www.changeswlc.com covers horizontally, but
> not vertically.
>
> My navigation code:
>
> ul#nav {
> list-style-type: none;
> margin: 0;
> padding-left: 20px;
> padding-bottom: 24px;
> font: bold 90% verdana, arial, sans-serif;
> }
>
> ul#nav li {
> float: left;
> height: 21px;
> background-color: #AADFE0;
> margin: 1px 1px 0 1px; /* this controls the space between tabs */
> border: 1px solid #59C0C3;
> border-bottom: 0;
> }
>
> ul#nav a:link, ul#nav a:visited {
> display: block;
> color: #BE32FE;
> background-color: transparent;
> text-decoration: none;
> padding: 4px 15px;
> }
>
> ul#nav a:hover {
> background-color: #BE32FE;
> color: #F3F7D4;
> font-weight: bold;
> font-size: 100%;
> }
>
> body#home li.home, body#about li.about, body#tour li.tour,
> body#contact li.contact, body#faqs li.faqs, body#coupons li.coupons,
> body#members li.members {
> border-bottom: 1px solid #fff;
> color: #59C0C3;
> background-color: #FFFFFF;
> }
>
> body#home li.home a:link, body#home li.home a:visited,
> body#about li.about a:link, body#about li.about a:visited,
> body#tour li.tour a:link, body#tour li.tour a:visited,
> body#contact li.contact a:link, body#contact li.contact a:visited,
> body#faqs li.faqs a:link, body#faqs li.faqs a:visited,
> body#coupons li.coupons a:link, body#coupons li.coupons a:visited,
> body#members li.members a:link, body#members li.members a:visited {
> color: #59C0C3;
> font-weight: bold;
> background-color: #FFF;
> }
>
> I can always just remove the background on the hover, only showing a
> change on the font color, but I would really like to know what is my
> problem for future projects.
>
> Thanks.
> Joan
>
> _________________________________________________________________
> Don't just search. Find. Check out the new MSN Search!
> http://search.msn.click-url.com/go/onm00200636ave/direct/01/
>
>------------------------------------------------------------------------
>
>______________________________________________________________________
>css-discuss [EMAIL PROTECTED]
>http://www.css-discuss.org/mailman/listinfo/css-d
>IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
>List wiki/FAQ -- http://css-discuss.incutio.com/
>Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
