Margin's not working correctly

Hey guys

I'm running into further issues with this script I am working with in Javascript. Basically, I cannot get margin-top to work on the text in this slide-out caption box.

http://wiispeakapple.co.uk/v2/reviews/reviews.html

There's the link, it's the boxes under the Popular sub-title, hover over any of the eight boxes and see the text 'iPhone 4' is stuck at the top!

Link to CSS:
http://wiispeakapple.co.uk/v2/reviews/css/mosaic.css

Find the .details class (4th down), I have been trying to use margin on it. The left margin shows signs of it working correctly, yet margin-top seems to fail. There is probably some simple solution to this that I am yet again missing but I've been trying to figure it out for ages now! :o

Any help is appreciated - Thank you! :D

Cheers
Owen Ayres

It's because the <span> tag is an inline element, not a block element (like divs and structures), so margins don't work the way you want them to.

Here's my solution: Take the entire line margin: 5px 8px 0 8px; out of .details and apply it to .mosaic-overlay as padding, as padding: 5px 8px 0 8px;. Hope that helps.

By the way, love that navbar :)

It's because the <span> tag is an inline element, not a block element (like divs and structures), so margins don't work the way you want them to.

Here's my solution: Take the entire line margin: 5px 8px 0 8px; out of .details and apply it to .mosaic-overlay as padding, as padding: 5px 8px 0 8px;. Hope that helps.

By the way, love that navbar :)

This does the job - thank you! :)

Thanks for the compliment on the navbar too, still needs a little work to perfect it but the main structure and graphics are there :p

Cheers
Owen Ayres