Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Aug 2009
    Location
    public_html/cgi-bin/
    Posts
    66
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Question 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!

    Any help is appreciated - Thank you!

    Cheers
    Owen Ayres

  • #2
    New Coder
    Join Date
    Aug 2011
    Location
    The Universe
    Posts
    34
    Thanks
    0
    Thanked 11 Times in 11 Posts
    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

  • #3
    New Coder
    Join Date
    Aug 2009
    Location
    public_html/cgi-bin/
    Posts
    66
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Deep Thought View Post
    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

    Cheers
    Owen Ayres


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •