11 replies [Last post]
turtlebean
turtlebean's picture
Offline
Regular
Last seen: 2 years 30 weeks ago
Timezone: GMT+11
Joined: 2011-12-04
Posts: 35
Points: 42

Hi,

My original site I made back in 97 and I'm sticking with it for now because I've pretty much
hacked my way through a new version in html5 which actually has tested well for me in
ipod and older mobiles plus safari and google chrome and firefox but not in IE so I
was wondering if anyone could be bothered checking it for me on their browser esp
latest IE for windows and let me know how it looks?

I've only completed up to feedback page and I haven't yet set up the video on media page
for IE .

My old site seems to work under all browsers so it is safer to stick with that one for now
but would love to get some feedback on half finished other.

my site is http://www.toyboxpuppettheatre.com and then http://www.toyboxpuppettheatre.com/html5/index.html

Thanks and Hope someone can take a look.

ps: interesting how IE renders the wrapper as a space to the left of content and with no visibility, also textual links at
bottom are also invisible.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 hour 28 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9230
Points: 3236

Not ready for prime-time

HTML5 is in draft status, and subject to change at any time.

Implementors should be aware that this specification is not stable. Implementors[sic] who are not taking part in the discussions are likely to find the specification changing out from under them in incompatible ways. Vendors interested in implementing this specification before it eventually reaches the Candidate Recommendation stage should join the aforementioned mailing lists and take part in the discussions.

The publication of this document by the W3C as a W3C Last Call Working Draft does not imply that all of the participants in the W3C HTML working group endorse the contents of the specification. Indeed, for any section of the specification, one can usually find many members of the working group or of the W3C as a whole who object strongly to the current text, the existence of the section at all, or the idea that the working group should even spend time discussing the concept of that section.

By "implementors", they mean the vendors who make the browsers, e.g. Mozilla, Google, Opera, Apple, and MSFT. If the vendors can't yet take the specs as set, why should you? Write your pages in html4.01 or xhtml1.0. Those are the current recommendations.

CSS3 is modularized, so you can use those parts that have reached Candidate Recommendation status with little worry.

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 2 days 3 hours ago
London
Timezone: GMT+1
Joined: 2004-06-06
Posts: 15664
Points: 2802

IE is going to struggle with

IE is going to struggle with html5. For older IE browsers - regardless of state of specs - you can employ a couple of scripts to smooth things out called modenizer.js and respond.js the latter bringing media queries into play - not that that's so much an html5 issue.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

turtlebean
turtlebean's picture
Offline
Regular
Last seen: 2 years 30 weeks ago
Timezone: GMT+11
Joined: 2011-12-04
Posts: 35
Points: 42

Thanks, I took the advice and

Thanks, I took the advice and am re-hacking in xhtml 1.0 transitional

http://www.toyboxpuppettheatre.com/toyboxnew/toyboxindex.html

Rather than html 4.01 but this is just as well recommended right?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 hour 28 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9230
Points: 3236

Either is fine. Use strict

Either is fine. Use strict rather than transitional.

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

turtlebean
turtlebean's picture
Offline
Regular
Last seen: 2 years 30 weeks ago
Timezone: GMT+11
Joined: 2011-12-04
Posts: 35
Points: 42

Thanks Gary. I've changed to

Thanks Gary. I've changed to strict but on bios page for the life of me I cannot find the unclosed div because every validating page is almost identical ;/
http://www.toyboxpuppettheatre.com/bios.html

Also, Could someone on windows IE 6,7,8 0r 9 please tell me if my content is falling in next to vertical menu or below it?

And is my photos page hovering over photos to display close ups in IE?
http://www.toyboxpuppettheatre.com/photos.html

Hope some people have time to take a look.

In Australia, every public library I've been to uses IE but usually version 6 or 7. It's very strange, you'd think at the very least they'd update their browsers but no.

Cheers

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 hour 28 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9230
Points: 3236

Formatting saves time

A word about formatting html markup:

Always format your document for ease of reading by the Markā…  mod0 eyeball. The best system (if I didn't think that, I'd use something else, right?) is to indent nested elements and attributes and to separate sibling elements with a blank line. Indent elements 2 or 3 spaces. Do not use tabs unless your editor will convert them to spaces upon saving. A good editor will tell you when you've closed an element that has an unclosed child element, Emacs for example. I've posted your markup, "properly" formatted. The formatting will tell you where the error lies. Hint: see the last closure before </body>.

If your editor doesn't support these oh, so helpful features, look for a better editor.

As a purely personal prejudice, I don't like inline elements as siblings to block elements. As you've done it, it's not invalid, but the specs don't define the interface between the two types of elements1. I'd wrap those links+images in a <p> element.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test document</title>
  </head>
 
  <body>
    <div id="page">
      <div id="header">
	<a href="http://toyboxpuppettheatre.com">
	  <img id="logo-image" 
	       src="images/homelogo.png" 
	       alt="Australia's Own Toybox Puppet Theatre" />
	</a>
 
	<ul id="utility-links">
	  <li class="first"><a href="contact.html">Contact</a></li>
 
	  <li><a href="links.html">Links</a></li>
 
	  <li><a href="sitemap.html">Site Map</a></li>
 
	  <li><a href="/store">Shopping Cart</a></li>
	</ul>
 
	<ul id="main-nav">
	  <li id="home"><a href="http://toyboxpuppettheatre.com">Home</a></li>
 
	  <li id="about"><a href="about.html">About</a></li>
 
	  <li id="bios"><a href="bios.html">Bios</a></li>
 
	  <li id="shows"><a href="shows.html">Shows</a></li>
 
	  <li id="photos"><a href="photos.html">Photos</a></li>
 
	  <li id="media"><a href="media.html">Media</a></li>
 
	  <li id="music"><a href="music.html">Music</a></li>
 
	  <li id="gallery"><a href="gallery.html">Children&apos;s Gallery</a></li>
 
	  <li id="store"><a href="/store">Shop</a></li>
 
	  <li id="puppetsplaster"><a href="puppetsplaster.html">Puppets
	    and Plaster</a></li>
	</ul>	
      </div>
 
      <hr class="hrhide" />
 
      <div id="content" class="narrowcolumn"> 
	<h1 class="entry-title">Bios</h1>
 
        <a href="#"><img src="images/charlie.jpg" 
			 alt="Post thumbnail"
			 class="thumbnail alignleft" /></a>
 
        <div class="entry-content">
          <p>Charlotte Bunt began performing professionally in her
	    early teens in America. Later on, as a student of drama and
	    graduate of the Ensemble Studios, she continued working as an
	    actor in lead roles for the New theatre and Yept productions in
	    Sydney as well as Canberra theatres. She studied piano from an
	    early age and has written many short stories and poems. Charlotte
	    writes the scripts for Toybox, lyrics and melodies for their
	    music,helps construct puppets,directs and performs. In her spare
	    time, she enjoys working with animation, digital video and graphic
	    design.</p>
 
          <a href="#"><img src="images/sean.jpg" 
			   alt="Sean Meany" 
			   class="thumbnail alignleft" /></a>
 
          <p>Sean Meany has extensively studied keyboard and classical
	    guitar. He has been writing and composing music for many
	    years and is experienced in modern music technology.
	    Sean&apos;s high standard of digital recording, arrangement and
	    production is attributed to the success of Toybox. Also,
	    Sean constructs puppets, hand carving and stringing them
	    and is responsible for creating sets, lighting, sound and
	    stage mechanics. He is the co-creator and puppeteer for
	    Toybox.</p>
 
          <a href="#"><img src="images/joan.jpg" 
			   alt="Joan Holt" 
			   class="thumbnail alignleft" /></a>
 
	  <p>Joan Holt(married name Vance 1926-2005) learnt to draw at
	    the Dattilo-Rubbo school of Art. Her love for colour was nurtured
	    at the age of fifteen with tuition from Grace Cossington Smith.
	    She was highly influenced by the compositions of Cezanne at an
	    early age.  As a young adult she studied art in London, returning
	    to teach in NSW schools for four years. Joan always enjoyed doing
	    portraits and landscapes as well as for many years running a
	    property with goats and other animals.Toybox was very fortunate to
	    have her paint their backdrops and audiences were always delighted
	    by them.</p>
 
	  <div id="footer">
	    <ul>
	      <li class="first"><a href="http://toyboxpuppettheatre.com">Home</a></li>
 
	      <li><a href="about.html">About</a></li>
 
	      <li><a href="bios.html">Bios</a></li>
 
	      <li><a href="shows.html">Shows</a></li>
 
	      <li><a href="photos.html">Photos</a></li>
 
	      <li><a href="gallery.html">Children&apos;s Gallery</a></li>
 
	      <li><a href="media.html">Media</a></li>
 
	      <li><a href="music.html">Music</a></li>
 
	      <li><a href="puppetsplaster.html">Puppets and Plaster</a></li>
 
	      <li><a href="contact.html">Contact</a></li>
 
	      <li><a href="sitemap.html">Site Map</a></li>
 
	      <li><a href="/store">Shopping Cart</a></li>
	    </ul>
 
	    <p>Copyright &copy; 2012 Toybox Puppet Theatre | All
	      Rights Reserved | Web Site Design
	      by <a href="http://www.charliesite.com">charliesite</a></p>
	  </div>
	</div>
      </div> <!--Notice that this element is not the last closure
                 required before closing body; indented too far.-->
  </body>
