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.
Related
I'm looking for a way to append styles to my stylesheet dynamically with Javascript.
In today's browsers, I can use this for example:
<style>
#id{background-color:#F00;color:#000;}
</style>
<div ID="id">Test1</div>
<div ID="id2">Test</div>
<script>
document.getElementById('ID').innerHTML+="#id2{color:#00F}";
</script>
The above would change the color of Test from black to blue because of the javascript, but this code does NOT work with older browsers such as Internet Explorer 7.
In Internet Explorer 7, I narrowed the problem down to the fact that it produces a javascript warning symbol at the bottom left corner when it is expected to set the innerHTML value of the style element.
I tried replacing:
document.getElementById('ID').innerHTML+="#id2{color:#00F}";
with:
document.getElementById('ID').appendChild(document.createTextNode("#id2{color:#00F}"));
and I'm still unsuccessful.
I need javascript for this because I want to set the background image for multiple elements at once, and by ramming in CSS code, I can call the image only once. If I used native javascript properties for each element, then I'm going through numerous elements as well as requesting the load of the same element numerous of times, and if IE is bad with caching, then burden will be placed on the server.
What can I do in Javascript to append CSS data to the style element that works with IE 7? I'm looking for something simple.
Well, I went back to the olden days, and managed to pull this off in IE 7:
document.write('<style>'+d+'</style>');
the variable d is the actual rules to insert.
I understand this is a slower method as it creates numerous <style> tags which is bad HTML practice, but the idea works in IE7.
As soon as i place the into my script my page shows perfectly in IE but in firefox and chrome it doesn't load my css file at all.
But when i remove the doctype tag both firefox and chrome show the page perfectly!
And the weird thing is when i load the file locally it works fine with the doctype tag..
Is my host out of date or something?
"Solved"it with:
<!--[if IE]>
<!DOCTYPE html>
<![endif]-->
The solution you found yourself doesn't solve problems, it just puts a bandaid on it by not including a doctype for different browsers which isn't good practice.
You seem to have a lot of CSS errors and warnings, take a look at this link and work your way through them and maybe it will start working...
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.chatboxlive.com%2Fchat%2Findex2.php&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en
As for your HTML, you have duplicated some id names which is bad markup, take a look here and try either renaming them or changing it to a class as you can have many classes with the same name...
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.chatboxlive.com%2Fchat%2Findex2.php&charset=%28detect+automatically%29&doctype=Inline&group=0
A doctype is required in today's modern web pages. Without one, you are in quirks mode and, IE in particular, will struggle to present your page properly. You never want to be in quirks mode.
Remove your conditional comments and present that doctype to all browsers all the time on all web pages to remain in standards mode. Do NOT use IE as a reference for how things should work.
Write your markup as you think it should be done, validate it, then look to see if it works as you wish in all the browsers. You will have more problems with IE than the others but IE is most likely wrong.
When using IE8 to view IE7 through the developer tool's browser mode feature, I am having an odd recurring problem with CSS. When I make changes to an external stylesheet and then reference that class in the HTML, it's like IE7 won't recognize it at all. If, however, I put that same styling inline, IE7 will obey it. Has anyone heard of this before? Here's a simple example to help illustrate what I'm saying:
External stylesheet:
.bold {
font-weight:bold;
}
Call in HTML:
<p class="bold">My paragraph here</p>
No changes will be effective in IE7, although all other browsers are fine.
If however, I do this:
<p style="font-weight:bold;">My paragraph here</p>
IE7 seems happy. What's the difference? Do I really have to make CSS changes this way, or is there another workaround?
I'm baffled as to what the issue could be. I don't know if the developer tool's browser mode has a quirk and doesn't quite work as a real-life version of IE7 would, or if this is something completely different. I am using IE8 (I can't upgrade to IE9 at this government computer), but I've heard the problem persists with my changes in IE9's browser mode of IE7 too.
We're using ColdFusion to generate the HTML, using an HTML5 doctype (), and I've added a timestamp parameter to the 2 external stylesheet references so the browser is forced to grab a new copy every time.
Any help with this mystery would be hugely appreciated - thank you!
======
For #Stano or anyone else who is interested in recreating the exact problem, here is a stripped down version of it: https://docs.google.com/open?id=0B02DZPpIlMwGSk1VZHRDUHNCTkU (Can click File > Download to get the zip). Notice in IE7, "Photographer" is fine because it has inline styling, but the others aren't picking up anything.
With regards to your comments, you're right in saying that it could be a caching issue, but it could also be an issue with that stylesheet (though it doesn't look like that's the case), another stylesheet, or invalid HTML.
One of the things that I want to correct you on, because I think it may influence your understanding of how CSS and HTML interact, is that class attributes in HTML elements do not call CSS. Rather, CSS rules tell the browser agent how to render things with certain attributes. This is why we are able to use the elements ID, name, groupname, class, and other values to identify which elements to apply which class to.
I mention this because if you have invalid HTML (a missing end tag, a missing arrow, etc.) it can do all sorts of weird things. A few days ago it helped me solve an issue where a misplaced tag was actually causing a script of mine to loop on one of my pages.
Take a quick second and validate your HTML using the W3C Markup Validator.
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.
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