I using IE7 document mode using developer tools in IE9 browser, so that my webpage looks like how it is in IE 7 browser, to fix some issues only in IE 7 i used the below code only for ie7.
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->
I did modifications in ie7.css file and reviewed in ie7 developer tools in ie9 browser ,but no effect comes into existence .
But i view in ie7 browser the effect comes into exist
You should choose "Compatibility View" in browser mode to getting the CSS effect for IE7 specific.
make sure you're adding !important tag in IE7.css, Otherwise the elements will take rule according to priority.
Example:
.home_link{
color: #EEE !important;
padding: 15px !important;
}
Related
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.
I literally have to type in
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie8.css" />
<![endif]-->
to get my css hack to work for ie8. And yet when I click the 'abouts' tab in my IE browser, it clearly says IE8 version 8.0.6001. 18702.
I already reinstalled IE8 because I thought this issue was wierd but I still have to use the IE7 hack in order to get my IE8 only css to appear in my IE8 browser.
Is there something I can do to fix this? I have to talk to other developers and it is somewhat annoying not knowing exactly which IE version I have.
It looks like your IE8 is running in Compatibility View, which causes it to render pages like IE7, including reading IE7 conditional comments.
Look for the button in your toolbar that looks like a torn page, click on that, and it should disable it and return you to IE8 rendering mode.
I have an simple page, and everything works fine except ie8 and ie9 moves one of my elements 1px to the right, and its significant b/c it results in a 1px white line straight on black background. Horrible.
I've tried a lot of css hacks, and ie conditional comments but things like <!--[if gt IE 7]> or <!--[if gte IE 8]> aren't working. Only <!--[if gte IE 7]> is recognised, targets ie7 as well - but ie7 renders the page pixel perfect. So I've tried to rollback the changes for ie7 with additional comment <!--[if IE 7]> but this killed the fixes in later ie's. Ie8 and 9 seem to think they are ie7.
My code so far
<!--[if gte IE 7]>
<style>
#promo {margin-left:-1px;}
</style>
<![endif]-->
EDIT: Solved, It seems it is a bug in IETester, anything works fine in properly installed Explorers.
If it's just one thing you need to bump, you can also use:
<!--[if IE 7 ]> <html class= "ie7"> <![endif]-->
<!--[if IE 8 ]> <html class= "ie8"> <![endif]-->
This will give the html element the class of .ie7 or .ie8 depending on what they're using or what you've specified. You can then target whatever you want to override, like:
.ie7 #promo {margin-left:-1px;} or
.ie8 #promo {margin-left:-3px;} and target them individually. You could also specify a rule for IE 9.
And include it in your main stylesheet, near the bottom. This saves you from having to make a lot of different stylesheets.
As far as IE9 not rendering as IE9, I think Internet Explorer will actually fallback into a previous renderer if it's installed for reasons that are totally unknown to me. I think Paul Irish mentions it on his talk on the HTML5 Boilerplate on the onTwik website.
They use some code in their .htaccess file to force IE to use the most recent rendering engine, and will actually force IE to use the Chrome engine if it's installed:
<IfModule mod_setenvif.c>
<IfModule mod_headers.c>
BrowserMatch MSIE ie
Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie
</IfModule>
</IfModule>
I would recommend using an actual stylesheet with the IE conditional comments.
This article gives a good overview, but I'd avoid the hacks section.
http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
Are you doing anything that forces IE8/9 to go into Compatibility View? If so, you could be unwittingly telling those browsers to think of themselves as IE7, at least as far as it matters for interpreting those conditionals.
Does this conditional css loading for IE7 and lower work for IE8 in compability mode?
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->
http://blogs.msdn.com/b/ie/archive/2008/08/27/introducing-compatibility-view.aspx -> This clearly says compatibility view is to force IE8 render a page like IE-7.
If you have installed IE developer toolbar ( Install and use IE developer toolbar ), you can check if the CSS is used while rendering OR run the script # Detect Browser in compatibility mode to check which browser you're hitting.
I'm using the art sexy lightbox for my pictures presentation and also for html content in joomla. I'm using the Chrome and it works fine and displays everything as it should. The problem starts when i switch to ie8.
When i click on the image to xpand in the lightbox the image displays in the center of the page while the thole frame of the picture is on the left of the image.
I've tried playing with the artsexylightbox css file but couldnt get it to work in both browsers.
does anyone can say why is the difference? I suspect that the browsers treat the absolute,relative orders differently.
please help:(
You could tr to target WEbkit broswers only in your CSS to separate the behaviours of IE and Chrome (Safari ius a webkit browser too).
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* Webkit-specific CSS here (Chrome and Safari)*/
#artsexylightbox {
properties here
}
}
Or you could use Conditional Comments to set up a new CSS stlyesheet for IE:
<!--[if lt IE 9]>
<link href="path-to-file/IE.css" rel="Stylesheet" type="text/css"/>
<![endif]-->
Then use setup the properties that work for IE in the IE CSS, and the properties that work for Chrome/Safari in the normal CSS.
Note that even between FF and Chrome, there are a few differences in how they interpret CSS.
Hope that helps :)