Problem with compressed "Hover" CSS

[riz-man]

Hi there,

I ran my website through http://analyze.websiteoptimization.com and it suggested I could compress my CSS stylesheet. It then showed me a compressed version of my stylesheet. The compressed version was fantastic except for the following piece of code where it grouped together several classes of "hover" that had the same attributes.

Only the first hover works (i.e. a.more1:hover). Both IE and FF fail to notice the other classes (i.e. a.more2:hover,a.more3:hover,a.more6:hover). As a result I have had to ungroup them.

However, is there something wrong with the suggestion below that I cannot see?

a.more1:hover,a.more2:hover,a.more3:hover,a.more6:hover {
font-family:Rondalo, Arial;
font-size:18px;
line-height:18px;
color:#fff;
text-decoration:none;
text-align:center;
width:16%;
float:left;
background-color:#C1C0BC;
height:30px;
padding-top:10px;
border-right:1px #FFF solid
}

Thanks for your time

Riz

[itrana123]

try this. .more1 a:hover,.more2 a:hover,.more3 a:hover,.more6 a:hover {

[riz-man]

Thanks for the attempt but it didn't work. Your suggestion also resulted in the first class of hover not functioning. :(

[Hud4007]

try puting spaces after the commas
ex: ...e1:hover, a.mor...

[riz-man]

Sorry - that didn't work either.

I just found out the original coding does work in FF - I said in my original post that it didn't...but I guess I missed something. It does work in FF.

I guess it's just an IE 6 issue then (don't know about IE 7).

Oh well...

Thanks for your input anyway...but I'll close this post now.

[WebJoel]

Even though the post is closed, wondering why:
a.more1:hover,a.more2:hover,a.more3:hover,a.more6:hover {
font-family:Rondalo, Arial;
font-size:18px;
line-height:18px;
color:#fff;
text-decoration:none;
text-align:center;
width:16%;
float:left;
background-color:#C1C0BC;
height:30px;
padding-top:10px;
border-right:1px #FFF solid
} THESE even exist? If the pseudo-class for more1, more2, more3, more6, use the same declarations, why the numbered classes? Just
".thisClass" for the Selector, and

"font-family:Rondalo, Arial;
font-size:18px;
line-height:18px;
color:#fff;
text-decoration:none;
text-align:center;
width:16%;
float:left;
background-color:#C1C0BC;
height:30px;
padding-top:10px;
border-right:1px #FFF solid

for declaration?

it would be:

a.thisClass {foo:bar;...}

'whitespace' in CSS (and mostly also true in HTML I guess) can be safely removed for a net savings in page-weight, but it makes editing the not-ready-for-primetime code a real nightmare. Most CSS/HTML optimizers give you the option to remove whitespace, or not to. I always choose "NO" for the reasons you have discovered; sometimes, it messes-up.

I'm also wondering if you have the precedence in the correct order?

a {foo:bar;...}
a:link {foo:bar;...}
a:visited {foo:bar;...}
a:focus, a:hover{foo:bar;...}
a:active {foo:bar;...}

If these are not in the correct order, they won't work as expected. Since you stated they didn't work in IE and Firefox, this would be my first guess..

[riz-man]

WebJoel,

Even though the hover attributes are exactly the same, the non hover classes for a.more1, a.more2, a.more3 and a.more6:hover are not (the background colour is different for each of them). For this reason, I assumed that each class of link would also need it's own hover attribute specified.

Riz