Something kooky going on with my layout when I use a Javascript function...

[jonnymorris]

Hi!

I'm in the process of converting my old tables design to CSS and javascript, using a very similar method to another site I built from scratch.

Here is my new site:

http://www.jonathanmortimer.co.uk/te...o_graphic.html

The initial position of the description just below the image is more or less correct, however when I click on one of the thumbnail images below it shifts the description text down and I can't for the life of me figure out why. I'm employing a bit of javascript to replace the image and text, it worked perfectly in my other site and nothing is different in that part of the code as far as I can see.

Here is my other site:

http://www.jonathanmortimer.co.uk/nature/


Please help! I'm going up the wall with this one

[Aso]

Your site is severely broken in Firefox. It looks like you need to clear a float (which IE does incorrectly).

Back to the problem - as soon as you click on a thumbnail, you run a slice of Javascript. Somewhere in that code, it's generating another <p> within the current one (#description). So the result is doubled padding.

[jonnymorris]

Aaahhhhhh, thank you so much! It was just that little nudge in the right direction that I needed.

As for the CSS clear, obviously Safari doesn't do that right either (tsk, these browsers are SO inconsistent.. sometimes they're lapse, sometimes they're strict!) I had the clear in previously but removed it when trying to get some other aspect of it to work, Safari never complained.

Thanks again!

[Aso]

No worries!

HINT: Design for Firefox (and 99% of the time it's Opera, Safari and Camino ready) then fix IE (with conditional comments)