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.
Related
We recently redesigned our public-facing site, however one item was not fully communicated.
A certain portion of our site uses some of the newer display types in CSS. This looks fine in almost all browsers, but not in IE8's compatibility mode or in IE7.
This wouldn't be an issue, except the miscommunicated item was that we DO need to support IE7.
For this reason, my initial fix (forcing IE8 into standards mode) was rejected.
I'm currently developing a CSS to override these sections of the page. We want this to be a separate CSS file, not to use CSS hacks within the main stylesheet for maintainability reasons.
My understanding is that I can include this (or not) by using IE's conditional comments to include it only for version IE7 and below. If I use the conditional comment
<!-- if lte IE 7>
will this also be included with IE8's Compatibility Mode? If not, how do I specifically target IE 8 Compatibility?
At least in IE9, IE does function as IE7 as for conditional comments. For example, with following code:
<!--[if IE 7]>IE7.<![endif]-->
<!--[if IE 8]>IE8.<![endif]-->
<!--[if IE 9]>IE9.<![endif]-->
"IE7" will be shown in IE9 working in compatibility view mode triggered via a button at the right of location bar.
Update: just tested in IE8 — it does the same as IE9.
http://www.grossmag.com/2012/september/home.shtml
This link works in both Firefox and Chrome. I am not sure why it won't line up correctly in IE. I am trying to convert from old style tables/td's/tr's and this will be great if I can find out why it isn't lining up in explorer.
Sounds like your site is being viewed in compatibility mode in IE. This can depend on the DOCTYPE of your document.
To cause IE to display using the default mode of the current version, use the following META tag
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
This will not fix the site for IE7 (for example). If you wish to do that, then you will likely need to create custom CSS rules for older browsers
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 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
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 :)