Trying to develop a site with the new HTML5, I had problems with block
elements for content served on Internet explorer browsers at most
version 8. Though haven't yet tested with version 9.
Different section on the page with tags; section, header, footer,
aside had background colours and other css styling. but my attention
was drawn to element positioning and background colours. When the page
was retrieved from the server without Ajax the boxes were positioned
as defined and background colours and background images were ok. But
when part of the content was retrieved from the server via Ajax, the
boxes were not accurately displayed on the page as the new HTML5 tags
were not recognised as block elements though I used Modernizr
JavaScript plug-in to fix the issues with HTML5 tag in IE.
As the site server with PHP and with smarty template, below was how
the issues was resolved having detected the browser and version the
content was requested from;
//the php file
<?php
// fix problems with tags HTML5 tags server via ajax
$tagIE['header'] = 'div';
$tagIE['aside'] = 'div';
$tagIE['section'] = 'div';
$tagIE['hgroup'] = 'div';
$tagIE['article'] = 'div';
$tagIE['footer'] = 'div';
$tagMain['header'] = 'header';
$tagMain['aside'] = 'aside';
$tagMain['section'] = 'section';
$tagMain['hgroup'] = 'hgroup';
$tagMain['article'] = 'article';
$tagMain['footer'] = 'footer';
//this was the way I had to detect the browser and version the content
was requested from.
if($REQ['browser'] == 'MSIE' && $REQ['browser_version'] <= 8){
$smarty->assign('html5',$tagIE);
}
else{
$smarty->assign('html5',$tagMain);
}
?>
//the template file powered by smarty
//instead of directly using
<section>
//your content here
</section>
//I rather used
<{$html5.section}>
//your content goes here
</{$html5.section}>
// the resulting html on IE browsers would be
<div>
//your content here
</div>
//and other browser including pages crawled by search engines would be seen as
<section>
//your content here
</section>
To get the tags for assign use {$html5.assign} for the opening and
closing tag of in your template file.
Though I never used it for all the html5 tags but I used them on
sections that needed to be position accurately and need to display
background images and colours to override the one defined in the
parent element.
I hope this helps those trying to develop sites with HTML5. Also, if
you have an easier way to this, your contribution would be
appreciated.
