All geek questions in one place

HTML5 Title Element Does Not Display Background Image

I am working on a new HTML5 template. I am using the <header></header> element on a page with a simple background image of the logo.

 header{ width:100%; height:100px; background:url(/dev-acn/img/header-logo-bg.jpg) 45px center no-repeat; }

Dev Page: http://www.bcidaho.com/dev-acn/index.asp

I see the background image on Chrome PC, FF4 PC, and MAC FF5, however it doesn’t appear in IE6, IE7 or IE8 ... and when I open the developer tools in IE8, for some reason there is no opening tag for the <header> element <header> in the code inspector only the closing tag </header> .

Does IE recognize the <header> element even if I have properties defined in style.css? (located: http://www.bcidaho.com/dev-acn/css/style.css )

+6
source share
4 answers

You need to include html5shiv , which turns the new HTML5 semantic elements into block-level elements so that IE can style them. This is a simple hack, so check the source to see what it does.

+6
source

Does IE recognize the element, even if I have properties defined in style.css?

Right. For versions below IE9, you need to use this:

http://code.google.com/p/html5shiv/

You will also need this CSS:

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

For some reference information see:

http://paulirish.com/2011/the-history-of-the-html5-shiv/

+4
source

I know this has already been covered, but I found another solution for this http://orderedlist.com/resources/html-css/structural-tags-in-html5/ .

Just add this script to the top of the page and the new HTML5 elements will display correctly in older versions of IE.

 <script type="text/javascript"> document.createElement('header'); document.createElement('footer'); document.createElement('section'); document.createElement('aside'); document.createElement('nav'); document.createElement('article'); </script>

Just a good alternative for us purists who do not want to rely on an external source. :)

+2
source

Besides the problems with HTML5, you also have some options in the wrong order for the background style.

Separate them or place them in the correct order.

The correct order is:

  • background color
  • background image
  • background repeat
  • attachment background
  • background position

You may skip some, but they should be in the correct order.

I rarely use the combined (AKA shorthand) version because it is too annoying to remember the order.

0
source

Source: https://habr.com/ru/post/891593/

More articles:


All Articles