Hello

 

I have just finished http://www.communityradiotoolkit.net/, well enough to release it anyway. It uses wordpress with a few plugins. I heavily modded the theme to suit our needs.

 

Under the menu and above the top bit of the sound wave in the header is probably 30px of redundant white space. You can see that although the header is 150px to match the graphic, there is more white space above than below. I've used the web develop toolbar for FF to see if I could find it and no success. I use a plugin called menubar but that doesn't seem to be the culprit.

 

I'd like to be able to solve it before I tidy up the CSS and html.

 

Any help appreciated.

margin & padding reset add to css

*{margin:0;padding:0;}

If the above doesn't work...

I've had a look in firebug...it looks as though the <h1> tag in the header is the issue - try setting a lineheight of 1em & see if that does anything...the <h1>tag also has a top padding of 45px - reduce that & see if it changes anything.

 

I think one of the above should sort it.

Hello

 

I have just finished http://www.communityradiotoolkit.net/, well enough to release it anyway. It uses wordpress with a few plugins. I heavily modded the theme to suit our needs.

 

Under the menu and above the top bit of the sound wave in the header is probably 30px of redundant white space. You can see that although the header is 150px to match the graphic, there is more white space above than below. I've used the web develop toolbar for FF to see if I could find it and no success. I use a plugin called menubar but that doesn't seem to be the culprit.

 

I'd like to be able to solve it before I tidy up the CSS and html.

 

Any help appreciated.

 

Hi,

 

Take a look at the H1 tag inside the div#header, this has a margin which forces the div#header to expand, by simply putting overflow:hidden on the div#header you can see the white space disappear.

 

Might be best to change the style on the H1 tag.

 

Many Thanks

Nathan

Be resetting the margins it removes the browser default h1 margin

Hello

 

Thank you SO MUCH for the replies

 

<h1>tag also has a top padding of 45px

Yes, I needed that to drop the text over the blackest part of the sound wave.

overflow:hidden on the div#header you can see the white space disappear.

Thanks, I used this and reduced the h1 margin to 15px and it looks so much better now. No white redundant space.

 

I'd be really grateful if someone could explain the advice below as I'm not sure what it means and whether it would be a more elegant solution (not that the current one doesn't work).

 

Be resetting the margins it removes the browser default h1 margin

margin & padding reset add to css

 

*{margin:0;padding:0;}

Hello

Sorry to drag this back up.

The website looks ok on most screens now. The only issue I have is on some, the website title, sitting over the soundwave, wanders up a little. Is there any way of fixing the h1 so it's always dead over the middle?

Thank you

The default margin for the h1 tag is different in different browsers, so make it the same by adding a margin-top: 30px just after the h4 style in style.css:-

h4{letter-spacing:1px;}
#header h1 { margin-top: 30px; }
/* ====================
4) Miscellaneous

Thank you for replying

 

Edited: because I am half asleep

 

Thanks for your patience!