Star hack not working in IE6 AND 8
Can somewhere help be, my star hacks arnt working in IE6 and 8 for these form elements I am trying to style? But it oddly works in ie7?
I tried adding the star infront of the class selector in general, which made it work in IE8 and 7, but stil not 6 and then made the * apply to firefox, safari, chrome etc. too which just means the star was applying to every browser which I don't need, just internet explorer.
Any help please?
/* FORMS */
/*SEARCH*/
#searchform .s, #searchform .but{float:left;}
#searchform .s{
background-color:rgba(128, 129, 132, 0.4);background-image: url(images/line.png);margin-bottom: 10px; border: none; padding:10px;width: 140px;
font-family: Helvetica, Arial, Sans-serif; font-size: 12px; font-weight: bold; color: #868686;
}
#searchform .but
{
background-color:rgba(128, 129, 132, 0.4); margin-bottom: 10px; border: none; padding:10px;width: 30px;
font-family: Helvetica, Arial, Sans-serif; font-size: 12px;font-weight: bold; color:#00ADEE;
}
/* IE HACK */
*#searchform .s{
*background-color:#C3C3C4;
}
*#searchform .but{
*background-color:#C3C3C4;
*height: 35px
}
/*FIREFOX btn HACK*/
#searchform .but::-moz-focus-inner {
padding: 0;
border: 0
}
/* MAILING LIST */
#mc_embed_signup #mce-EMAIL, #mc_embed_signup #mc-embedded-subscribe{float:left;}
#mc_embed_signup{margin-top: 10px;
background-image: url(images/ieblue.png); }
#mc_embed_signup #text { padding: 8px 5px 8px 8px;
font-family: Helvetica, Arial, Sans-serif; font-size: 10px; line-height: 14px; font-weight: bold; color: #FFFFFF;}
#mc_embed_signup .asterisk {color: #FFFFFF}
#mc_embed_signup #mce-EMAIL {background-color:rgba(0, 173, 238, 0.6);background-image: url(images/line2.png);
margin-bottom: 10px; border: none; padding:10px;width: 158px;
font-family: Helvetica, Arial, Sans-serif; font-size: 12px; font-weight: bold; color: #FFFFFF; }
#mc_embed_signup #mc-embedded-subscribe {background-color:rgba(0, 173, 238, 0.6); margin-bottom: 10px; border: none; padding:10px;width: 30px;
font-family: Helvetica, Arial, Sans-serif; font-size: 12px;font-weight: bold; color:#FFFFFF;
}
/* IE HACK */
* #mc_embed_signup #mce-EMAIL{
*background-color:#60c7ee;
}
* #mc_embed_signup #mc-embedded-subscribe{
*background-color:#60c7ee;
*h开发者_Go百科eight: 35px
}
/*FIREFOX btn HACK*/
#mc_embed_signup #mc-embedded-subscribe::-moz-focus-inner {
padding: 0;
border: 0
}
#hidemap{
display: none;}
/* DIRECTIONS */
#daddr #saddr{float:left;}
#saddr {background-color:rgba(128, 129, 132, 0.4);background-image: url(images/line.png);
margin-bottom: 0px; border: none; padding:10px;width: 158px; ;
font-family: Helvetica, Arial, Sans-serif; font-size: 12px; font-weight: bold; color: #868686;}
#saddrbut {background-color:rgba(128, 129, 132, 0.4); margin-bottom: 0px; border: none; padding:10px;width: 30px;
font-family: Helvetica, Arial, Sans-serif; font-size: 12px;font-weight: bold; color:#00ADEE;
}
*#saddr{
*background-color:#C3C3C4;
}
*#saddrbut{
*background-color:#C3C3C4;
*height: 35px
}
/*FIREFOX btn HACK*/
#saddrbut::-moz-focus-inner {
padding: 0;
border: 0
}
The star hack targets IE7 and below, which explains why it isn't working for you in IE8. I can't say why it isn't working for IE6; I thought the star hack would work for it, but since we've dropped support for IE6, I haven't had to think about it for some time, so I may not be remembering correctly.
I would like to say that using hacks like this is generally a bad idea -- nine times out of ten, if you're using a CSS hack for anything other than IE6, then you're doing something wrong. Even for IE6, it is better to use conditional comments (in fact this point applies to all versions of IE).
If you must use CSS hacks to target IE, I suggest looking at this page which gives specific hacks which you can use to target any individual combination of IE versions.
If you're targetting IE8 and below, then the \9
hack would seem to be appropriate. I would still re-iterate what I said earlier, and recommend not using hacks at all if at all possible.
Hope that helps.
[EDIT]
The reason it isn't working for you is that the star hack goes on the properties, not the selector.
So you have this:
*#searchform .s{
*background-color:#C3C3C4;
}
whereas the star hack would only want the star on the background-color
line, not the #searchform
selector.
[EDIT2]
More importantly, you don't actually need to use any hack here at all.
Simply specify the plain-colour fall-back version first, followed by the more advanced version, and the browsers will pick the one that works for them, according to what they support:
#searchform .s{
background-color:#C3C3C4;
background-color:rgba(128, 129, 132, 0.4);
margin-bottom: 10px; border: none;
}
See -- no hacks required. :-)
I've read a bit on those css-hacks, and boy are they messy! There is a good reference on Wikipedia available.
I would advice you to use conditional comments in your html for IE-styling though. It keeps all your IE-specific styling in a seperate file:
<!--[if IE]>
<link href="style-ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if lt IE 8]>
<link href="style-below-ie8.css" rel="stylesheet" type="text/css" />
<![endif]-->
This is a complete guide about conditional comments: http://www.quirksmode.org/css/condcom.html
精彩评论