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?
Related
I have this markup
<button class="toggle" aria-label="Toggle">
<div class="globe-img"></div>
</button>
and this SASS:
.globe-img {
background-image: url('../images/globe.png');
height: 50px;
width: 50px;
&:hover {
background-image: url('../images/globe-hv.png');
}
}
It works in all the latest browsers but IE. The hover pseudo state does not trigger in IE. I have found a number of questions on Stackoverflow about this, but they are all older and have not provided a solution (yet), so I figured it might be worth asking again.
Note that both states have a background image defined. I have added z-index and tried an IMG tag instead of the DIV. I tried display:block and added background colors. I appreciate any new pointers. If nothing else, I will just use Javascript to add a regular CSS class upon hover.
I could be wrong since I don't have IE to test...
I'm guessing the button as a wrapper is the issue. I assume the button's hover state clobbers the div's hover state. Does it work if you remove the <button>?
Alternately does it work if you move the hover to the button?
.globe-img {
background-image: url('../images/globe.png');
height: 50px;
width: 50px;
}
button:hover .globe-img {
background-image: url('../images/globe-hv.png');
}
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
I'm trying to take away a white border that is appearing from behind an image on my sidebar. I can't figure out what is causing the white border. I thought it was the padding, and then I thought it was the border. If you visit our home page (http://noahsdad.com/) and look on the side bar under the "new normal" picture you will see a "Reece's Rainbow" image. I'm trying to remove that white around the image. I pasted in the code below, but it's not doing anything. Any thoughts as to what I'm doing wrong?
Thanks.
#text-23 { background: none}
the reason it's not working is the background: none is never getting to the img which has the background set on it (backgrounds don't cascade down they exist in the element and you can have multiple elements layered on top of each other much like a painting. Which has the effect of the background cascading)
#text-23 img { background: none; }
that should resolve your problems. I am assuming that when you call the class textwidget you still want it to append the white background, just not for this instance. So if you set the above it will cascade properly with the correct specificity while leaving the rest of your page alone.
This can also be done by
#text-23 .textwidget img { background: none; }
but that level of specificity is not required. However if you try to just do:
.textwidget img { background: none; }
this will override all of the instances where the background is set on an image in the textwidget container.
You have added the white border yourself by setting the following in line 884 of style.css:
.textwidget img {
background: #fff;
padding: 5px;
max-width: 290px;
}
Simply remove the background declaration. If you only want to remove this instance of a white border, add the following rule:
#text-23 .textwidget img {
background: none;
}
This seems to be the conflicting CSS class.
.textwidget img {
background: white;
padding: 5px;
max-width: 290px;
}
If you want to debug css you should really look into Firebug(a plugin for Firefox) or Opera and use builtin dragonfly
These allow you to rightclick on your HTML page and inspect it.
Go to your style.css file and search for .textwidget img and change the background-color property to none. It is currently set to #FFFFFF which is the hex color code for white and is resulting in the white border or background (precisely).
.textwidget img {
background-color: none;
}
I have the following:
<div contenteditable="true">Item 2</div>
In webkit I can easily style this with css. Firefox is ignoring the css, and making the contenteditable div white and resizable.
How can I modify the css for contentEditable in Firefox. I want the background to be transparent and to disable resizing, and the resizing handle bar.
Thanks
You can match the div with this code
div[contenteditable=true] {
background: rgba(0,0,0,0); /* transparent bg */
resize:none; /* disable resizing */
}
div[contenteditable="true"] {
/* your style here */
}
simone's answer was mostly correct except there needs to be quotes around "true" in [contenteditable="true"]
Turns out that if you use position:absolute FF auto adds resizers and a grab handler and sets the background to white. You can't override these seetings, well only resizers. Another -1 for FF.
div[contenteditable] {
background: white;
}
When overriding styles for a contentEditable panel, the css selector I found that firefox was adding a css-selectable "focus-ring" to my root contentEditable node
:-moz-focusring:not(input):not(button):not(select):not(textarea):not(iframe):not(frame):not(body):not(html) { outline: 1px dotted;}
Try variants of:
-moz-focusring or -moz-focusring[contentEditable='true']
You may want the aforementioned styles:
background: rgba(0,0,0,0);
resize:none;
But, you may need to firebug lookup the -moz specific resize parameter to disable.
For cross-browser stylesheet tests, just browse to this test data url:
data:text/html,<div style='position:absolute;left:100;top:50;width:200;height:300;background-color:rgb(50,50,80)'><div contenteditable>Test<br/>Test </div></div> <style contenteditable>head, title, style {display: block;} :-moz-focusring{background: transparent}</style>
A transparent background gif or png should do the trick
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");