Geek Answers Handbook

Why doesn't Modernizr work for me?

I do not think that modern loves me, can someone please tell me what I am doing wrong. I can not get to upgrade work with firefox, i.e. Etc. I use only elements like header, footer and nav ...

This is my code:

<!DOCTYPE html> <!--[if lt IE 7 ]> <html class="ie ie6 lte9 lte8 lte7 no-js"> <![endif]--> <!--[if IE 7 ]> <html class="ie ie7 lte9 lte8 lte7 no-js"> <![endif]--> <!--[if IE 8 ]> <html class="ie ie8 lte9 lte8 no-js"> <![endif]--> <!--[if IE 9 ]> <html class="ie ie9 lte9 no-js"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <html class="notie no-js"> <!--<![endif]--> <head> <title></title> <meta name="description" content="" /> <link href="css/main.css" rel="stylesheet" type="text/css" /> <script src="modernizr-2.0.6.min.js"></script> <script type="text/javascript" src="http://use.typekit.com/kmy1sfb.js"></script> <script type="text/javascript">try{Typekit.load();}catch(e){}</script> </head>

By checking firebug, it prints out fine, I get all the elements that I have to use, but none of the elements work ...

For example, if I click the title in firebug and edit the CSS height to 5000px, it does not move, but alignment, etc. wrong.

+4
source share
2 answers

You probably forget to style the new HTML5 elements as block level elements. By default, browsers treat any unknown element as an inline element ( display:inline ), which makes them difficult to execute.

Newer browsers are slowly treating the new HTML5 elements as stable, which means that they are starting to use the default style, for example display:block for the header element. But most browsers on the market today do not have these default styles for HTML5 elements, so you need to provide them.

To do this, you need a quick CSS example:

 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

Adding this CSS to your main.css should fix your design problem.

+12
source

I had the same problem when I tried to use the CDN and it did not work (maybe I had the wrong link). The test I found was to put

 .borderradius body { background: #c00; }

in your main.css and see if the background turns red. If it is modernized, it works.

EDIT: I also found that the script should be inserted at the beginning of the HTML document. Putting it below, as suggested to increase page loading speed, does not work.

+1
source

More articles:


All Articles