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

Reply
 
Thread Tools Display Modes
Old 12-14-2011, 01: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
Old 12-16-2011, 02:52 AM   #2
Bo Aakerstrom
Member
 
Bo Aakerstrom's Avatar
 
Join Date: Mar 2005
Location: Derby,UK
Posts: 1,316
Default

Without seeing the rest of your code it is hard to say exactly what's causing this issue, but try adding clear: both; to the CSS for the element below the header.

I'm quite sure you could achieve what you are after (what I think you are wanting to do anyway...) with less code than you have.

   
__________________
www.boaakerstrom.com
Behance Portfolio
Bo Aakerstrom is offline   Reply With Quote
Old 12-16-2011, 03:54 AM   #3
Kelvyn
Staff
 
Kelvyn's Avatar
 
Join Date: Feb 2005
Location: In the Heart of the English Lake District
Posts: 1,381
Default

I don't know of any developers around here who are still hacking codes to accommodate IE6. I think we have all signed up to the IE6 countdown program.
http://www.ie6countdown.com/

If essential to cater for IE6 (eg if selling to China) then I guess the "simple" solution is either go back to XHTML or litter the pages with IE conditional code. I don't know of anyone who has tried to use Shiv to work with IE6. It is bad enough trying to get some CSS3 elements to work with IE7 using PIE, but it may be worth a look as it does extend some CSS3 capability to IE6. http://css3pie.com/

   
__________________
Kelvyn

Web site design, hosting and marketing, Keswick in the UK Lake District

If you are planning a visit to Keswick then try Keswick Tourist Information website

Kelvyn is offline   Reply With Quote
Old 12-16-2011, 04:15 AM   #4
Bo Aakerstrom
Member
 
Bo Aakerstrom's Avatar
 
Join Date: Mar 2005
Location: Derby,UK
Posts: 1,316
Default

Or use respond.js to prompt Chrome Frame in older MSIE versions. HTML5 Boilerplate.com/ has more information on how to do that.

Still the simple solution would be to try clear: both; in the first instance.

Unless you really need to accommodate MSIE6 don't bother, general usage is down to just over 1%.

   
__________________
www.boaakerstrom.com
Behance Portfolio
Bo Aakerstrom is offline   Reply With Quote
Old 12-16-2011, 06:29 AM   #5
CarlSeiler
Member
 
CarlSeiler's Avatar
 
Join Date: Oct 2005
Location: Denton, TX
Posts: 271
Default

Quote:
Originally Posted by Kelvyn View Post
I don't know of any developers around here who are still hacking codes to accommodate IE6. I think we have all signed up to the IE6 countdown program.
http://www.ie6countdown.com/

If essential to cater for IE6 (eg if selling to China) then I guess the "simple" solution is either go back to XHTML or litter the pages with IE conditional code. I don't know of anyone who has tried to use Shiv to work with IE6. It is bad enough trying to get some CSS3 elements to work with IE7 using PIE, but it may be worth a look as it does extend some CSS3 capability to IE6. http://css3pie.com/
As I said, I don't want to do much hacking to make this thing pixel perfect in any browser. However, it's been a while since I had something show up so differently in browsers (probably not since I first started using CSS in place of tables). Back then it was, "well, IE5 doesn't display it that well, but you can still read it." The only reason I still have a virtual machine with IE6 still on it for testing purposes is articles like this: http://www.guardian.co.uk/technology...-uk-government (July 2010)
and http://www.infosecurity-magazine.com...t-explorer-60/ (Oct 2010) and even the quote '"Let's hope that other UK government departments follow the Home Office's example and invest in a more up-to-date, more secure browser", he said.' I even read where employees at some larger corporations were still using IE6 at the office because of some Intranet web applications that were developed back then that break under IE8+

So, if it's a no-go, I'll forget about it, but if I can, I'll try to make it at least readable. Shoot, I still test in Lynx/eLinks.

Anyway, I rolled out a live copy is at http://www.merseybeasts.com/index.php but still obviously under construction.
CarlSeiler is offline   Reply With Quote
Old 12-16-2011, 06:41 AM   #6
CarlSeiler
Member
 
CarlSeiler's Avatar
 
Join Date: Oct 2005
Location: Denton, TX
Posts: 271
Default

Quote:
Originally Posted by Bo Aakerstrom View Post
Without seeing the rest of your code it is hard to say exactly what's causing this issue, but try adding clear: both; to the CSS for the element below the header.

I'm quite sure you could achieve what you are after (what I think you are wanting to do anyway...) with less code than you have.
Good idea about the clear: both. I'll check on that. I do think it has something to do with the type of CSS "position" of each element, and how it treats them. The following element has a "top" but both elements are static positioned (default).
CarlSeiler is offline   Reply With Quote
Reply

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 07:44 AM
XHTML img with alt and title dthomsen8 Web Design 1 06-01-2007 08:44 AM
XML/XHTML-to-PDF converter ktinkel Web Site Building & Maintenance 9 01-31-2007 05:37 PM
Is XHTML really a standard? dthomsen8 Web Design 27 02-17-2006 05:19 AM
Produce a book with XHTML & CSS ktinkel Print Design 6 02-13-2006 11:54 AM


All times are GMT -8. The time now is 01:19 PM.


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