CSS - Display:none Leaves Blank Space

I am working on a web page, and am all but done, but I am having one final problem with it. The css drop down menu works fine except for one issue... when you scroll down on one of the pages, and then go to the css menu bar a gap appears between the menu bar and the sub menu options that drop down.

How can I get this menu to always drop down DIRECTLY below the main menu bar without the gap?


___________


Here is the SpryMenuBarHorizontal css

_____________

@charset "UTF-8";

/* SpryMenuBarHorizontal css - Revision: Spry Preview Release 1.4 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/*******************************************************************************

LAYOUT INFORMATION: describes box model, positioning, z-order

*******************************************************************************/

/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
padding-left: 0px;
padding-right: 0px;
position: relative;
background-image: xxx;
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug:
ul.MenuBarActive
{
z-index: 1000;
}
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 16px;
position: relative;
text-align: center;
cursor: pointer;















width: ;
float: left;
background-image: xxx;
padding-left: 0px;
padding-right: 0px;
}
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8em;
position: fixed;
left: -1000em;
background-image: xxx;
padding-left: 0px;
padding-right: 0px;

}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
left: auto;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
width: 9.2em;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
position: absolute;
margin: -5% 0 0 95%;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
left: auto;
top: 0;

}

/*******************************************************************************

DESIGN INFORMATION: describes color scheme, borders, fonts

*******************************************************************************/

/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
{
border: 0px solid #000000;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
color: #2C2A2B;
text-decoration: none;
padding-left: 24px;
padding-right: 24px;
padding-top: .5em;
padding-bottom: .5em;
background-repeat: repeat;
background-image: xxx;

}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
color: #FFF;
display: block;

}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
color: #FFF;
display: block;

}

/*******************************************************************************

SUBMENU INDICATION: styles if there is a submenu under a given menu item

*******************************************************************************/

/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
background-image: XXX;
background-repeat: repeat;

}
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
background-image: XXX;
background-repeat: repeat-x;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{

}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
background-image: xxx;
background-repeat: no-repeat;
background-position: 95% 50%;
}

/*******************************************************************************

BROWSER HACKS: the hacks below should not be changed unless you are an expert

*******************************************************************************/

/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
{
position: absolute;
z-index: 1010;
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
ul.MenuBarHorizontal li.MenuBarItemIE
{
display: inline;
f\loat: left;
background: #FFF;
}


Thank you so much for your help, I have a deadline that is coming up very quick... I'd appreciate any help I could get.

_______________

my css is sloppy , but at this point with the deadline approaching, I really just need to get this to work properly, and I have a feeling its as simple as a few lines of code changed....

Hi, I'm new here and hope someone can help! I wasn't sure whether to post this in the CSS or Flash forum; it's a problem caused by Flash which I suspect needs some clever CSS to resolve.

My new website is carolineofbrunswick (dot) co (dot) uk. As you can see, there's a ton of blank space off to the right of the pages, and I can't figure out how to get rid of it.

It's caused by the Flash objects in the right-hand column. Changing the width attributes on those Flash objects just causes them to not appear at all, though the blank space still exists.

Can anyone help?

Cliff

Safari 1.2.3 (or so) will display my multi-level CSS-driven menus/ The third-level is set to display with a background color over a text area with a different background.

When the user clicks or mouses-off the third-level menu, there is about a 3px vertical remnant of that menu left on screen.

What can I do to prevent this?

Hey there,

webbsdomain.com/Max

I am working on a landing page for a client and I am a bit stuck. All XHTML and CSS validates, no issues there....

The design looks and works great in ALL browsers other than IE6. The issue is with the 3 colored divisions, secondLeft, secondMiddle, and secondRight.

In IE6 there is a HUGE amount of white space left between the div's with no reason that I can find.

I researched the issue online and found similar issues:

IE6 3px float bug

and

IE6 double margin bug

Neither of which seem to be the issue, and the fixes they describe do not work.

I am completely at a loss on this one, and any guidance anyone can offer would be VERY useful!

Thanks in advance,
Brian

Can someone please help me?

I am trying to get my left side column to meet my footer image... just like on this website:

newcastlegateshead.com

See how they side bar goes all the way down and meets the footer?

Mine has a one inch gap between the bottom of the column and the footer.

Does anyone know what they did to make it meet perfectly?Or the proper css code & where to put it? I've been trying to get this solved for dayyyssss

Thank you so much...

Hey everyone. I am new here and this forum looks great. Already found loads of cool PHP ideas just by reading through some of the other posts.

I thought for my first post, I would put something into the community.

I have created a number of blank css website templates and posted them on my site. I use these as a starting point whenever I create a new site and I find they save me a lot of time.

The whole idea of them is to be very basic - even the homepage. I didn't want to fill the templates with loads of stuff you would want to take out but I thought it was important to have enough in there so you can see the idea behind each one.

I'd love to hear back from you all and know what you think to them.

blankcss.com

Looking forward to the responses

I couldn't figure out why people were telling me they couldn't see my page but i could see it just fine in two different locations. Come to find out I use firefox and IE is showing a blank page. Can someone help me with this?

cookcommons . com / index_working . html

At this location, I have a page that I validated the code, but most of it is hidden in both IE 6 and IE7? Seems to work fine in FF?

Thanks for the help in advance.

Hi, my css drop down menu seems to be working fine in firefox, but there are a few problems in IE. It didn't even work in IE7 until I added

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

1. In IE7, if you first hover over the link to get the drop down menu to show, move away, then hover over the menu again, it will show the blank sub menus of the one you last have opened. This is hard to explain. Please see my webpage for what I mean.

http://ling.twinner.com.tw/uselink/index.php

Move your mouse to the Products link at the top.

2. My menu seems to load slow. Is it because I have many sub menus or is my css not efficient?

3. How do I set the sub menu height to auto?

Here is my css: http://ling.twinner.com.tw/uselink/menu_style.css

Any suggestion is greatly appreciated.

I'm building a navagation bar. I want to have several lists, each with a heading. Due to space and visual concerns, I would like to eliminate the blank line between the heading and each list.

Here's what I have:
Code:

<div id="navigation"> 
<span class="nav_title">Archives</span>
<ul>
	<li>[...]</li>
</ul>
<p>
<span class="nav_title">Categories</span>
<ul>
	<li>[...]</li>
</ul>
[...]                                
</div>

And this is the corresponding CSS (just the ul part, obviously):
Code:

#navigation ul { 
               list-style-position: inside; 
               list-style-type: disc; 
               padding: 0; 
               margin-top: 0px; 
               padding-top: 0px; 
               display: block; 
            }

