I am using modernizr & declaring display:block in css on elements but no styles are being applied!
The link is: http://www.complexd.co.uk/blog-intro/
Also jquery masonry is broken in IE - not sure if this is related. All my attempts to fix this have come to nothing, so would be grateful if someone could guide me in the right direction. Not sure what I am doing wrong.
download
http://code.google.com/p/html5shiv/
Try this
<!--[if lt IE 9 ]>
<script src="/public/script/html5shiv.js"></script>
<![endif]-->
Change the src to whatever your path is
Related
I'm completely stuck on a really weird IE bug and non of the other posts about this issue seem to solve it. IE 8 isn't applying CSS styles to HTML5 tags on a site I've just launched. In the past I've always fixed this with a shiv and/or code like:
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
</script>
<![endif]-->
The website is http://www.unyouth.org.au/.
IE8 seems to recognise the header but as soon as it gets to the row of ASIDEs stops working.
Does anyone have any ideas why this is happening? Any help would be amazing.
Thanks so much!
Just figured this out, thanks #Sparky672 for pointing me in the right direction.
For anyone else having this problem the curve just below the coloured shards was created using an SVG. I was under the impression that if IE couldn't render the SVG it would just ignore it, however it seemed it was mucking up everything below it.
I haven't worked out how to remove the SVG for IE 8 down yet, because commenting it out with IE conditionals doesn't seem to work - but that's another issue. Removing it fixes the styling problem!
I have a fix, wrap your inline SVG in the greater that IE9 if comment.
<!--[if gte IE 9]><!-->
<svg id="svg-source" height="0" version="1.1"
xmlns="http://www.w3.org/2000/svg" style="position:absolute; margin-left: -100%"
xmlns:xlink="http://www.w3.org/1999/xlink">
</svg>
<!--<![endif]-->
Explorer absolutely hates invalid HTML.
Your invalid HTML contains duplicate id's. Specifically, #site is used in both <header> and <footer>. Some browsers just take the first occurrence and ignore the rest.
Line 440, Column 18: Duplicate ID site. <footer id="site">
Line 97, Column 19: The first occurrence of ID site was here. <header id="site">
To resolve your SVG removal issue (after ensuring you have valid HTML) - apply the following code to the top of your page in replace of the standard <html>.
<!--[if lt IE 9]> <html class="lt-ie9"> <![endif]-->
<!--[if gt IE 9]><!--> <html> <!--<![endif]-->
This will apply the class "lt-ie9" to the whole page where the IE version is less than version 9. Any version, 9 or higher, will display the normal <html> without a class.
At this point, you have a class that you can use in CSS to remove any element for those browsers.
.lt-ie9 svg {display: none;} /* this will remove all SVG elements with the class */
*Disclaimer: It's been a while since I've tried this on IE8. It may only work if you wrap your SVG in a div.lt-ie9 and apply it to the parent instead - I can't remember what errors are thrown. I'd test it, but I'm on Ubuntu and no VM on this machine.*
NOTE: The method of using conditional IE comments in your parent elements - either <html> or <body> - is common, there are lots of variants. You should apply some research in this area and use a more general case than the one provided here. This will afford you the wider benefits of this technique as well as solving this issue specifically.
I know this is not an uncommon problem, but my layout that works in all other browsers blows up completely in IE (8 and 9).
I don't know if protocol is to post all the code here or just a link...
it is: www.megadyne.com/safezone/index.php
I think the relevant part is that I have a container div which is position:relative and then a bunch of divs inside that are position:absolute and the inner divs are being pushed out in IE.
There are lots of other problems with the layout—only in IE, but hopefully they are related?
Thanks in advance!
Brian
Take a look at the css for http://html5boilerplate.com/ it does a pretty good job standardizing all the css for browsers before you put in your code. Try using their css and putting #inline your css into their css where it asks for your custom css, and see if that fixes the issue.
if that doesn't work you can have a separate css file for IE with the HTML5 code
//If browser is IE version 8 or greater
<!--[if gte IE 8]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
Turns out there was something wrong with my declaration. Fixed that and all is right with the world again.
I need an IE9 CSS hack to be able to set the background-position property differently for IE9.
I have tried with several different ones that didn't work and from what I read somewhere, the background property is not possible to "hack" at least the same way as the other.
I basically need this to only apply to IE9:
#ABB_ABContent .subnav li.selected { background-position: center 17px; }
Any suggestions?
If you can't find anything else, there's always conditional comments:
<!--[if IE 9]>
IE9-specific code goes here
<![endif]-->
This would have to live in your HTML code, rather than your stylesheet, but you could use it to include an additional CSS file for IE9.
Alternatively, you may want to look up the Modernizr library. This is a small Javascript tool which you add to your site, which detects what features your browser supports, and allows you to write your CSS to target specific features (or their absence). If there's something about IE9 that it doesn't support which you're trying to work around, this may be the best solution.
I'm still puzzled as to what problem you're trying to solve though.
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="your path" />
<![endif]-->
Please have a look at the menu at my site: http://server.patrikelfstrom.se/johan/fysiosteo/
In FF & chrome, it works as it should. But the css doesnt seem to get used in IE and i cant figure out why. Any help is appreciated!
Just i see your code in firebug. You used -moz-linear-gradient and box-shadow properties. I think this is not support lower version ie.
Try putting this:
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
into your code to allow the nav element to work in lower versions of IE.
I'm having problems with this website http://cspa.wa.edua.au.
The website is fine in most browsers however in IE the drop downs go behind the slider. I'm using aviaslider and super suckerfish for the navs.
Any CSS experts out there can have a quick look and let me know what I need to change so this problem is fixed.
The problem is with IE7 and is not to do with HTML5. Instead it is a conflict with the z-index of the aviaslider and associated script.
Adding position: relative and z-index: 99 to the <nav> element should fix the problem.
You just need the HTML5 shiv by the looks of it.
Try this in ur <head>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->