I'm trying to apply a certain style to the first letter in my header, which is made up of text. My webpage is here: http://smarterinfive.com
It works well in Chrome, but not at all in FF. Here are properties I already tried applying my styles to, with no avail (in FF):
header[role="banner"] .branding:first-letter {
background: #000;
}
.branding:first-child:first-letter {
background: #000;
}
.branding h1 a:first-child:first-letter {
background: #000;
}
It seems that anything with first-letter or first-child:first-letter isn't working, but everything with first-child only IS.
I also tried:
Adding !important at the end of these.
Viewing it in the developer tools, which didn't show the property at all.
The problem for .branding h1 a:first-child:first-letter is that first-letter can only be applied to block elements, not inline elements like a. See this previous question
I also don't understand why the others aren't working...
But why do you need to even use first-child?
You can get the same effect and solve the problem with this:
.branding h1:first-letter {
background: black;
}
It's actually more simple.
Demo
Related
According to the W3C, user important style declarations are supposed to have the highest priority, higher than author important declarations, but I'm not seeing that happen. If you go to jsfiddle (intentionally blank, I'm referring to the site itself), and look at the styling for the iframe, you'll see the following:
#content textarea, #content iframe
{
background: none repeat scroll 0 0 #FFFFFF;
border: 0 none !important;
box-shadow: 0 1px 3px #E4E4E4 inset;
}
I made a user style (using stylish) with the following css:
#namespace url(http://www.w3.org/1999/xhtml);
#-moz-document domain("jsfiddle.net") {
iframe
{
border: 4px solid red !important;
}
}
When I applied it, nothing happened. If I use firebug to disable the rule or remove the !important specified by jsfiddle, it works. It also works if I change the selector in my user style to #content iframe.
W3C specifically states: 3. Sort rules with the same importance and origin by specificity of selector Since the user style rule should have higher importance, specificity shouldn't have any effect here, so why does the style not apply when using only iframe as the selector?
(tested using firefox 24.2 in case that matters)
Since I haven't gotten an answer, let me give an actual example of what I'm trying to do, and why changing the selector won't help. Here's a dabblet demonstrating the exact html/css/js I'm dealing with.
The following userstyle properly applies a red border, but has no effect on the text color.
#-moz-document domain("preview.dabblet.com"){
#test
{
color: white !important;
border: 1px solid red;
}
}
Using a userstyle, how can I force the text to always be white?
You are correct that an !important declaration of origin "user" should take precedence over any declaration of origin "author", regardless of importance or specificity. However you are making an assumption that Stylish applies its styles with the "user" origin.
Since Stylish 1.4.1 for Firefox, it will apply styles with "author" origin by default. One reason for this change was compatibility with Stylish for other browsers. Their APIs only allow Stylish to add "author" origin styles, which meant that a style that worked in Firefox didn't work in Chrome. Yours is one example of where this would be the case.
The best way to fix this (and to ensure compatibility with other browsers, should you share your style on userstyles.org), is to increase the specificity of your selector to something greater than that of the site's CSS. The simplest way to do so would be to use the same selector as the site, but add a body type selector at the start:
#namespace url(http://www.w3.org/1999/xhtml);
#-moz-document domain("jsfiddle.net") {
body #content iframe {
border: 4px solid red !important;
}
}
There are cases where this isn't feasible: a style that affects iframes on many sites that couldn't be so specific with its selector, or a style trying to override an !important declaration inside an HTML style attribute. Stylish for Firefox allows you to switch your style to the "agent" origin with a special comment: /* AGENT_SHEET */. This will have the effect of your !importants beating anything the site can do (much like the "user" origin), but it will not work in other browsers and can cause bad things like crashes, so this is only suggested if the above method is completely unworkable for you.
All of this is described on Stylish's wiki along with some info less relevant to your situation.
You're right on with the specificity idea. The problem is both your rule and jsfiddle's rule use !important which means both rules have the same priority, but the #content textarea, #content iframe rule is more specific.
To solve, you could write your rule as:
#content iframe {
border: 4px solid red !important;
}
See this for more details: http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#CSS_parsing
That section will give you what you need, but the whole article is extremely interesting.
I noticed a cool effect in Chrome at this site, which may or may not be unique to Chrome but possibly for all Webkit browsers.
When the user drags to highlight something, they've changed the default color to pink.
Can you identify the selector?
I would like to see if someone knows of a reference page which describes these kinds of effects.
use
::-moz-selection,
::selection{
background: #fe57a1;
color: #fff;
text-shadow: none;
}
from HTML5 BoilerPlate
I found this CSS in that page:
::selection {
background: #E02F86;
color: white;
}
Also, tried it here.
I have some sliding door button css.. I use a button tag and two inner spans.
I have this to specify the background image of a normal button;
button span {
background: url(button_right.png) no-repeat top right;
}
Which is the default button colour. I then have a 'gray' button (i give the button a class of 'gray').
button.gray span {
background: url(button_right_gray.png) no-repeat top right;
}
For some reason .. IE(8) doesn't like this and ignores the gray css keeping the original image as the background. However, the following "hover" css DOES work in IE;
button.gray:hover span span {
color: #6c6c6c;
background-position: left -29px;
}
I thought that 'button.gray span' has higher specificity than just 'button span' (it does in all other browsers).
EDIT:
Ok, so I've discovered the problem. In my CSS declaration I had the following
button.gray span,
button:disabled span {
background: url(button_right.png) no-repeat top right;
}
If I remove the button:disabled span from the declaration list, it works!
IE does not support the :disabled pseudo class selector. IE's behaviour is to skip the entire rule when it encounters an invalid or unrecognised selector (which is actually in line with the specification - even if not supporting :disabled in the first place is not!), so that would explain what you're seeing.
have you tried adding !important to it? i.e.
button.gray span {
background: url(button_right_gray.png) no-repeat top right !important;
}
Did you try looking at the image itself? Using colours instead of images, ie8 seems to display the .gray class fine:
http://screencast.com/t/YzA4MGEx
As per my edit;
Ok, so I've discovered the problem. In my CSS declaration I had the following
button.gray span,
button:disabled span {
background: url(button_right.png) no-repeat top right;
}
If I remove the button:disabled span from the declaration list, it works! What is IE's issue with button:disabled as it completely stops listening to the entire declaration?
I've noticed that in the IE 8 Dev Toolbar's CSS tab, only some of the CSS elements show up. Does anyone know why that happens?
For example, in the CSS file, I might have:
.A
{
cursor: pointer;
color: #09F;
}
.B
{
color: #999;
}
.C:hover
{
text-decoration: underline;
}
But IE8's Dev Toolbar will show:
.A
{
cursor: pointer;
color: #09F;
}
.C:hover
{
text-decoration: underline;
}
Just a guess, but maybe your document doesn't have any .B items, or maybe everything in .B is overridden everywhere it's used and IE garbage-collects it? Or maybe you're loading an old version of the CSS sheet from the cache and need to refresh it or clear your cache.
When I try your example, I don't get the result that you are describing. All the classes show up under the CSS tab, even if they are not used in the page.
The pseudo class C:hover doesn't show up in the HTML style information on an element that uses it, but it shows up just fine under the CSS tab.
If you have some incorrect CSS, for example omitting the # in a color literal:
.B
{
color: 999;
}
Then the style is ignored if the page renders in standards compliant mode, so it naturally doesn't show up under the CSS tab. (If the page is rendered in quirks mode, the browser accepts the style eventhough it's incorrect and it shows up with the # added.)
I have a CSS rule like this:
a:hover { background-color: #fff; }
But this results in a bad-looking gap at the bottom on image links, and what's even worse, if I have transparent images, the link's background color can be seen through the image.
I have stumbled upon this problem many times before, but I always solved it using the quick-and-dirty approach of assigning a class to image links:
a.imagelink:hover { background-color: transparent; }
Today I was looking for a more elegant solution to this problem when I stumbled upon this.
Basically what it suggests is using display: block, and this really solves the problem for non-transparent images. However, it results in another problem: now the link is as wide as the paragraph, although the image is not.
Is there a nice way to solve this problem, or do I have to use the dirty approach again?
Thanks,
I tried to find some selector that would get only <a> elements that don't have <img> descendants, but couldn't find any...
About images with that bottom gap, you could do the following:
a img{vertical-align:text-bottom;}
This should get rid of the background showing up behind the image, but may throw off the layout (by not much, though), so be careful.
For the transparent images, you should use a class.
I really hope that's solved in CSS3, by implementing a parent selector.
I'm confused at what you are terming "image links"... is that an 'img' tag inside of an anchor? Or are you setting the image in CSS?
If you're setting the image in CSS, then there is no problem here (since you're already able to target it)... so I must assume you mean:
<a ...><img src="..." /></a>
To which, I would suggest that you specify a background color on the image... So, assuming the container it's in should be white...
a:hover { background: SomeColor }
a:hover img { background-color: #fff; }
I usually do something like this to remove the gap under images:
img {
display: block;
float: left;
}
Of course this is not always the ideal solution but it's fine in most situations.
This way works way better.
a[href$=jpg], a[href$=jpeg], a[href$=jpe], a[href$=png], a[href$=gif] {
text-decoration: none;
border: 0 none;
background-color: transparent;
}
No cumbersome classes that have to be applied to each image. Detailed description here:
http://perishablepress.com/press/2008/10/14/css-remove-link-underlines-borders-linked-images/
Untested idea:
a:hover {background-color: #fff;}
img:hover { background-color: transparent;}
The following should work (untested):
First you
a:hover { background-color: #fff; }
Then you
a:imagelink:hover { background-color: inherit; }
The second rule will override the first for <a class="imagelink" etc.> and preserve the background color of the parent.
I tried to do this without the class="", but I can't find a CSS selector that is the opposite of foo > bar, which styles a bar when it is the child of a foo. You would want to style the foo when it has a child of class bar. You can do that and even fancier things with jQuery, but that may not be desirable as a general technique.
you could use display: inline-block but that's not completely crossbrowser. IE6 and lower will have a problem with it.
I assume you have whitespaces between <a> and <img>? try removing that like this:
<a><img /></a>
I had this problem today, and used another solution than display: block thanks to the link by asker. This means I am able to retain the link ONLY on the image and not expand it to its container.
Images are inline, so they have space below them for lower part of letters like "y, j, g". This positions the images at baseline, but you can alter it if you have no <a>TEXT HERE</a> like with a logo. However you still need to mask the text line space and its easy if you use a plain color as background (eg in body or div#wrapper).
body {
background-color: #112233;
}
a:hover {
background-color: red;
}
a img {
border-style: none; /* not need for this solution, but removes borders around images which have a link */
vertical-align: bottom; /* here */
}
a:hover img {
background-color: #112233; /* MUST match the container background, or you arent masking the hover effect */
}
I had the same problem. In my case I am using the image as background. I did the following and it resolved my problem:
background-image: url(file:"use the same background image or color");