Re: [css-d] I also have a problem with background color change on hover, clearfix hack
No problem, I came across the clearfix hack quite recently on
http://www.positioniseverything.net/easyclearing.html, It's useful for
keeping your css simple in a complicated float layout without using any
additional html.
You can treat the containing block as part of the normal flow for
all browsers, the only problem now is that it's apparently not suitable
for IE7, there's an article here:
http://www.stuffandnonsense.co.uk/archives/clearing_floats_without_structural_markup_in_ie7.html
but i wouldn't worry about implementing anything because of that yet,
IE7 is still in its testing stage.
The article here:
http://www.tanfa.co.uk/archives/show.asp?var=300
actually demonstrates how the clearfix hack still works in IE7. I'm
a little confused myself but this code works (fingers crossed):
.clearfix {
display: inline-block;
}
/* Holly Hack Targets IE Win only \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End Holly Hack */
So just a minor alteration on the clearfix hack i put in your css
file. If you want any more examples of uses for the fix there's a
template i'm working on a site with a collapsable layout for the
categories here:
http://www.thebusinesscommunity.co.uk/templates/westpennine/
I could just clear the footer but you get more control over the
positioning and margins on an element that contains floats (such as a
list) this way.
Hope I haven't confused you at all,
Rob
Joanie Mae wrote:
It works! The server the site is on is not connecting but once it is
operational again I'll load it up!
I'd not yet encountered the clearfix hack in my learning journey. Is
it used for other issues other than navigation problems?
Many many thanks for your help, Mr. O'Rourke. I greatly appreciate it.
Joan
_
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/
[css-d] I also have a problem with background color change on hover
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: #FF;
}
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
_
Dont 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/
Re: [css-d] I also have a problem with background color change on hover
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
lis. 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: #FF;
}
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/
Re: [css-d] I also have a problem with background color change on hover
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 lis. 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: #FF;
}
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/