What I have right here works, but it only works for the first list. All the other lists have a blank line between the heading and the following list -- but the first does not.

I find it weird that this would work for the first time it is used, but not for the second time. I tested it by replacing the heading and list with other headings and lists and got the same result -- the *first* heading blends with the list, but the rest do not.

You can view this problem here (it's in the navigation bar on the right-hand side. "Archives" blends with its list, but nothing else does.) In case you couldn't tell, I'm trying to hack out my own WordPress theme atm -- don't yell at my table layout yet, I'm converting it from another theme and haven't finished yet

I have a page that is laid out with in a table. It has a header and a footer area. Ive defined a stylesheet for printing, and my content shows up correctly when printing (or print preview) with the header and footer items left out. What is not right though, is the 1st page is blank when i do a print preview.

Help ?

to add:
This is an asp.net web page, that has a form with several images that render inside a div element and this form is within the main table.

This is a very interesting bug and I have been trying to do a little bit of hacking but with no success here. So, thought anyone of you would know what I'm missing.. The problem here is that it showed up just fine on the webpage but not in Print Preview or Print-Out for IE.

Code:

<style type="text/css">
   divBlackBox1
   {
     margin: 50px auto;
     padding: 0px;
     width: 400px;
     height: 4px;
     display: block;  /* for IE stupidity (to make height work correctly with the correct pixels)... */
     font-size: 1pt;  /* for IE stupidity (to make the smaller height work due to default font-size)... */
     overflow: hidden; /* Problem is that it doesn't work for print preview or print-out in IE... */
     background-color: #000000;
   }
</style>

<div class="divBlackBox1"></div>

Thanks,
FletchSOD

Code:

<form action="">
  <div>
    <select id="about_menu" name="about_menu" 
	   onchange="window.location.href=this.form.about_menu.options[this.form.about_menu.selectedIndex].value;" 
	   title="Go to About pages">
      <option value="">About</option>    
      <option value="http://myblog.com/about-the-blog/">About The Blog</option>
      <option value="http://myblog.com/welcome/">Welcome</option>
    </select>
  </div>
</form>

I use <option value="">About</option> as self labeling.
I would like the width of the form to be so that there won't be a blank after About even if other options are longer.
The issue is that About is going to be translated in several languages and thus I can't rely on a determined value for the width.

I've been seeing people using ul and li tags to make their menus in css.

So I've started trying to do the same, here is an example.

But obviously here, the buttons are not displaying inline. All of the styles are within the page code itself. I've got a display: inline style on the li tag, but it's still not working?

How can I get this to work or is there any other way to get a ul li menu to display this way?

I have that annoying problem that code like this:

PHP Code:
<img src="images/worsleytop.jpg" width="750" height="175" />

<div id="navigation">

<ul id="nav"> 

  <li> 





Causes a gap between the image and the navigation div of a couple of pixels. I know why it is happening. And I know that changing it to

PHP Code:
<img src="images/worsleytop.jpg" width="750" height="175" /><div id="navigation">

<ul id="nav"> 

  <li> 





fixes the problem in IE, but not in firefox. How do I sort it out universally?