I realize that IE is not as friendly with CSS styles on the dropdown in a form. On a page I am building here:
http://vpointproductions.com/html-code/clinique-css.html
I am trying to fix the dropdowns to be the same height in IE7 as it appears in FF, Saf, and Chrome. However, the image I am using in the CSS to make it work in those browsers is still appearing in IE 7. I am trying to include an if statement for IE 7 to fix this issue but I am having no luck. The CSS i am using is here:
http://vpointproductions.com/html-code/clinique-stylesheet.css
You could use conditional comments for targeting just IE7
<!--[if IE 7]>
//place your styles here or a link to an IE7 stylesheet
<![endif]-->
Place this in the head of your document.
More info here: http://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx
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'm using bootstrap on wordpress and so far the only issue is that the styling is appearing weird on IE 7,8 and 9.
I'm assuming its because IE is in quirks mode.
Can I get all styling right for IE? So far i've tried respond.js and cssmediaqueries.js. Also the carousel works fine on the other browsers except for IE.
Website: www.kbbcredit.com
Sometimes, just putting a tag on the top of your html such as:
<!DOCTYPE HTML>
works!
It means, you want to use html5.
My page is at http://jerswebempire.com/ovrtur/index.php
The page displays nearly perfectly in all browsers except IE8. In IE8, floated divs have incorrect margins. For example, you'll see the search bar at the top is sitting underneath the nav. However, if you open the page in Chrome or Firefox or IE9, it's displaying in the correct spot.
What am I doing wrong?! I can't seem to find a fix.
Also, the box for Latest Video is in two columns in all browsers but IE8. It's similar to the above problem where there is a left margin added that shouldn't be there.
The page was built with Bootstrap.
Any help would be appreciated.
Use ie conditionals between your index
<html> </html>
add a class to for the 'ie 8 only' margins like the html boilerplate does.
Load a custom ie 8 only stylesheet and play with the margin problem there like this:
<!--[if IE 8]><link rel="stylesheet" type="text/css" href="ie8-only.css" /> <![endif]-->
Or load a class where you need it.
<!--[if IE 8]><html class="ie8 lt-ie9"> <![endif]-->
Apply the ie conditional class to whatever you need.
<div class="floatedDiv ie8"
CSS
.ie8 { margin:0px; }
I can't debug on ie8 but I searched and found that there is in fact a negative margin bug on ie7/8.
They recommend using
zoom:1, position: relative
as a workaround.
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'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 :)