I am working on www.doublegbobcat.com/preview and I have used a header element. Things are displaying as intended, except in IE8, where the header seems to be getting hidden on the z-index behind other content. How can I get the header element to display in IE8 the way it is in Chrome?
thx
The header element isn't showing up in IE8 developer tools, even though you've declared the new HTML 5 elements for IE lt 9
Instead, try including the HTML 5 "Shiv" script in your <head>
Link to script
More info
IE8 will not accept the HTML5 tag. You'll need to use conditional statements to replace it.
http://fortuito.us/diveintohtml5/semantics.html#unknown-elements
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.
So, I've tried everything I can think of, or have found regarding how to make sure that IE 8 will work with the 'content' property in my page.
No matter what I try though, when viewing in IE9 using F12 dev tools to view in IE8 standards mode, the page simply won't load AT ALL. I get a "page error" when viewing in Adobe's browser tester as well.
As soon as I remove my "content" property line from my css, then it works fine, but of course, then I lose my cool drop-shadows that I'm wanting to use in all the other browsers.
here's the page: http://saks-jewelers.com (the featured product section towards the bottom).
Any thoughts on what I'm missing? (this site is run using magento CE 1.7)
The content property will not work in IE8 unless you specify a doctype. This is according to W3C.
Put this at the top of your code and let us know if it works:
<!DOCTYPE html>
Both people on IE8 are going to be disappointed! Did you try checking the inspect element in ie8 to see if the error is more specific?
Is your drop-shadow defined in the last CSS loaded?
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 small website navigation issue and have the content working well in chrome, firefox and safari - but of course, IE fails to style the navigation menu at all.
I've created an unordered list and hacked styles onto it to make the menu horizontal.
Here is a direct link to the issue: (link removed).
The unordered list appears as exactly that, a bulleted unordered vertical html list in IE rather than the nice looking navigation menu in chrome.
Any advice?
In addition to the nav issue (which prevents all styling in this case on older versions of IE), there appear to be other problems as well.
The HTML code uses media attributes that are not recognized by old versions of IE, which means that they apply none of the CSS files. The quick fix is to remove the media attribute from the link element that refers to Large.css. A better fix is to collect most of the CSS rules into a file that you refer to with a link element with media=screen (or no media attribute), so that the media width dependent CSS files contain only those settings that you want to be different for different widths.
The IE 9 console contains CSS3114 error messages that say that #font-face did not pass the usage rights checks for OpenType embedding.
Medium.css and Small.css contain float: center which is incorrect (center is not an accepted value for float). Use http://jigsaw.w3.org/css-validator/ to check your CSS code.
You are using <nav> which is a HTML5 element. Old IE version (8 and lower) don't recognise them and don't style them.
To fix this you need to use HTML5shiv. Follow the instructions on that page to get it work.
In short, HTML5shiv creates every HTML element with document.createElement if you do that IE recognise them. To get the complete story: Paul Irish: The history of the HTML5 shiv
Replace the nav tags by div tags. It seems that no change to the CSS code is needed here, since you refer to the element using #nav, which works fine if you change <nav id="nav"> to <div id="nav"> (and </nav> to </div> of course).
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