I'm using a combination of two classes on a span element.
Both look like they're working by themselves... Together they're not.
.black {color:black;}
.size_14 {font-size:14px;}
<span class="black size_14">my text is not black..neither large</span>
I tried changing the size_14 class name for another one (large) and in this case it is working.
Is size_14 an invalid class name?
SOLVED
I was overriding the behaviour with
.article_text_div .size_14 {color:#6D6E71;}
But thanks to this mistake I discovered It's better(?) not to use underscores inside class names
Double thanks
Luca
That example seems to work fine. There must be another rule that is overriding your change. Check the CSS with Firebug or a similar inspector, it will tell you exactly which classes are being used and overridden.
Underscores are not recommended in class names and ID's. Support is mixed across the board. I would remove it or replace it with a dash.
If I were you I'd be inclined to try the following, but without seeing the rest of the code it's difficult to tell if it'll make a difference..
.black{color:black;}
.size-14, span.size-14{font-size:14px;}
You can use underscore, article in above comment was written in 2001. All latest browser supports use of _. But most developer prefer to use "-" for class names.
http://jsfiddle.net/ZsR4A/embedded/result/
Works as expected in IE, FF, Chrome. Make sure your size_14 has higher specificity.
Related
Here is example it's only forking in html and not in css
How to fix this problem?
It's dificult to find information on internet because i am the only one who have this problem
In your case, the image shows you are outside of a css ruleset so there are many fewer emmet abbreviations that will work there. Your image shows what happens with a prefix of pos - it suggests things like :placeholder-shown, etc. that do appear as part of a css selector. If you are expecting the rest of the emmet abbreviations, like bg for background-color, use it IN a ruleset.
There seems to be some confusion from commenters (some since deleted) that emmet does not work in a css file - it does and has for some time.
I have a search bar plugin (Wordpress) which I have modified by CSS to suit my design. The thing is that it gets displayed ok in my latest version of Chrome, but it doesn't in other versions of it or Internet Explorer.
Here is how it should be everywhere: http://i.imgur.com/eTpHgK2.png
Here is how it is displayed in iExplorer and some other cases: http://i.imgur.com/1WKwYWc.png
The URL is: impresionados.net
The CSS: http://pastebin.com/bjpLS3DM
After having a look it seems like the custom styles are being applied in the first situation, but not on the second one. I have looked for missing semi-colons or closing curly braces, but I haven't seen anyone missmatching.
Where could the problem be or which tools could help me identify the problem? Thanks!
You wrapped almost all your code in media-queries, that can only be interpreted by some browsers. You might want to think about implementing http://modernizr.com/ to create fallbacks for that scenario.
Have a look at http://caniuse.com/#search=media to check to what extend you can use certain CSS selectors.
I have this weird scenario where I am moving code between two servers. In the original server everything looked ok, however in the second server the CSS breaks. When I looked into the code, it seems the css styles/classes and the html counterparts both have different casing and those too vary for the same class, so for example, html has class="main_menu" and css has .Main_Menu.
So obviously it should break, however in the original server it seems somehow the casing was ignored and for that reason everything worked properly. So any idea how that was achieved?
CSS selectors are already case-insensitive.
What you have to watch out for are HTML class names, as they are case sensitive.
See this question for a more detailed explanation.
There are two ways I will tell you to fix this, but both are, in essence, just slapping a band-aid on it and calling it good.
Change each HTML class to include the new CSS selectors
Run the entire stylesheet and HTML rules through a toLowercase() method of some sort.
Both of these will fix your problem, but neither are a very good solution.
The moral of the story is to use one case and stick with it. There is no point in going back and forth.
I've seen this used once or twice now, where ! mark is put before property name. For example:
!overflow: hidden;
(also, see here)
Can anyone shed some light on what its purpose is?
I can't find any information about it but it is apparently a hack. At least Chrome will not apply the styles where the property names have exclamation marks in them. What's interesting to me is that at least for the styles I checked, the exact same style is applied by another stylesheet except correctly -- so maybe it's just a straight up mistake.
<div id="SideBar" class="sidebar mainbar">
I've just seen this in a .aspx file. Is this valid? Can someone point me in the right direction to learn what this does. I'm assuming its valid, but I'm not finding it in the css file. I am finding sidebar defined as a class, but not mainbar.
Thanks in advance,
Randy
This div just has two classes, which means it will get the properties defined under .sidebar as well as those under .mainbar
Sure, you can have an element implement as many css classes as you like. If there is no class defined in the CSS files it is possible that either:
The additional css classes have been removed from the styles sheets and the .aspx pages have not been refactored to match.
The css class is been used to identify the element(s) via javascript or some other scripting language.
As for mainbar not showing up in your CSS file, sometimes developers assign classes to elements and then reference those classes in javascript.
Yes this is perfectly valid. An element can be styled by multiple classes.
See this reference and this one which touches on which one takes precedence for duplicate style attributes.
CSS Tricks has a few other CSS tricks including having two classes.
Copy/Pasting the trick from the above site:
Usually attributes are assigned just one class, but this doesn't mean that that's all you're allowed. In reality, you can assign as many classes as you like!
Using these two classes together (separated by a space, not with a comma) means that the paragraph calls up the rules assigned to both text and side. If any rules overlap between the two classes then the class which is below the other in the CSS document will take precedence.
Beware of IE6 if someday you try to style an element using more than one class, it doesn't work like intended.
Googling "multiple classes ie6"
test case
No problem with id+class (like #anid.class ) or two selectors like .classA and then .classB but no .classA.classB