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
Related
How can I easily copy the whole CSS file a website uses to stylize HTML with Google Chrome, Firefox, Safari, and Opera?
With the web inspector, I can see the css styles applied to an element, but I can't see the big picture of styles applied to the whole HTML document.
Can you show me how can I do this?
For chrome you can use Quick Source Viewer to see all CSS, whether in the body or the head, whether in the served HTML or injected at runtime.
It is better than the dev tools as you don't have to go looking for the style tags, and saving them is just a right click on the link.
The answer given by Bobby Russell is not correct in this case.
Just follow the steps:
Open the Firefox and type google.com in the url
Now Inspect the googlepage with the help of firebug.
You can see in the attached image how to select the css file
Right click the page and view the source.
Ctrl+F link rel="stylesheet" type="text/css" href="
Follow the link
See the CSS
Not too hard...right?
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.
It doesn't always happen so it makes me think it happens when the browser doesn't have the css cached. What happens is the page loads and you see the entire page without any css and then it "pops" in styled. The css files are hosted off a different domain and they're all in the header of the document. Any thoughts?
Browser around the source I noticed that we have google optimizer code on some pages. Could this cause this to happen?
There might be many reasons, behind this, but as you described:
Your CSS are not included in inside the <head>
Is this perhaps a flash of unstyled content.
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.
My website (http://www.cryptum.net) seems to be missing all CSS styling in Internet Explorer 8. My drop down menu isn't showing. Everything I have styled isn't showing. Can anyone tell me how I can fix this?
Put
<link ...>
elements into
<head>
of the page.
You can also check W3C Validator: http://validator.w3.org/check?uri=www.cryptum.net&charset=%28detect+automatically%29&doctype=Inline&group=0
There are really many errors in your document.
I suspect it's because your HTML markup is totally messed up. Choose a doctype and make sure your markup validates for it. I'd suggest HTML 4 transitional as a starting point, it shouldn't be too hard to make it validate.
Please move your
<style> </style>
tag into head, should fix the problem, alternatively you can use php to load the style-sheets as a fool-proof method.