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 to the CF scene
    Join Date
    Jan 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Pixel jog issue on border of div with table

    I'm getting a strange behavior on a div's border, going a few pixels outside it's containing class. It's the div titled "upcoming events" on a site I'm developing. Not sure if it's an issue with the H2 tag above it or with the table inside the div.
    http://curtingolf.com/redesign12/
    It's only happening on the left side and not the right side.
    It's consistently happening in Chrome, IE and Firefox.

  • #2
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,311
    Thanks
    11
    Thanked 286 Times in 285 Posts
    I think you've got 2 extra pixels in the bottom half of that event box (#eventsTable) because of the border. I don't know specifically how to solve that one, but I've done boxes like this before and what I'd recommend is creating one div for the whole box (i.e. your #events div) which includes the border and the background color of the lower half of the box. Then lay inside it the h2 (with gradient background) and the #eventsTable but do not give them borders. Then they can be 100% width without being larger than the containing box.

    Dave

  • Users who have thanked tracknut for this post:

    curtinj (02-01-2012)

  • #3
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks so much, it worked as you can see on my site. Glad I found this forum.


  •  

    Tags for this Thread

    Posting Permissions

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