This question already has an answer here:
What is haslayout?
(1 answer)
Closed 8 years ago.
I see that the css property zoom: 1 is often used in stylesheets.
For example twitter bootstrap uses it in its fluid layout:
.row-fluid {
width: 100%;
*zoom: 1;
}
I know that it is primarily used for IE layout issues...
What is it actually used for and why? Is it only necessary to use it for fluid layouts?
http://reference.sitepoint.com/css/haslayout
in IE, some elements have no layout - which results in huge PITA in designing - so there are many non-intrusive ways to give them 'layout'. zoom: 1 is one of them.
Related
This question already has answers here:
Sass Variable in CSS calc() function
(6 answers)
Closed 4 years ago.
Problem :
Correct use of calc function with sass file.
Case :
.class1 {
max-width: calc(100% - #{$endWidth});
min-width: $startWidth;
text-overflow: ellipsis;
}
.class2 {
max-width: calc(100% - #{$startWidth});
direction: rtl;
}
Tried Case :
I have verified few answers in stack overflow, and from one of the question answers inspired my question - Stack Overflow Reference. The solutions aren't working for my scenario,
Should I use mixin in sass to get it to work ?
While calc() will indeed cause issues with SASS files by default, this can be avoided by using interpolation (which you are using correctly).
The only possible explanation(s) for your issue are:
You do not have (or have it incorrectly defined) SASS variables:$startWidth and $endWidth
Rules with higher specificity are overriding your selectors
You have cached old styles, hence clear your cache with CTRL + SHIFT + R
Here's an example JSFiddle showcasing your above code working.
This question already has answers here:
Sass - Manipulate inherited property?
(4 answers)
Closed 7 years ago.
Is there a way in SASS to get an element to inherit its siblings height so they line up on a horizontal line?
<div class="first">A bunch of content in here<div>
<div class="sibling"><div>
.first {
height: auto;
+ second {
height: use .first height;
}
}
Nope. Think about the way SASS works - your height: auto will be compiled into CSS as just that height: auto. There's no way for Sass to know what number that will turn out to be, so it can't assign a specific value to your second element. (It can only assign height: auto again, which may or may not be the value you want).
You can't make them the same height, but you can ensure that they all align within the row, which might accomplish the look you are going for (hard to be sure without knowing exactly what you are trying to do):
.aligned-row {
display:flex;
align-items:center;
}
This is newer CSS, so not completely backwards compatible:
More info on the display:flex can be found here: vertical-align with Bootstrap 3
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
This question already has answers here:
Is it possible to make a div 50px less than 100% in CSS3? [duplicate]
(6 answers)
Closed 10 years ago.
Is it possible somehow to calculate size of an element as a basic mathematical expression?
e.g.:
.wideColumn{max-width:100%-20em;} /*not working*/
This can be accomplished using LESS or jQuery. But unfortunately it cannot be done with pure CSS.
There are, however, workarounds to this issue using pure CSS. For example:
.wideColumn {
max-width: 100%;
margin-right: 10em;
margin-left: 10em;
}
Of course, this example may not work with your code. But there are numerous other workarounds.
Short answer is NO you cannot, not atleast in CSS 2, 2.1 spec, then too if you are interested you could take a look at Dynamic stylesheets with LESS
Or as Sandeep told, you can use calc() which is introduced in CSS3 spec
Reference
You cannot do this in CSS directly, but try something like LESS - http://lesscss.org/
it might be available one day, but not now - read more here http://www.w3.org/Style/CSS/specs#math
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