Hi All
I have a site that I am converting to HTML5 from XHTML 1.0 Transitional.
All was going well until I was updating a page that uses a jquery tooltip to dispay larger images when you mouse over small ones.
When I change the DOCTYPE to html5, some but not all the tooltip images fail to line up thereby throwing out all the subsequent images in a most annoying fashion.
All the code validates as HTML5 as does the CSS.

This is the code that produces the tooltip effect:

<div class="thumbnail-item">
	<a href="a_map.html">
		<img src="http://tycoontalk.freelancer.com/images/maps/a_map/thumbnail_20.gif" alt="Thumbnail Image" width="78" height="78" class="thumbnail"/>
	</a>
    <div class="tooltip">
		<img src="http://tycoontalk.freelancer.com/images/maps/a_map/hover_image_20.gif" alt="" width="220" height="220" />
	</div>
</div>

Also if I convert the code to XHTML 1.0 strict, this also throws the images out of place.
I am aware that HTML5 has dropped certain elements and introduced new ones but as I say the W3C validator says my code is ok and much trawling of the web has not pointed to any tag I am using having been dropped.

This is most annoying as I have converted every page of the site complete with semantic coding and this is the only page giving me trouble Grrrrr.

Hope some lovely person may have an answer as I am stummped.

cheersie

The code you posted looks fine. Even though the problem is occurring when you change doctype, I have a feeling it's not your html that's causing a problem. Something tells me it's in either the jQuery or your css.

Is the page in question online? If so could you link to it. I have a feeling we'll need to see more of your code before being able to tell what's wrong.

Hi
Sorry the site is off line at the moment:

Here is the script if it helps:

$(document).ready(function () {

// Get all the thumbnail
$('div.thumbnail-item').mouseenter(function(e) {

// Calculate the position of the image tooltip
x = e.pageX - $(this).offset().left;
y = e.pageY - $(this).offset().top;

// Set the z-index of the current item,
// make sure it's greater than the rest of thumbnail items
// Set the position and display the image tooltip
$(this).css('z-index','15')
.children("div.tooltip")
.css({'top': y - 220,'left': x + 20,'display':'block'});

}).mousemove(function(e) {

// Calculate the position of the image tooltip
x = e.pageX - $(this).offset().left;
y = e.pageY - $(this).offset().top;

// This line causes the tooltip will follow the mouse pointer
$(this).children("div.tooltip").css({'top': y - 220,'left': x + 20});

}).mouseleave(function() {

// Reset the z-index and hide the image tooltip
$(this).css('z-index','1')
.children("div.tooltip")
.animate({"opacity": "hide"}, "fast");
});

});

as always cheers in advance

Nothing is jumping out at me that would make this code run differently under different doctypes. Is there a way to temporarily the put the page online somewhere? I think it'll be easier to figure out what might be wrong if we could see a live page.

I looked through the snippet and had a coworker do the same. It looks all fine to me. Could it be the actual HTML5 jQuery script?

Hi
I haven't touched the main jquery script so I'm guessing it's not that.
Following much further trawling the web I have come across a number of postings from folk who have encountered problems with jquery fade effects when changing doctypes. However, most seemed to only have problems with IE, whereas my problem is across all the main browsers. There weren't any clear solutions anyway...so I'm not sure that really helps!
Ho Hum!!

Something is definitely weird. If anything the html5 doctype is less strict than html 4 transitional. I keep thinking maybe it's that you're using some of the html semantic tags and browsers aren't displaying them right. I think that's more of an IE issue, but if you are using things like header and section and article, etc. are you defining them all as display: block in your css?

Since things aren't lining up I'm thinking the issue has something to do with some elements being treated as inline instead of block or vice versa when you switch doctypes.

You may have already tried this, but try running the script with Firebug or Chrome developer tools running. Even IE often gives warnings and errors with Javascript ("error on page" in the status bar), and it could be something so minor that you wouldn't even notice normally, because it's worked for so long.

RESULT!!
After hours and hours of trial and error and searching the web I have finally gotten this to work!
I came across a post about things that are odd in html5 and in there somewhere it stated that gaps can occur under certain conditions where ther were no gaps before!
It suggested that where divs contained only images you need to lift them off the baseline!?
so I gave it a go with:

.thumbnail-item img.thumbnail {
border:none;
vertical-align: top;
}

and everything shuffled into place and lined up. Huzzah!

I hope this may help some other poor soul to not have to spend countless hours getting VERY annoyed.

I'm glad you finally figured it out. Can't say I was ever thinking vertical-align was the solution. I will definitely remember this thread though, if I ever encounter the same problem.

Why border: none? Was that part of the solution or something you were adding anyway?