I have an issue with this site in IE: http://www.coachjoelleinc.com/
In all other browsers the JS rotator in the top right gives me correctly styled teal colored buttons. In IE 9 the buttons change to Black and White. Any ideas? I'd love to know if there is something I can do to plan for this in future projects.
It's because you're adding the gradient using Mozilla prefix, which is not understood by IE:
-moz-linear-gradient(#6BA4B4, #26687B);
Therefore, IE will fall back on the background-color:black; that is also defined for the same CSS classes (.wt-rotator .thumbnails li, .wt-rotator .play-btn, .wt-rotator .prev-btn, .wt-rotator .next-btn)
Try setting this instead (as described here):
.wt-rotator .thumbnails li, .wt-rotator .play-btn, .wt-rotator .prev-btn, .wt-rotator .next-btn {
background: -moz-linear-gradient(#6BA4B4, #26687B);
background: -webkit-linear-gradient(#6BA4B4, #26687B);
background: -o-linear-gradient(#6BA4B4, #26687B);
background: -ms-linear-gradient(#6BA4B4, #26687B);
background: linear-gradient(#6BA4B4, #26687B);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#6BA4B4', endColorstr='#26687B');
}
Related
I am using Twitter Bootstrap with Wordpress.
Bootstrap outputs the following css in bootstrap.css
.navbar-inverse .navbar-inner {
background-color: #1b1b1b;
background-image: -moz-linear-gradient(top, #222222, #111111);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#222222), to(#111111));
background-image: -webkit-linear-gradient(top, #222222, #111111);
background-image: -o-linear-gradient(top, #222222, #111111);
background-image: linear-gradient(to bottom, #222222, #111111);
background-repeat: repeat-x;
border-color: #252525;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff111111', GradientType=0);
}
If I want to override this code in my style sheet, do I have to specify every class element?
For example, if i want the nav bar to be totally black - no gradients etc - is there a quick way to do it without copying every class attribute from above and changing every hex value to #000000?
I believe this would be good enough to do the following to override the background properties baked into Twitter Bootstrap:
.navbar-inverse .navbar-inner { background: none }
The background property is considered short hand so that simple declaration should work properly.
The background property's shorthand usage is as such:
.navbar-inverse .navbar-inner { background:#000 url('/path/to/image.png') no-repeat 100px 100px scroll; }
This one simple property can declare and override background-color, background-image, background-repeat, background-position, background-attachment, and background-clip all at once!
Also!! It may be a good idea to make the selector within your stylesheet a bit more specific to ensure that you don't run into specificity issues.
Here's a jsfiddle example: http://jsfiddle.net/f5Yyj/1/
You should be able to overwrite individual background properties by using the combined property of just background. For example background: black; should overwrite all background-related properties above.
But be weary of specificity battles. Your CSS selector should be more specific than this one to ensure that you won't have undesired conflicts.
To overwrite previous CSS, either write an equally strong selector (as you suggest in the question), a stronger selector (IDs take priority over multiple classes), or add !important to the selector.
Example of !important:
.navbar-inner { background: #000 !important; }
While convenient, overusing !important will cause sustainability problems. Try to avoid using it whenever possible.
The absolutely best solution is to change the Bootstrap CSS directly, but if you're unable to do that then I'd recommend writing an equally strong selector.
All these tips will work, avoid using !important this is a better approach.
Include your css (site-specific.css) after Bootstrap's (bootstrap.css), you can override rules by redefining them.
For example, if this is how you include CSS in your <head>
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/site-specific.css" />
put the property in the site-specific.css
#navbar {
color: #000000;
}
I added some styling to selects using the following class:
.form-fields select {
height: 24px;
background: url(/Images/ui/input-bg.jpg) #FFF repeat-x;
border: 1px solid #AAA;
}
This works in all browsers except it causes Safari on Windows to omit a drop down arrow.
If I comment out both background and border properties (and only both) the arrow is restored yet the height is ignored in all the other browsers.
I'd like to keep this styling as Windows Safari is a minority but am curious to know if there is a solution that works for all.
Place this in your css
*{
-webkit-appearance: menulist;
}
I was having the same bug on iPhone iOS. I removed a background-color:transparent; style and it fixed the missing select arrow browser UI.
I have tried above code but it was not working for UI which was created usingh jquery.min.css. I have tried below css and it resolved my issue.I am targeting ui-icon-carat-d which shown dropdown arrow
.ui-icon-carat-d:after{
background: url("https://cdn1.iconfinder.com/data/icons/pixel-perfect-at-16px-volume-2/16/5001-128.png") 95% 32% !important;
background-repeat: no-repeat !important;
background-color: #fff !important;
}
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;
}
possible to use css to have zebra stripe as background without using image?
Yes you can, with something like
ul li {
background-color: #fff;
}
ul li:nth-child(even) {
background-color: #efefef;
}
See:
http://reference.sitepoint.com/css/pseudoclass-nthchild
http://reference.sitepoint.com/css/understandingnthchildexpressions
Edit
You really should've stated clearly what you meant by zebra strips ;)
If you need gradient backgrounds without using images, see:
http://www.webdesignerwall.com/tutorials/cross-browser-css-gradient/
Basically, the syntax you'll be using will look something like:
background-image: -moz-linear-gradient(left, #fff, #999);
background-image: -webkit-gradient(linear, #fff, #999);
See:
https://developer.mozilla.org/en/CSS/-moz-linear-gradient
http://webkit.org/blog/175/introducing-css-gradients/
For more details
It's a little hard to understand what you're after, but I would suggest maybe looking into Base64 encoded images in css
Base64 Encoding Image
or alternatively using canvas or the svg namespace to draw it yourself
Not really in the context I think you are referring to. You can use CSS3 selectors to target alternating items.
ul li {
background-color:#000;
}
ul li:nth-child(odd) {
background-color:#FFF;
}
Even though you stated no image, the best solution would be to use a 1 pixel wide image with 2 rows that you repeat across x and y axis.
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?