I have a page that works fine in most browsers(Safari, FF, Chrome, IE9) but on IE8 it won't show the body background color. It shows the Body bgcolor as white. In the Developer Tools, I see that it is overriding all the CSS and getting some background-color:#fff from somewhere.
I have my scripts (jquery 1.6.2) just before the closing tag as is suggested on the HTML5 Boilerplate (html5boilerpate.com) - not sure if not having the scripts in the head section causes this behaviour?
Anyone any ideas ? This is really weird.
A couple things to try.
Toy with the load order of your css files. Whatever is loaded last will be the style if you don't specify !important
Inspect your rendered html for inline <style/> blocks as they could be causing trouble and not show up in the style tab as a specific css file.
When in doubt target background-color directly as background will
sometimes be overridden by a background-color property
body{background-color:#e6e6e6}
If that doesnt work you could force
override it with body{background-color:#e6e6e6 !important}.
Background color not working on Internet Explorer (IE)
IE apply some filter before rendering web page . that's why some page colors changed .
you can add following line in your CSS file to avoid it.
filter: none !important;
Scanning through the blueprint css, it looks like the background color #fff is being set in two different locations: textarea and in a select box. Try removing the background color property from textarea and see if that helps, or even better comment out the blueprint references to see if that's causing the problem. Seems like 9 out of 10 times a property gets overridden in IE its because a third party library is assigning a diff property to the same element.
Related
For some reason, a ::selection declaration in my CSS simply is not working, it is always behaving as per the default (light blue background on Chrome, Mac).
The code works fine in a jsbin
::selection {
background: red;
}
Thus my assumption is something is being overridden somewhere in the project, but I can't find another declaration of ::selection anywhere in the stylesheet. I was wondering if there is any way to see this in the Developer Tools to try to pinpoint or debug why it isn't working in my project?
Even giving the CSS an !important declaration isn't helping.
edit
OK, I tried debugging further by adding:
<style type="text/css">
::selection, ::-moz-selection {
background: red !important;
}
</style>
to the footer of the document, and thus it turns out that one cannot combine these two declarations in one statement, which was mentioned by Chris Coyier in this comment:
I have a question: Why can´t you put ::selection and ::-moz-selection together and define a value for both of that? If you do that FF will ignore the values.
That’s a good CSS lesson! When a browser doesn’t understand any part of a selector, it ignores
the whole selector (even if they are comma separated). There are some
exceptions but mostly in old browsers (IE 7?).
So all is well and working again, but the question still stands I suppose, is there a way to see this declaration in the devtools somehow?
edit 2
Ok, of course, when the declaration sits on its own line, then it appears in the inspector.
edit 3
A very relevant SO question: Why isn't it possible to combine vendor-specific pseudo-elements/classes into one rule set?
I'm just surprised Chrome doesn't just still show the malformed declaration in the inspector rather than hiding it completely.
Try to check via inspect element.
Right click on web page
Select "inspect" option
In inspect element panel, there will be style appear in right hand side.
You will find your :selection declaration in it.
I am using the background-color property in CSS media type print.
The problem is that Google Chrome does not show background-color or background-image in print preview.
How can this be solved?
Chrome supports control of background colour / image printing via CSS. You can set the following CSS property on elements whose background should be printed:
-webkit-print-color-adjust: exact;
Normally of course, this is determined by browser settings - but Chrome allows web designers to determine how backgrounds are printed on a per-element basis...
Notes:
Requires Chrome 17 or higher.
The background of the body tag is not printed.
Thanks to Cron’s Web Tech Blog, where I first spotted it:-
http://blog.crondesign.com/2011/11/print-css-backgrounds-in-google-chrome.html
Also, this leads to some background (no pun intended!) info regarding the feature:-
http://code.google.com/p/chromium/issues/detail?id=107763
Hope this helps...
I tried for hours using the ideas suggested but none worked. I needed to use !important
Somehow chrome must be deferring to a different background-color statement.
background-color:red !important
I think the issue is not with your code, but with Chrome: there is no option to print background (images or colors) : see http://www.google.com/support/forum/p/Chrome/thread?tid=17a4ac343580c8d3&hl=en
With Firefox, the background images are not printed by default, but it can be activated in "Print... -> Page setup"
You can try the developer tools in chrome to check which css rules applied in your DOM element. That will help you debug and fix the issue.
As usual I developed it in Firefox. Usually it works without modification in Chrome/Safari, and also IE8.
But when I tested on Chrome and Safari, I was surprised to see that it does not work.
My CSS is valid (validated on w3c). The JavaScript (using jQuery) seems to be valid too.
The affected elements are not redrawn after an attribute value is modified through jQuery, so the CSS rules for the new attribute value are not applied, not until I go into the Chrome inspector and deselect/select them manually...
Update: I do not have a working link for this problem anymore.
The problem was that Webkit was not "redrawing" when attributes were changed, but only when classes where changed, so CSS blocks with selectors such as div[attr=value] would not apply when attribute attr was changed to value through JavaScript.
One workaround is to use classes instead of attributes (.className) in selectors. Performing a class change after changing an attribute would also trigger a redraw also fix the problem.
This post is more than 5 years old, I believe the problem has been fixed in Chrome now.
The issues seems to come from the fact you are using attributes (selected attribute on DIVs) to control the state of your images; it seems like the webkit engine doesn't update the graphics until something actually changes - like a class or a style property.
In general, you should know that using a custom attribute like that isn't best practice. You can use a class to indicate when it's on, and .addClass("selected"),.removeClass("selected") when needed.
Also, you can display the images as background image of an element and control it directly from CSS, with:
.item div.caption { background-image: url('bras/B/btn.png'); }
.item.selected div.caption { background-image: url('bras/B/btn_selected.png'); }
this will simply change the image according to the div.item selected class.
For a simple work-around, you could add at the bottom of your .click handler something like $("body").toggleClass("somethingrandom");, but I really recommend to change your code to work with CSS, background-images and classes.
Do you need to modify the attribute value only? Could quite easily add a 'selected' class to the <div class="item" /> instead/as well. Using this alone/as well as your attribute targeted css will automatically update the images display.
Have you opened the error console within Safari yet?
In mine, I'm getting 404 errors on two files...
/bras/bras/A/3/2/1/bra.png
and
/bras/bras/A/1/pink/3/bra.png
EDIT:
You also have a </head> tag at the very end of your document instead of a </html> tag.
Chrome appends an stylesheet and it make a lot of problems for me. for example this selector
html>body, html>body * {background-color:#ffffff !important}
is one oe the things I can't override in my own styles. Anyone has a solution for that?
Though all browsers have a default stylesheet for elements, none of them set the background color as !important which wouldn't allow you to change it. What you show must be getting attached from elsewhere, not Chrome, but, without a link or the complete markup, anything we tell you would just be a wild guess.
I've read through other questions but to no avail - I really can't work this out.
The site is (Been redesigned, so isn't relevant anymore. It used HTML5 elements, but they weren't declared as block, and IE doesn't assume that they should be.)
The gradient on the footer looks great in non IE browsers, but fails to show in IE 7,8 and the IE9 dev preview.
Any ideas?
You could try adding this to your footer CSS (in addition to your existing footer styles).
footer
{
display:block;
}
This fixed it for me under FF3.6, and I'm assuming will fix it in IE as well - The default display style for <footer> is inline which doesn't play nice with backgrounds regardless of browser. Applying block to it will treat it more like a div.
You'll also want to be careful with your use of HTML 5. Not sure of how well supported it is in all browsers. You might want to consider <div id="footer"><!-- contents of footer --></div> and applying styles to it by id in CSS instead..
I had a similar problem, but finally find the solution.
Change your format image to png.
And works fine in IE8.
This works:
#footer_text {
background: url(/media/img/gradient.php?w=4&h=160&sc=4c4c4c&ec=000000) repeat-x scroll top left;
}
I'd be careful about applying any styling to html5 elements like footer right now. They're not well supported by all browsers.
You can use them for semantic reasons, though.
If I look at the footer using IE 8's developer toolbar, I get this as the background-image definition:
url(/media/img/gradient.php?w=4&h=160&sc=4c4c4c&ec=000000); TEXT-ALIGN: center
Notice the part to the right. I'm not sure where it comes from - it's not in the style sheet. Maybe the sheet is somehow garbled. If I remove the text-align part, the footer image shows fine. The same is happening to your body definition.
try opening the file in Photoshop or similar, and doing a clean save for web as a PNG.