Hi there! I'm trying to teach myself a bit about designing and I seem to be having a bit of an issue with my WordPress theme. After adding a jQuery bit to my layout, it made my div box all gapped out (above the words "Log in" and below the word "Registration". I tried a work around by putting the div to 100% height and then a -20 top margin which worked in Chrome, BUT any non-WebKit browser would still have the problem. I feel there should be a less dirty way to fix this, hopefully you all can help! Thanks!
Link: iGarrett.net/tg

alt text

1 answer

o.k.w 2355
This was chosen as the best answer

This is due to the uncollapsing of the DIVs (boxTop and boxMid) and the H1 and H3 within them caused the additonal top/bottom margin spacing.

Highlighted H1 margin
Above is the screenshot of Firebug's highlighting if the H1 element in yellow. Note the top and bottom margin extending beyond the box.

Few ways to 'fix' it, one of which is to set boxTop's H1 and boxMid's H3 margins to zero and use padding or the DIV's margin to space the userBox down.

div.userBox h1, div.userBox h3 {margin-top: 0; margin-bottom: 0}
div.userBox {margin: 18px 0; /* 18px is the default, style to your need*/}
div.userBox h1 {padding: 4px; /* style to your need*/}
div.userBox h3 {padding: 4px; /* style to your need*/ }
Answered over 9 years ago by o.k.w
  • It didn't seem to do anything at all unless I did something else wrong in my code. I want space between the 3 boxes but not between top and mid and mid and bottom for the userBox. Garrett Dengler over 9 years ago
  • I figured out what you were trying to tell me and it appears to be working. Thank you! Garrett Dengler over 9 years ago