DTP


 
Lively discussions on the graphic arts and publishing — in print or on the web


Go Back   Desktop Publishing Forum > General Discussions > Web Site Building & Maintenance

 
 
Thread Tools Display Modes
Prev Previous Post   Next Post Next
Old 12-14-2011, 02:37 PM   #1
CarlSeiler
Member
 
CarlSeiler's Avatar
 
Join Date: Oct 2005
Location: Denton, TX
Posts: 271
Default XHTML to HTML5

I’ve done a quick sweep through my XHTML for one of my sites and easily converted it to valid HTML5, if not entirely considering all the semantics of the sectioning which I’ll clear up soon.

One challenge I’m finding is that although my page looked passable in IE6 in XHTML strict, it’s having a bit of problem with HTML5. It would not be an issue if IE6 ignored all the CSS, but as it is, it displays the main content behind the header. Grr. So, XHTML page looks fine, HTML5 main content slides behind header. At first I thought it was related to the CSS on the main content, but lo and behold it’s the header. This happens even with the HTML5 Shiv(m).

HTML5 version:
<header id="toptitle">
<div class="logo"><h1><a href="index.php" style="border-style: none; border-width: 0px;"><img…/></a></h1>
</div>
</header>


XHTML (version works in IE6):

<div id="toptitle">
<div class="logo"><h1><a href="index.php" style="border-style: none; border-width: 0px;"><img…/></a></h1>
</div>
</div>

HTML5 (version works in I6 but has duplicate ID):

<header id=”toptitle”><div id="toptitle">
<div class="logo"><h1><a href="index.php" style="border-style: none; border-width: 0px;"><img…/></a></h1>
</div>
</div></header>


I thought the HTML5 Shiv(m) was supposed to make IE6 recognize the header element for the purposes of applying CSS (in this case to my element with the id=”toptitle”), but it doesn’t seem to be making IE6 snap to that. Anyone have experience troubleshooting this sort of thing and using the Shiv?
I’m thinking about
<header id=”toptitle”><div id="ie-toptitle">
<div class="logo"><h1><a href="index.php" style="border-style: none; border-width: 0px;"><img…/></a></h1>
</div>
</div></header>


Then applying the same CSS to both items, but then I don’t want the possibility of doubling the formatting, and I don’t like the idea would be that I would be increasing tags rather than decreasing. I’ve thought about using jQuery replaceWith method, but seems like overkill (and I’m not sure it will accomplish what I’m looking for).

I’m not about pixel-perfect layout in any browser (much less IE6), but I would like people to at least be able to see stuff.
CarlSeiler is offline   Reply With Quote
 

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Neat demonstration of HTML5 Kelvyn Web Design 1 07-21-2010 08:44 AM
XHTML img with alt and title dthomsen8 Web Design 1 06-01-2007 09:44 AM
XML/XHTML-to-PDF converter ktinkel Web Site Building & Maintenance 9 01-31-2007 06:37 PM
Is XHTML really a standard? dthomsen8 Web Design 27 02-17-2006 06:19 AM
Produce a book with XHTML & CSS ktinkel Print Design 6 02-13-2006 12:54 PM


All times are GMT -8. The time now is 09:31 PM.


Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Contents copyright 2004–2014 Desktop Publishing Forum and its members.