I have been trying to solve this for 2 hours now but no luck. The less code snippet works fine in all browsers except IE8. I checked IE8 supports :after and :before
I'm using standard IE8 doctype, using HTML5 shiv and also not running this in compatibility mode?
#media print {
.app-header .large-header {
.logo span,
h1,
.action-links {
display: none;
}
.logo:before {
content: url('images/logo.png');
position:absolute;
top:0;
left:0;
width:150px;
height:28px;
}
}
}
UPDATE
Issue is that IE8 doesn't support printing content url. The workaround is to use an image instead.
IE8 does not support media queries this: #media print {} is not supported.
create a separate css for IE8 and in the HTML put a conditional like this:
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="style-ie.css"/>
<![endif]-->
See for yourself https://msdn.microsoft.com/en-us/library/ms530813(v=VS.85).aspx
Dynamic HTML (DHTML) expressions can be used in place of the preceding
value(s). As of Windows Internet Explorer 8, expressions are not
supported in IE8 Standards mode. For more information, see About
Dynamic Properties.
I don't know about your markup but is it an option to remove the background image of the logo and use an actual <img> tag for it?
That way you would not need to change a lot of styles for printing pages. You should also keep in mind that there are a lot of printers out there, which disable background-imagery and background-colors by default!
Related
I have a weird issue where IE8 doesn't appear to render my background image using imported CSS.
Because of IE8's problematic issues and its lack to support many CSS3 elements, I am forced to use conditional logic to load specific stylesheets for my site content. I am using MVC4 and my _Layout page has the following in the header:
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
<link href="#Url.Content("~/Content/DeprecatedSite.css")" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if gt IE 8]>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<style type="text/css">
.gradient {
filter:none;
}
</style>
<![endif]-->
In my deprecated.css file I have the following:
#main {
background:url('/Images/iecollage.png');
background-repeat:no-repeat;
width:100px;
}
In my site.css, I have this comparable code for the same ID tag:
#main {
background:url('/Images/collage.png');
background-repeat:no-repeat;
background-size:920px;
width:100px;
}
I had to use 2 differently sized images and attribute definitions to correct the way the browsers interpreted the Markup. I am comparing the results using IE8 and Chrome.
When I launch the site, the home pages reflect the appropriate corresponding images and renders everything as expected.
My problem occurs when I navigate to another page which resides outside the Home directory (if that really makes any difference with respect to the issue).
The page has the following in-line code:
<div id="spotlight" style="position:relative;left:-50px; top:2px; height:820px;margin: 0;width:650px;">
In my Site.css file I have the ID styled as such:
#spotlight {
background:url('/Images/orange_spotlights3.jpg');
background-repeat:no-repeat;
-khtml-opacity:.60;
-moz-opacity:.60;
-ms-filter:"alpha(opacity=80)";
filter:alpha(opacity=80);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.6);
opacity:.60;
width:100px;
}
In the Deprecated.css the style is:
#spotlight {
background:url('/Images/orange_spotlights3.jpg') no-repeat;
}
In Chrome, the style gets loaded from the imported stylesheet. But in IE8 I get a blank area where the image should be loaded.
The quirky behavior I noted is that if I were to remove the following lines from the Site.css file, then both Chrome and IE8 will render the image but I loose the transparency effect in Chrome which is not the intent of separating the ID's to different stylesheets.
-ms-filter:"alpha(opacity=80)";
filter:alpha(opacity=80);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.6);
opacity:.60;
Its as if the 2 stylesheets are confusing the browsers or something.
Any explanation would be greatly appreciated.
As it stands, I am thinking of simply scrapping any support at all for IE8 because its getting to be too much of a bother trying to create 2 different accomodations to render the elements.
If you're using MVC it may be a problem with the absolute path which is kind of what it sounds like is happening. (Try pulling up your developer tools in Chrome or FF and check out the console while doing a page reload see if you get a 404 on the image GET request)
You can try something like ../../Images/orange_spotlights3.jpg where each ../ is one folder level up. You could also look at using a helper like #Url.Content("/images/orange_spotlight3.jpg") or try the absolute path all together.
Ok, after doing some blundering with the stylesheets I managed to get both to play together. What I ended up doing was retaining the comments for all the previously mentioned lines in the
Chrome stylesheet except for opacity:.60
So my stylesheet that will be used to support all other browsers other than IE8 now looks like this:
#spotlight {
background:url('/Images/orange_spotlights3.jpg');
background-repeat:no-repeat;
opacity:.60;
width:100px;
}
The other stylesheet for IE8 remained as is and both pages render the image appropriately according to their assigned stylesheets.
Apparently the following attributes don't work well in IE8 and can obviously cause problems:
-khtml-opacity:.60;
-moz-opacity:.60;
-ms-filter:"alpha(opacity=80)";
filter:alpha(opacity=80);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.6);
I have tested this using Firefox, Chrome and IE8. I have not seen if there are issues with any other browsers but I would imagine this should work with Safari as well.
What I still have no explanation for is why those elements affected IE8 browser when they clearly did not exist in its assigned stylesheet.
In the next revision of this site, I will definitely drop support for IE8 altogether. As much as I'd like to make it available to users having out-dated versions of IE 8 and earlier, its just added labor to try to keep up a dead horse. :-)
I have a gallery in which i'm using the figure and figcaption tags. This displays fine in all modern browsers but in IE8 it breaks the CSS for the figure and figcaption tags because the browser doesn't support them. Just including the html5shiv library doesn't fix it. Is there a method within that I would have to call?
the problem was that the figure element did not automatically size to the picture it contained so it needed to be specifically set in the CSS
I ran into this same issue and found that it stemmed from specifying max-width: 100% for img elements. If I remove this declaration, IE8 renders the images at the appropriate sizes. Unfortunately, it means they won't responsively size on smaller screens.
The best solution I know of is to specify max-width: none using a conditional comment that's applied only in IE8 and earlier:
<!--[if lt IE 9]>
<style rel="stylesheet">
img {max-width: none;}
</style>
<![endif]-->
I googled in here, and tried to print only the div's i want.
used this,
#media print
{
#top_area { display: none; }
#left_area { display: none; }
#buttom_area { display: none; }
#contents_area { display: block; }
}
and it works fine in chrome and over IE9.
But the problem is under IE8.
It just immediately shutdowns the browser :(
Any good solution?
Internet Explorer versions before IE9 do not support media queries.
If you're using the #media print directive to provide a print stylesheet to modern browsers, you can take advantage of Internet Explorer's conditional comments to target specific versions of IE and deliver a print stylesheet to them. You will, of course, need to have a separate print.css for these versions of IE to consume.
For example, in your HTML's <head>:
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
<![endif]-->
This code snippet says, "if I am a version of Internet Explorer BEFORE IE9, use this print stylesheet". Versions of IE9 and up will not use this stylesheet.
This way, modern browsers that understand the #media directive get the benefit of not having an additional http request for the print stylesheet, while providing a fallback for browsers that do not support #media.
Windows Internet Explorer 9 introduces support for media queries. That is why it is not working for you in IE 8
This is not supported in IE8. Possible workarounds are suggested at IE8 support for CSS Media Query. Hope this helps. :-)
Quick question about using .htc files in CSS.
If I use * to stop anything but IE using the style and it's a file I'm using it on (htc, image etc), do other browsers load it in as well?
I've got a SASS mixin for box sizing but don't want to load the htc file if I don't have to.
// Box sizing
#mixin box-sizing($boxmodel) {
-webkit-box-sizing: $boxmodel;
-moz-box-sizing: $boxmodel;
-ms-box-sizing: $boxmodel;
box-sizing: $boxmodel;
#if $boxmodel == border-box {
*behavior: url(/js/boxsizing.htc);
}
}
Thanks
Other browsers don't identify behavior as a valid CSS attribute, so your .htc file will not be loaded by anything than IE.
Note that the proprietary behavior property gets parsed and interpreted by IE8; you're warned against this in the polyfill usage section:
If you prefix the behavior property with a star, like seen above [sic], it
will only be seen by IE6 & IE7, not by IE8+ (it's a hack) which is
better for the performance on those newer browsers.
If you are not big on css hacks (or big on neat setups and performance), you should use IE conditional comments to include a separate stylesheet for IE7:
<!--[if lte IE 7]>
<link rel="stylesheet" href="ie7.css">
<![endif]-->
<!--[if (gt IE 7)|!(IE)]><!-->
<link rel="stylesheet" href="majestic.css">
<!--<![endif]-->
You would also be able to use a custom mixin for the property and compile two versions of the stylesheet:
#mixin border-box($ie7) {
#if $ie7 {
//forget vendor prefixes, this is for IE7 only!
behavior: url(/js/boxsizing.htc);
} else {
//remember the vendor prefixes this time!
box-sizing: border-box;
}
}
Define $ie7 as truthful in the ie7.scss and you're good to go.
Im using a rockettheme template and have edited some of the css code using a custom css file.
I have managed to get it how I want it to look on Firefox and Chrome however IE looks werid. the navigation is too low (the buttons) and the header is also too low.
The website link is found below.
http://www.colmanprint.co.nz/rfloorings/
as you can see on the link the menubar is down too low and the header.
at the moment im using a css code edit .rt-menubar {padding: 0px !important; margin-left:210px;} when i remove the margin-left:210px; it fixes my problem but then the menu goes behind the logo on chrome and firefox.
so i pretty much need to keep the margin-left:210px for chrome and firefox but have margin-left:0px for internet explorer
any ideas would be great!
For versions of Internet Explorer up to IE9, you could use conditional comments to differentiate between IE and other browsers.
Here's a quick example:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie9-and-below.css" />
<![endif]-->
Then in ie9-and-below.css you could apply a style such as:
#ieParagraph.rt-menubar {
margin-left:0px;
}
Where your HTML could look like so:
<div class="rt-menubar" id="ieParagraph">
<ul>Other stuff here...</ul>
</div>
If no styling was applied in your other stylesheets to #ieParagraph where the class was also .rt-menubar , this would only change the left margin of the #ieParagraph div to 0px in IE9 and under only.
For IE10, conditional comments have been removed - look into using Modernizr for feature detection.