What is the invisible space?

Some invisible space blocking main page

[slinky]

Hi guys - I created a dropdown menu in css and for some reason the rightmost dropdown seems to create an invisible area that blocks the content behind it (see the rightmost menu item). I was wondering if any of you had an idea of what could cause this - can't seem to figure out what it might be and need a fresh set of eyes! Seems to be a problem in all browsers. URL is here: <snip>

[edited by: swa66 at 8:02 am (utc) on May 8, 2009]
[edit reason] No personal URLs please see ToS and forum charter [/edit]

[CSS_Kidd]

its not your menu it is this line

<input type="text" name="q" size="20" style="border: 0px none ; margin-left: 0px; float: left;"/> (your search box area)

or the other hidden input fields there.

if you notice the dotted line below the menu is also covered up as well.

BTW. Please post a summarized version of your code instead of posting links. They will be removed as per the rules of this forum.

[slinky]

Thanks css_kid - but that search menu shouldn't be the problem. It only occurred when I added a dropdown element to the last menu item, the about us menu. When it was just a static link it looked fine. It went from this:

<a class="about_us" onclick="MM_goToURL('parent','http://www.mysite.com/about-mysite/');return document.MM_returnValue">
</a>

TO THIS:

<div class="about_us">
<ul>
<li><a onclick="MM_goToURL('parent','http://www.mysite.com/about-mysite/');return document.MM_returnValue">
</a>
<ul>
<li style="background:url(http://www.mysite.com/img/men_top.png) no-repeat; width:220px; height:7px;">&nbsp;</li>
<li><a href="http://www.mysite.com/about-mysite/"><strong>About Us</strong></a></li>
<li><a href="http://www.mysite.com/diary/"><strong>MySite Diary</strong></a></li>
<li style="background:url(http://www.mysite.com/img/men_bottom.png) no-repeat; width:220px; height:7px;">&nbsp;</li>
</ul>
</li>
</ul>

After changing to have an extended menu I saw the bottom header and dotted line covered up. I can't figure out what did it from the above. With regard to the css for the form... you've got that one listed above and thanks for the info about protocol too!

Here is the css related to the menu:

.about_us {
background: url(../img/about_us_button.gif) left no-repeat;
width:83px;
height:45px;
float:left;
}

.about_us:hover {
background: url(../img/about_us_button.gif) right no-repeat;
width:83px;
height:45px;
float:left;
cursor:pointer;
}

The other dropdowns are the same but just a varied width from 83px.

Here is the navbar search CSS

.nav_search {
width:auto;
height:45px;
margin-left:2px;
margin-top:10px;
float:left;
}

and the code

<form style="margin:0px; display:inline;" action="http://www.mysite.com/site-search/" method="get">
<input type="hidden" name="cx" value="partner-pub-111111111:qa1111-is3o" />
<input type="hidden" name="cof" value="FORID:11" />
<input type="hidden" name="ie" value="ISO-8859-1" />
<input type="text" style="border: 0px; margin-left:0px; float:left;" size="20" name="q" />
<input type="submit" style="border: 0px; margin-left:10px; float:left; height:20px; width:20px; background:transparent; cursor:pointer;" name="sa" value="" />

[edited by: slinky at 8:49 pm (utc) on May 7, 2009]

[slinky]

Actually - you also make a good point. I just noticed that by adding the right side drop down menu for "about" it also creates a space below the search bar that cuts into the menu to the left (professional) - I can't understand why this is appearing now after I added in the above code which doesn't relate tot he search box.

- You're right. It IS the search box... but how did it get pushed all the way down there? That's what is plaguing me here and I can't fix...

[slinky]

OK... so I finally figured out how to move that search box up... thanks! It may have been as simple as a missing div. The only problem I have now is getting the menu item to not be sensitive over the left side of the search box. If you try to put your cursor into the search box it will only change to a text cursor for input on the right half of the search box...

I figured it out... this was a very complex css menu for me and with a little prompting above, it all worked out. :)