Since IE8 doesn't handle PNG 24 transparencies very well, I decided to nix the background image of my PNG's container div so that the background matches the background of my PNG.
Basically, I want to get rid of the background image for #myDiv in IE8 or earlier browsers.
In the header of my page I use:
<!--[if lte IE 8 ]> <style>
#myDiv{margin-top:20px;}
#myDiv{background-image: none;}
</style> <![endif]-->
Changing the margin-top works fine (along with all other adjustments that I made for IE8). Yet the background image still appears, no matter what I try! Short of getting rid of it in my external style sheet, I can't seem to make it not appear.
In fact, when the page loads, it looks like the code initially gets rid of it, but it comes back. I thought that inline styles always trump the external style sheet. Am I wrong?
I checked my css #media stuff, and there's nothing in there that might bring it back. I cleared my browser cache and refreshed. Still there.
Anyone have any clue why #myDiv's background image keeps coming back?
EDIT: I'm working in the header.php template of a wordpress site. (That's where I inserted the code above.) So maybe the external style sheet does indeed trump inline styles in this case?? I don't see why it should, but could that be the answer?
I know it's not a perfect solution, but would adding the background image as a media query work (as IE8 does not support media queries)?
#media (min-width: 1px) {#myDiv{background-image:url(/etc/etc/etc.png);}}
Try using this code:
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Also make sure your background image is at least 4px x 4px
Here is a related post:
PNG background image not showing in IE 8< using html5?
Related
I'm having some problems with my page, I'm using less css and one of atributes css is the line-height is not working so very well. On all browser appears the same mode but on the IE it appears different.
This is the problem:
If you take a look. will see that the IE shows the text more higher than the checkbox on IE
I'm using a variable to define the line-height, so I'm wish know if exists some hack or trick to use two values to the same variable (i.e line-height = 20 - if any browser, line-height = 25 - if IE browser, or some way to resolve this issue.
I just want align the checkbox and the text.
You could try
<!--[if IE]>
<style>
</style>
<![endif]-->
I have a website build on the Wordpress Platform whith an horizontal menu.
When viewed in ie 9+ and firefox it seems okay, but on ie8- the menu css classes seems not right.
I am struggling to find the problem in the css using firebug.
Could someone please give me a hand and help me with this problem...
my website is: www.markett.nl
asfasf
You're using HTML5 tags like header, nav, footer, which are not supported in IE8 and below. If you want this to work in IE8 and below, just add this script in your head :
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
if you look at your IE8 interpreted source - you'll see - IE8 doesnt render nav-Tag proberly. This is because nav-Tag is HTML5 standard - and <IE9 is not able to deal with that. That's why you need to implement html5.js - to solve that issue. You did - but the file doesn't exist.
Its seems like you have used css3 properties in your code. Ie8 dosent support css3.
A work around for this is u can add PIE.htc in your project, here is a link check it out
PIE.HTC
Well the main problem that arises is that IE8 and older dont implement the tag correctly. I would make another wrapper or change it to a div. Also you should left your elements float some more for IE. Hope it helps u one step further.
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.
I have run into a problem with absolute positioning on elements in IE8 when printing.
I have my print stylesheet, and in this I'm trying to position an element in the top right corner of the first printed page.
The problem is that when the element is placed on page two, IE8 thinks that the top of the page in on page two, instead of page one.
This is in my print.css:
.myElem{
position:absolute;
top:0;
right:0;
width:230px;
}
In all other browsers (Opera 11, Firefox 3.6, Safari 5, Chrome 11, IE9, IE9 compatibility mode, IE8 compatibility mode) the .myElem-div will be printed on the first page in the top right corner. But in IE8 the div is printed in the top right corner of the second page. As said before the div is located "on the second print page" in the DOM. I can't move the element up earlier in my DOM, so this is not a solution.
Actually it's the same problem as descibed in the comments by other users here: http://msdn.microsoft.com/en-us/library/ms533005%28v=vs.85%29.aspx#CommunityContent
Anyone have a solution to this?
Thank you very muvh in advance!
Regards,
Kim
Two possible workarounds... not really fixes.
Create printer-friendly versions of the pages that do not require a doctype, which is probably causing IE8 to choke. Of course, this is a lot of work... unless you do not have too many pages or you can generate those pages dynamically using server side tech.
Create an IE8-only stylesheet using conditional comments, example <!-- [if IE 8]> <link rel="stylesheet" type="text/css" href="ie-8.0.css" /> <![endif]--> and use this sheet to remove that div altogether with a display:none;, assuming that you could do without it.
I'm building a web site that uses a fair amount of drop shadows and gradients. I can accomplish a lot of this via CSS's box-shadow properties.
Alas, we're still supporting IE, so we need to add background images in those situations.
I could be lazy and just give everyone the background images, but I'm trying to streamline things for those that are using the modern browsers. Ideally, I'd like to have those users not have to request the images.
So, I'm adding an extra class via javascript if the browser supports the box shadow (box-shadowSupport) and my CSS ends up looking like this:
.box {
background: url('myImage.jpg');
}
.box-shadowSupport {
background: none;
[box shadow properties go here]
}
If the HTML ends up looking like this:
<div class="box box-shadowSupport"></div>
Will the image be requested? Or does the browser understand that it isn't needed due to the second style over-riding the background image property?
If the image is requested, I need to rearrange my CSS and javascript so instead of over-riding a style via the cascade, I'll have to swap out the classes so the first isn't even referenced in the HTML.
I believe every web browser will treat this in it's own way - as usual :) My suggestion is to use a web proxy like Charles and see, if the image has been requested or not. And of course, test this in the different browsers.
What you might want to consider is defining the IE specific styles in a separate sheet and loading it with conditional comments, like this:
<!--[if IE]>
<link rel="stylesheet" id="ie-css" href="ie-specific.css"
type="text/css" media="all" />
<![endif]-->
This will only load the sheet with IE-specific settings and you can override the other classes with !important markers. Conditional comments have been around since IE5, and any other browser will ignore the block above.
I would recommend just to skip the shadows in IE.
Most people use only one browser and they won't know that there have to be shadows. It isn't a big deal if the site looks different in different browsers as long they look normal (that means not glitchy).
Otherwise use with a if tag for ie specific css, and you can do drop-shadow there with:
.box {
filter: progid: DXImageTransform.Microsoft.dropShadow(
color=#818181,
offX=5, offY=5,
positive=true);
}
For more about that see here.
I am pretty sure that all modern browsers will load 'myImage.jpg'. Actually, the code you provided described the pure CSS way of preloading images without using javascript :)