</html>

cheers,

gary

1. This lack of clarity is part of the problem in implementing {display: run-in;}, and the reason it has been moved from css2.1 to css3. No current implementation will pass a test suite.

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

turtlebean
turtlebean's picture
Offline
Regular
Last seen: 2 years 30 weeks ago
Timezone: GMT+11
Joined: 2011-12-04
Posts: 35
Points: 42

Lack of clarity is right! You

Lack of clarity is right! You do know, as I'm sure you do, I hack my way through everything which means I never really know what I'm doing. Not highly recommended.
But I have very few mathematical or logical working brain cells and tend to prefer to get to the fun stuff sooner rather than later and consequently I am no web designer
but do it as a blind chore for the end result. I admire those of you that have a solid understanding but that is why you probably earn a living at what you do and I do not!
I have no desire to be a web designer but I think it saves money to do it yourself or rather beg borrow and steal from all else Tongue

Thank you again Gary. Smile

turtlebean
turtlebean's picture
Offline
Regular
Last seen: 2 years 30 weeks ago
Timezone: GMT+11
Joined: 2011-12-04
Posts: 35
Points: 42

There's a problem!!!!!! When

There's a problem!!!!!!

When embedding audio from soundcloud.com there is no choice for xhtml strict only embed or html5 and i am forced to go with html5 in this case...

pls see http://www.toyboxpuppettheatre.com/music.html

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 hour 28 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9230
Points: 3236

iframes, blech!

Granted, if you must use iframes, then transitional is the appropriate DTD; that or html5. Have you tried the object element?

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

turtlebean
turtlebean's picture
Offline
Regular
Last seen: 2 years 30 weeks ago
Timezone: GMT+11
Joined: 2011-12-04
Posts: 35
Points: 42

soundcloud offers the iframe

soundcloud offers the iframe or the following :

<object height="81" width="100%"> <param name="movie" value="https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F38181445"></param> <param name="allowscriptaccess" value="always"></param> <embed allowscriptaccess="always" height="81" src="https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F38181445" type="application/x-shockwave-flash" width="100%"></embed> </object>  <span><a href="http://soundcloud.com/toyboxpuppettheatre/car_ride">car_ride</a> by <a href="http://soundcloud.com/toyboxpuppettheatre">Toybox Puppet Theatre</a></span> 

With the latter the validator wants the styling separated and doesn't accept the embed tags for strict so I just went with the one line iframe html5 code.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 hour 28 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9230
Points: 3236

The embed has never been a

The embed has never been a valid element, though it has been supported by all browsers since shortly after Netscape introduced it as a proprietary element. The W3C later came up with the object element as a more powerful and more versatile means of importing, um, objects, e.g. flash, images, documents, &c.. The embed element continued to be used because IE had really crappy support for object.

Even though object does everything that embed and iframe do, and more, the html5 working group has legitimized embed and returned iframe (invalid since 1999). Credit html5's, in my not at all humble opinion, goal to pave any and all cow-paths it stumbles across.

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.