Hi Joanie
Thats a very odd one, but i've figured it out. I'm not sure why exactly
but you have float the <a> tags themselves left aswell ie:
ul#nav li a:link, ul#nav li a:visited {
display: block;
color: #BE32FE;
background-color: transparent;
text-decoration: none;
padding: 4px 15px;
height: 19px;
float: left;
}
Job done =)
Rob
Joanie Mae wrote:
> It took your fix and the Dieringer fix for it to work... HOWEVER,
> only in Firefox and Netscape. In IE the navigation has gone vertical
> and each tab goes across the page. I loaded it online...
> http://www.changeswlc.com. What is with that???
>
>
>> From: Robert O'Rourke <[EMAIL PROTECTED]>
>> To: Joanie Mae <[EMAIL PROTECTED]>
>> Subject: Re: [css-d] I also have a problem with background color
>> change on hover
>> Date: Wed, 29 Mar 2006 17:28:14 +0100
>>
>> 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/
>>>
>>
>
> _________________________________________________________________
> Express yourself instantly with MSN Messenger! Download today - it's
> FREE! http://messenger.msn.click-url.com/go/onm00200471ave/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/
