I'm trying to finish this site http://jolaga.laohost.net/topsleva/. Almost all looks good in all normal browsers. But IE8 looks like in mobile mode - all containers are 100% width.
Respond.js and html5shiv.js are included. Meta is in head section. I don't know what else should I do ? For sure IE ignores media queries - but I didn't figure out why.
shot in the dark, because i don't have ie7/8 installed at the moment, but here goes:
offhand, it looks like you are targeting less than ie9, so here ie7/8, with ie7.css.
i never use bootstrap, but i'm assuming you are using the regular repo, and not one you've tweaked on your own.
if thats the case, i'm positive that style sheet is only for ie7, and that is why ie8 is all busted up.
you have two options here:
1) get rid of existing conditional comments. create a style sheet for ie8 and place it inside its own conditional comments targeting ie8 and only ie8/
keep the existing ie7.css style sheet and wrap it up in its own set of conditional comments targeting itself.
<!--[if lt IE 9]>
<script type='text/javascript' src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script type='text/javascript' src="js/respond.js"></script>
<![endif]-->
<!--[if IE 8]>
<link href="/css/bootstrap-ie8.css" rel="stylesheet">
<![endif]-->
<!--[if IE 7]>
<link href="/css/bootstrap-ie7.css" rel="stylesheet">
<![endif]-->
2). keep ie7.css, create new styles for ie8 within ie7.css file, but you have to target one of the ie versions with a hack, specific to that version. you can read all about it, and view examples here:
http://www.impressivewebs.com/ie7-ie8-css-hacks/
Solved. The problem was that bootstrap css was before custom styles. I swapped them and everything works like charm
Related
I am using conditional comments to apply different style-sheets for IE. This seems to work fine with IE7, but no matter what I try, I cannot get IE8 to load more than one stylesheet at a time. Both stylesheets appear as options in the Page -> Style menu and I can switch between them but IE8 will NOT apply both at the same time.
Example: http://www.davidapfel.com/booknow.html. I have applied a pink background in IE for testing purposes. IE7 displays the page as I intend it, but IE8 completely ignores the iefix.css and iefix2.css stylesheets. (I tried removing the conditional comments but that made no difference).
Thanks in advance for any clues
Edit: Just found that the same problem exists with IE9 - it also ignores the extra stylesheets.
Our website looks great in all browsers except IE 6-8. We're not even using many CSS3 features. These are just plain old IE rendering bugs (like margins and padding). Before trying to apply a bunch of IE specific fixes, I was wondering if anyone knows of a javascript library that I could apply to fix a bunch of these typical bugs?
Update: Like I mentioned, we're not necessarily using any "modern" CSS3 features nor HTML5, so these are just typical IE 8 bugs where IE renders things differently than all the other browsers.
Go for excellent normalize.css reset that takes care of most of it (also used by HTML5 Boilerplate)
Normalize.css is a customisable CSS file that makes browsers render
all elements more consistently and in line with modern standards. We
researched the differences between default browser styles in order to
precisely target only the styles that need normalizing.
As for getting support of CSS3 for browsers that don't support it, check out CSS3Pie
You don't need JavaScript; just use a CSS reset file: http://yuilibrary.com/yui/docs/cssreset/
That will work across most browsers to not only fix IE issues, but also make your site render more uniformly over different browsers.
You might wanna take a look at this one: https://code.google.com/p/ie7-js/
or this: https://code.google.com/p/html5shiv/
We're implementing CSS scrollbars on our website, and they're working fine with all browsers apart the older versions of IE (like IE8).
We cannot get IE to process the same CSS/JS rules in order to obtain the same output.
As we've noticed that some websites have managed to make explorer display the custom bars instead of the standards, I would like to know if someone has a pice of code to share that make the CSS bars appear exactly the same way independently from the browser that the client is using.
Thanks in advance!
There's no such magical piece of code to make website look the same on all browsers. Each problem is css/js is to be treated specially, especially on IE.
If you want to apply css rules to only internet explorer, you could make use of IE Conditional Comments
I used this one for custom scroll bars and it supports all major browsers, might be you have used these one..!! anyways here is link
http://www.hesido.com/web.php?page=customscrollbar
Write custom css for IE8 using conditioanal comments
<!--[if IE 8 ]><html class="ie8"> <![endif]-->
.ie8 .bar {
your code...
}
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 updated some of my CSS styles to use normalize.css recently but discovered an apparent inconsistency - it seems that in IE9 it won't let me set margins 0 around a checkbox element. But I couldn't find any specific mention of the problem. Here's an example of my test. And here's a screenshot of what it looks like in Firefox, Chrome and IE9
The reset styles are copy pasted from latest version of html5 boilerplate, which itself uses normalize.css by Nicolas Gallagher.
As I understood normalize.css, the idea is to keep some browser defaults but create a consistent layout for the components. However, from my quick testing, it looks like in fact there should not be a margin:0 around (checkbox/radio) inputs in order to create consistent layout, like so.
Having said that, smarter people than me worked on both normalize.css and html5 boilerplate, so either I'm missing something, or misunderstanding something.
IE9 adds padding. I guess that reset script doesn't take that into account. Add padding: 0 and you'll be set.
for my project I once rendered IE9 as IE8 by rendering it with meta tag of html
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"/>
so the same css worked for both