There's a working example here
I've got Modernizr running; I've got
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
...in the css, but in IE8 and below the styles don't carry, even though the elements wrap the child elements correctly?
Can anyone tell me what I'm doing wrong?
Thanks
James
You're not including modernizr anywhere in the source as far as I could see.
I did notice that you have a minified require.min.js script at the bottom of the page. If that script is dynamically loading modernizr, it'll break the HTML5 shiv, as document.createElement needs to be called in older versions of IE before any of the elements are used in the DOM.
From the Modernizr Documentation:
Drop the script tags in the 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 , and if you’re using any of the CSS classes that Modernizr adds, you’ll want to prevent a FOUC.
In IE8 and below, the elements appear as </element/>, correct?
You will need to use something that translates the elements for you. For instance, you can use HTML5 Shiv to allow the browsers to properly understand the elements.
Related
I thought I had finished the markup for this website that I am creating for my mom’s dog walking business, but then I realized that my CSS is only partially applied to my site in Internet Explorer. It’s strange because the body background image in my CSS displays but my nav image and nav's anchor tags don’t show and the borders to my divs are missing in IE.
Everything works fine in Firefox.
Also the padding and margins are crazy in ie.
I’ve read from people that ie generally isnt too friendly towards margin-left margin-right padding-left and paddin-top- stuff like that. That it generally prefers for example padding: 20px; or margin: 30px;
But I don’t know if that was what I did wrong. I don’t see how that would make my borders and nav image disappear in ie. Very frustrating.
The url is www.grinningpup.com/dannytesting/grinningpup.com/index.html
I tried to write semantic markup. I hope the solution isn't due to a stupid mistake I made.
Welcome to SO!
I've taken a quick look at your site and I can see the issue is that you've used HTML 5 elements which aren't supported in older versions of IE.
Easiest fix is to add Modernizr which is a javascript library aimed at detecting browser support, and in most cases, polyfilling them (only in this case). There are numerous resources on the subject. My fvourite is this; http://diveinto.html5doctor.com/ but just google and check SO for more information.
I hope this helps you!
You are using HTML5, which IE8 and below don't interpret right.
You'll need to include html5shiv and add the following to your css:
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
HTML "nav" tag and "section" tag not support IE 8 and earlier versions. So, you only use "div" tag solve all problem.
I want to start using some HTML5 tags, but worried how it will render on browsers that do not support HTML5. It seems like html5shiv is a solution I can use for IE browsers < 9.
However, what if the browser doesn't support HTML5 and is not IE? What then? Why is html5shiv an IE thing?
First, to be clear, html5shiv just makes it so that you can style certain HTML5 tags (section, article, etc.) correctly. It does not give the browser "HTML5 support" in any more general sense of the term.
With that in mind, note that IE <9 are the only browsers that don't allow styling of these HTML5 tags correctly, so that's why html5shiv only applies to them.
Other browsers (even very old ones like Netscape Communicator 4) will still parse the unrecognized tags correctly and allow CSS to apply to them as you would expect.
As zzzzBov notes in his answer, they might not have the correct default styles (which in most (all?) cases are either display: block or nothing), so you'd need to add those even for non-oldIE browsers. But doing so works fine in non-oldIE browsers, whereas in oldIE, adding these default styles---or any styles whatsoever---only works if you use html5shiv.
The initial value for the display property of an element is inline (ref). The built-in user-agent stylesheet changes the properties to sensible values for known elements; for example, headings and paragraphs are changed to block.
HTML5 introduces new elements such as header, footer, article and section (the HTML5 sectioning elements). Since older browsers do not know about them, they treat these elements as inline. You must therefore add CSS rules for these elements manually:
header, footer, article, section { display: block; }
But as mentioned in the Story of the HTML5 Shiv:
...Internet Explorer 6-8 pose a problem as they do not recognize
unknown elements; the new elements cannot hold children and are
unaffected by CSS
The workaround for IE 6-8 is also mentioned in that article:
Btw, if you want CSS rules to apply to unknown elements in IE, you
just have to do document.createElement(elementName). This somehow lets
the CSS engine know that elements with that name exist
Now, regarding your question: The html5shiv uses some JavaScript tricks to make the unknown elements styleable in IE 6-8. As for other browsers that do not support HTML5, the html5shiv, if necessary, adds the default styles required to render the HTML5 elements properly so that you don't have to define the CSS rules yourself (as mentioned above).
Note that html5shiv does not make the browser support HTML5. For example, it cannot make IE7 play videos embedded via HTML5 <video> tag.
Other browsers support non-standard elements simply by setting their css display property:
header,
footer,
article,
section,
...etc... {
display: block;
}
For old versions of Firefox and webkit based browsers (pre HTML5) this was all that was necessary.
htmlshiv is an 'IE' thing, because some versions of IE [still] lack many HTML5 features. What works in chrome or other webkit browsers may not work in IE, so htmlshiv TRIES to give a javascript adaptation of the missing features. Its a polyfill, to be exact as well.
IE doesn't support CSS3 columns — no big deal, right? Even though, I'm trying to find any modernizr-like library to do the trick. I don't really want to code different CSS for IE, as that would be giving way too much care and attention to something we all despise. Any suggestions?
As of IE10, there is now native (and un-prefixed) support for CSS3 columns.
http://msdn.microsoft.com/en-us/library/ie/hh673534(v=vs.85).aspx
Pragmatic Programmer's HTML5 and CSS3 book has some great advice on stuff like this. For columns, it recommends using the Columnizer Plugin for jQuery for IE.
Without seeing your code, I would suggest putting each column in a div. Then redefine the body tag after you load the stylesheet for IE only, and add the styles for the divs.
For IE only:
<!--[if IE]>
**** your styles ****
<![endif]-->
You could even take it a step further and move the body style into it's own style sheet and load the style sheet you need depending on the browser. It'll depend on how far you want to take it.
Try setting display: inline-table; on the items you want laid out as a table
In .Net, all styles are not listed in corresponding controls and html tags. For example, the style "WORD-BREAK","WORD-WRAP" etc. Any site which lists all styles available to all tags and controls ?
W3schools is a great place to start learning CSS.
The official specification is another place to look.
Have a look at w3schools. http://www.w3schools.com/css/css_reference_atoz.asp
But remember that there are also styletags specific to a certain browser (like the mozilla tags).
As far as I know Visual Studio shows the tags which are compatible with all browsers (and that might be the reason why you are missing some items).
Also, you can apply all style tags to all HTML tags (you can assign font to an img tag), but they might not give you the effects you are hoping, but the beauty of CSS is that you can assign any style to any tag (and if you are embedding tags in eacht other it will inherit the style, so for example assigning a list-style to a div might not look usefull, but is allowed and will cause all lists in that div to look the same, ofcourse this can be done in various other ways).
Best practices?
How does this differ from HTML4 or XHTML1?
There's a lot of discussion going on over here: http://html5doctor.com/html-5-reset-stylesheet/
I'm wondering what other resources/discussion exists.
The comments on that post are crazy. You're certainly not going to find a more thorough discussion.
I think you should delete unnecessary rules and deprecated tags from whatever reset you've been using and keep truckin. Paul Irish (jQuery core contributor, co-creator of Modernizr and now Googler) has a comment in the article you link to that has all the HTML5 specific CSS leveling you're likely to need:
article, aside, dialog, figure, footer, header, hgroup, nav, section { display:block; zoom:1; }
Google's using a simpler version in their base.css on HTML5Rocks.com:
section, article, header, footer { display: block; }
You'll still need to use Remy Sharp's simple, bare-bones HTML5 Shiv or Modernizr to run a JavaScript loop to enable styling of new HTML5 elements in IE. HTML5 Shiv just creates the elements to allow styling, Modernizr is a much more full-featured HTML5 and CSS3 detection/styling solution. There's another great post on HTML5 Doctor worth a look, How to use HTML5 in your client work right now from March 2010, co-written by Remy and Richard 8 months after the reset article. They mention using Modernizr "to detect Web Forms 2.0 and other HTML5-type support."
Also, Dion (from Ajaxian and now Palm) tweeted about css3pie that will render visual elements like border-radius, box-shadow, and gradients in IE. Can't vouch for it myself.
(I had more links in here but had to remove all but one b/c my rep. is < 10, if there's something you can't find. reply and I'll post it.)
HTML5 is still not widely supported. As such, I don't think you will find an HTML5 specific reset stylesheet yet. My recommendation would be to take Eric Meyer's and add the tags for HTML5. (e.g. nav, header, footer, etc)
I just use my variation of Eric Meyer's reset, with my own preferences. For HTML5 compatibility, I add the new elements in as needed.
One thing in particular is that new elements are unstyled by default, so you need to provide your own defaults. This is especially important for block elements like section, aside, and article. You need to ensure you specify display:block for those elements.
I modified Eric Meyers reset late last year for HTML5. Use it for every project, and it works great: CSS Reset Refreshed
It sets the new HTML5 block elements to display accordingly. This is not done in any mainstream browser today, and you will run into problems if you do not set this.
It also "resets" HTML5 element styles. Technically, the resetting is not yet needed as browsers do not natively style HTML5 elements, but your site will be future proofed for when they do.
There's a lot to it. You can't take one persons css rest as gospel. I recently made a custom reset sheet by revising parts of boilerplate, YUI, my preference and some other ppls methods.
It's more down to preference & practicality. In terms of differentiating html5 css standards from xhtml & html4, don't bother compare you should aim to use html5 doc-types for all your new work unless your project specifically requires xhtml by request.