I have a very strange issue in that no CSS styles are being loaded in IE8 (maybe IE7 as well but cannot check). My site is at http://www.leavetrackapp.com/ and my master CSS file is as follows:
#import url("reset.css");
#import url("screen.css");
#import url("site.css");
#import url("colorbox.css");
The master.css file and indidivual stylesheets are accessible if I directly enter the address in the browser e.g. http://www.leavetrackapp.com/stylesheets/master.css returns the main file.
I think it's a problem with the import rules but have no idea what it could be. Safari and Firefox work fine.
Any advice appreciated.
Thanks
Robin
#Guffa put me onto the right track with this: the problem is that the HTML5 elements aren't working in Internet Explorer 8 and lower.
Modernizr would fix this, but: http://www.modernizr.com/docs/#installing
Drop the script tags in the <head> of
your HTML. For best performance, you
should have them follow after your
stylesheet references. The reason we
recommend placing Modernizr in the
head is two-fold: the HTML5 Shiv (that
enables HTML5 elements in IE) must
execute before the <body>, and if
you’re using any of the CSS classes
that Modernizr adds, you’ll want to
prevent a FOUC.
So, you simply need to move Modernizr from just before </body> to inside the <head> element.
The problem is not that the style sheets are not imported, the problem is that you are using the HTML5 section tag, which IE8 and earlier does not recognise.
If you change the section tags to div tags, it will work better.
Related
I have developed on one project in woocommerce.It's working fine in all browsers
But that is not working in IE9 browser.
I don't know no clearly about that.I think there is a restriction to stop that style in IE9
how to remove that
can you please tel me that one to me
thanks & regards
Try to look for "if gt IE" or "if lt IE" lines in the source code of the page. They might be attached to the inline css. If so check the theme header.php and find where it generates the inline css.
Also the theme might use a specific IE css file that overrides the inline styles by using "!important" declarations.
Hope this helped!
I am working on changing the styling of pages within a learning platform. The platform allows for the user (me) to use my own CSS to change the styling of pages I myself have created. The problem is that the platform uses som predefined (and unknown to me) CSS before appending their CSS with my CSS. I don't have access to the actual HTML.
Here is the problem: I would like to use web fonts in my CSS. I have therefore been trying to use #import at the start of my CSS. My CSS is appended too late to the predefined CSS for #import to take effect. The only code I can give the system is my own CSS so I can't directly edit the html head to link to the web fonts.
Is there any other way to add web fonts to my CSS with said CSS being the only code I can write? Is it possible within CSS to append links to the html head? The support team of the platform consider this is a bug but don't offer a workaround. It would be nice not to have to wait for an update if possible.
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
Hi I seem to be having a problem with IE8 loading the stylesheet everything works well in IE9
but when I try it on IEteste it looks like it didn't load the stylesheet.Here is the links to the website:
website link
How can this be fixed?
You have a script tag for analytical purposes placed outside of the HTML tag. It needs to ideally be within the BODY tags. This is throwing a HTML validation error. That could be the cause of it.
Edit:
As someone mentioned, you might need some additional JavaScript to get IE < 9 working with HTML5 elements (tags). IE in versions lower than 9 don't understand many of these tags, so applying styles to them will do nothing. It simply fails silently.
Check this page for the code and information about this:
http://code.google.com/p/html5shim/
Once applying your CSS, you may also need to style many of these elements with display: block as many are inline by default.
You don't seem to be including the html5 javascript shiv for older browsers:
http://code.google.com/p/html5shiv/
I'd also move that trailing script inside the /body tag.
I am working on a site (www.eticket24.at) and have to create an external CSS for both the header and footer.
If I view the header, for example, seperately in FireFox by going to www.eticket24.at/header.php, it looks fine — the CSS is all there, and it's styled the way it should be. However, in IE8, if I do the same, the style is gone compeletely. It works on the index page, but not when I view it alone.
I am using link rel="stylesheet" href="http://www.eticket24.at/et24_header.css to include the CSS at the top of my header.php page. Same goes for my footer.php page.
So, what's the problem with Internet Explorer this time? Why won't it behave?
Thanks.
header.php doesn’t return a full HTML page, so maybe Internet Explorer is borking on that. Even though Firefox renders it, I don’t think you can necessarily expect all browsers to do so.
As ifaour mentioned, you might want to move your <link> tags into the <head> tag, as they’re not meant to go in <body>.
Your link is inside the body of the page... try putting it inside the <head /> section. Also add type="text/css" to the <rel /> tag.
It's because when you're vewing the header on its own, Firefox will correct the incomplete markup and make the page a valid html document with the <html><body>...</body></html> tags.
IE will not do this, so the styles will not be applied as it doesn't know to do this on an invalid page.
This is also why the page looks correct on the live site.
I included all the css inside the .php files themselves instead of linking them and changed some div names (from to , and to . This helped because css styling of the divs before were being overridden by the other companys css styling, so I had to create my own unique div names, instead of the standard HTML5 ones