This question already has answers here:
Purpose of asterisk before a CSS property
(6 answers)
Closed 9 years ago.
I am working on improving my basic css fundamentals and came across this question that I could not seem to google the answer.
In twitter bootstrap 2.3.2, there are a couple times within bootstrap.css where the stylesheet is as the following:
ul.inline > li,
ol.inline > li {
display: inline-block;
*display: inline;
padding-right: 5px;
padding-left: 5px;
*zoom: 1;
}
and another example would be:
.row-fluid .span12 {
width: 91.48936170212765%;
*width: 91.43617021276594%;
}
* is a universal selector. If they added *width after "width", *width will override the "width" before, correct? Please advise.
PS: I already researched this question and was not able to find the answer. If this is similar, I would really appreciate a link to the other post, thanks.
This is an explorer hack. Version 8 read this while others ignore it.
IE in sometimes need different css then other versions.
This is a refernce from a google search:
explorer 8 asterisk hack
javascriptkit and there are many more.
Note it's in the unrecomended section.
http://www.javascriptkit.com/dhtmltutors/csshacks3.shtml
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
beautiful people,
For the life of me I can't get my buttons to format properly in IE and Firefox, using Bootstrap. I've looked around for people with similar problems on here but I can't seem to lick this one. Any help would be greatly appreciated. I've made this site in MeteorJS in case that provides any insight for you out there:
http://jdd.meteor.com/search
*It works fine in Chrome, Safari, iOS devices...
I've made a reduced version of your form. My method for solving this problem is using the enforced line-height of firefox as your basis for applying styles. The default is normal from what I remember.
So using that you don't have to set a height and line-height to match that, this for me has been the most consistent solution cross browser without any weirdness.
I use the prefixed appearance rules as that removes all default browser styling applied to that element. It's especially needed in Mobile Safari.
http://codepen.io/stevemckinney/pen/CLgdE
input {
-webkit-appearance: none;
-moz-appearance: none;
border: none;
background: #EFEFEF;
}
input,
.btn {
line-height: normal;
padding: 10px;
}
.btn {
text-decoration: none;
}
.btn-primary {
background: #820024;
color: white;
}
Hopefully this helps.
This question already has answers here:
Purpose of asterisk before a CSS property
(6 answers)
Closed 9 years ago.
The question is all in the title, but if I have a rule that says
#someID{
margin-left: 10px;
*margin-left: 10px;
}
what does the *margin-left statement do?
* is useful for use as a CSS hack and Its intent is to target specific versions of IE.
The *<property> is used to target IE7 (and below).
This aticle might help you for details
This question already has answers here:
Purpose of asterisk before a CSS property
(6 answers)
Closed 9 years ago.
I've been using Twitter's Bootstrap package to build a site, and was browsing through the CSS when I came across the following (more or less, cruft redacted for clarity):
.btn-primary {
background-color: #006dcc;
*background-color: #0044cc;
}
Now, I've seen * used as part of the selector, both as part of a constructor like li li * { ... } and as part of an attribute selector a [name*=foo] (and obviously as part of CSS comments /* */), but I've never seen this before. Can anybody share any insight as to what it's being used for? I've also seen it in the following (complete) context:
button.btn,
input[type="submit"].btn {
*padding-top: 3px;
*padding-bottom: 3px;
}
where the * is in front of two related but distinct properties. What's going on?
This article should answer your question. It's basically a way 'hacking' CSS selectors to target a certain browser.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
What does an asterisk do in a CSS property name?
I'm going through css style sheet provided with twitter bootstrap 2.0 and I see a lot of properties for which a * is appended before them. Ex: *margin-top , *zoom, *display etc..
What does this * imply ? Ex: listing of one of the rules -
audio, canvas, video {
display: inline-block;
*display: inline;
*zoom: 1;
}
direct link for bootstrap.css file
This is called a CSS hack. Its intent is to target specific versions of IE:
The *<property> is used to target IE7 (and below).
This aticle for NetTuts explains it well
This question already has answers here:
What does a star-preceded property mean in CSS?
(4 answers)
Closed 6 years ago.
I'm using the Yahoo YUI libraries in a project. Can anyone help me understand the following CSS that I came across in the layout manager CSS:
I have been unable to figure out what the * (star) does to the declarations in the following CSS:
.yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-bd {
border:1px solid #808080;
border-bottom:none;
border-top:none;
*border-bottom-width:0;
*border-top-width:0;
background-color:#f2f2f2;
text-align:left;
}
This is a hack to apply styles only to older versions of IE
the * declared styles will override the new style elements , that are unsuported by Od IE only.
http://en.wikipedia.org/wiki/CSS_filter#Star_hack
The star exploits a bug in version 7 and below of Internet Explorer and is used to make IE render your markup correctly. More information here: http://www.ejeliot.com/blog/63