Spry menu bar issue - space between?

[lowellben]

Hello forum.

I have just signed up here with the hopes of bettering myself as a web designer (and hopefully meeting some cool, interesting people too!)

I've been designing websites for about 6 months now, after reading book after book, experimenting with hands-on web designing in my spare time, and I'm getting the hang of it. I'm fairly comfortable with CSS, HTML, and XHTML (thanks to the Missing Manual series and my buddies lol)

Here is my issue. I have this pesky "space" above my Spry menu bar in Dreamweaver CS5. I've tried everything to remove it. There are no margins/padding on my header div or my nav div - so it can't be that. I don't understand. It's only in live view and in browsers. In non-Live view, it looks tight and flush with the content div. See? I set the colors to just make it easier to see for you all.

Please, can someone school me on how to remove this annoying sliver of space? Thank you so much! It's good to be here. I'm sure it's an easy fix, I'm just not seeing it.

Thanks again,
LB

http://www.screencast.com/t/B99sEstKSben

edit:
See what happens when I remove the banner placeholder? The Spry menu jumps up and is flush with the top of the page. Why can't it do that with the banner? All I'd like is for my Spry menu to be flush, tight up against the banner.

http://screencast.com/t/rdupZGd6

Both videos should help, I hope - thank you again - I really appreciate it. I'm at a standstill now

 

[kohncreative]

Could you post your source code to look at? Preferably on a live URL?

 

[lowellben]

Could you post your source code to look at? Preferably on a live URL?

Sure, I can do that. I thought the videos would help, sorry about that.

Thank you!

LB

here you are...this is the best I can do for now (at work)....thank you, I hope you can help I'm so stuck - I can't tell what's overflowing, if anything.

I'm sure my code isn't flawless, but I'm really stumped as to what is causing this gap. The videos show live view vs. non-live. When I remove the banner image/placeholder, the Spry menu sits flush up against the top of the page, so it's almost like the banner has extra padding or something?

 

[lowellben]

Here is a picture showing when I change the body color, you can clearly see it leaking through - see?

What am I doing wrong?

Thanks
LB

 

[kohncreative]

Try changing
ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
background-color: #B3D9FF;
padding: 0.5em 0.75em;
color: #333;
text-decoration: none;
}

to

ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
background-color: #B3D9FF;
padding: 0 0.75em;
color: #333;
text-decoration: none;
}

 

[lowellben]

Try changing
ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
background-color: #B3D9FF;
padding: 0.5em 0.75em;
color: #333;
text-decoration: none;
}

to

ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
background-color: #B3D9FF;
padding: 0 0.75em;
color: #333;
text-decoration: none;
}

Hmm..that does not seem to change the error at all, but it does of course alter the spry menu formatting. (shrinks)

Please check out this short video I just made, it's showing that normally (in Non-Live View) there is a gap between the banner & Spry, which I'm used to seeing - but when you change to Live View it always resolves itself and tightens up the space so there is no space between.

It's like mine is backwards. It shows a flush, tight alignment in regular view, and when you switch to Live View, then the gap appears. I can't solve it I wish I knew more...

http://www.screencast.com/t/aJFNubMUBg3

Thank you for helping. I know we'll figure it out eventually...
Check out this picture too: I changed the color of my HEADER div to show it, and behold! It shows extra space. I thought the header = exactly the banner dimension! Am I on to something??

 

[kohncreative]

maybe define your #header as 180px, the same as your image placeholder

 

[CaldwellYSR]

IGNORE WHAT I SAID BEFORE! the #header needs 180px height like kohncreative said.

 

[lowellben]

Sadly, that height adjustment doesn't fix it. It makes it look worse. But perhaps does it show an error with my DIVs?
Please help! Thank you all

I wanted my banner to occupy 100% of the header DIV, and nothing more - nothing less. It seems like my header DIV (pink) is separate from banner? I'm lost sorry
LB

 

[lowellben]

Fixed - finally!

That was it. I had to define 180px as header

Smooth now - thank you!!!!!

Can someone tell me why I had to define a height though? I've never seen that cause such a headache. I thought the div should expand to whatever size the img is, right?

Thanks again!!!