Unexpected space in div in firefox

[ChrisZ]

Hi
I am using a menu adapted from cssplay.co.uk, which is fine, but I want to add a coloured border around it, so I am nesting a div with a border. This works fine in Opera & IE6 (havnt tested IE7 yet as my XP box went up in smoke this week!) but in Firefox 2.0.0.9 there is a space at the bottom and I just cant see why ... I have setup a test page with 2 example menus Click here for example ..any ideas what could be causing this prob ?
Many Thanks
Chris

Code snip

 
<div id="menu-main">
<div id="menu-main-border">
<ul>
<li id="current"><a href="index.html"><span>Home</span></a></li>
<li><a href="products.html"><span>Products</span></a></li>
<li><a href="services.html"><span>Services</span></a></li>
<li><a href="contact.html"><span>Contact</span></a></li>
</ul>
</div>
</div>
 

CSS Snip
#menu-main {
position: relative;

font-size:13px;
line-height:normal;

margin:0px;
padding:0px;
}

#menu-main-border {
position: absolute;

border-color: #8CAAE7;
border-width: 7px;
border-style: solid;

margin:0px;
padding:0px;
}

#menu-main ul {
/*height:20px; */
margin:0px;
padding:0px;

list-style: none;
}
#menu-main li {
display:inline;
margin:0px;
padding:0px;
}
#menu-main a {
float:left;
background:url("ddmenu/tableft.gif") no-repeat left top;
margin:0px;
padding: 0px 0px 0px 10px;
text-decoration:none;
}
#menu-main a span {
float:left;
display:block;
background:url("ddmenu/tabright.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#menu-main a span {float:none;}
/* End IE5-Mac hack */
#menu-main a:hover span {
color:#fff;
}
#menu-main a:hover {
background-position:0% -42px;
}
#menu-main a:hover span {
background-position:100% -42px;
}
#menu-main #current a {
background-position:0% -42px;
}
#menu-main #current a span {
background-position:100% -42px;
}

[drhowarddrfine]

And id is a unique name given to only one element per page but you use the same name several times. Fix this first.

[ChrisZ]

Hi
First, a correction, this code is actually adapted from CSS tab designer from highdots.com.

Sorry, The error was cause because I pasted up the code quickly to create the test page ... I have removed the second menu so page html & css now validates.

Thanks for looking...
Chris

[ChrisZ]

A little more info...
I have tested the page on browsershots.org and the error only happens on firefox (1.5 & 2) ...

displays fine on IE (6&7), Opera (9.23&9.24), Konqueror 3.5 and Safari (2mac&3win)

[drhowarddrfine]

I'm running out the door. It looks like your images are seperate from your text. Perhaps the absolute positioning is causing the background to come up because of that. You should make the background part of the text background. Sorry, on the run.

[ChrisZ]

It looks like your images are seperate from your text. Perhaps the absolute positioning is causing the background to come up because of that. You should make the background part of the text background. Sorry, on the run.

I added the #menu-main-border with absolute positioning to make it snap to the size of the contents inside, without it #menu-main-border reverts to the width of its parent and the height is unafected by the child elements within. The parent must be relative so that it can be positioned correctly to the other elements on the page.

The background is in 2 parts so it can "stretch" to the text contents and is applied to the texts container element (the span) and the surrounding anchor and appear to be displaying at the correct size and position ... just with white space under them in FF ... most frustrating!

No worries .... any thoughts appreciated.

Chris

[drhowarddrfine]

It is the absolute positioning. AP causes the element to be removed from the normal flow. This is why the text moves up, and thus the bottom also moves up, to take the space vacated by the border div. Why the other browsers are doing what they are, I don't know, but this is another "drive by viewing" on my part. :)

[drhowarddrfine]

This is so weird. I was going to admonish you for making your html and css more complicated than necessary. I whipped out this css:

/*
Top level menu
*/
*{margin:0;padding:0}
 
    #menu-main {
    border:7px solid blue;
    overflow:auto;
    position: absolute; 
      font-size:13px;
     }
 
    #menu-main ul {        
      list-style: none;
      }
 
    #menu-main a {
      float:left;
      background:url("tableft.gif") no-repeat left top;
      text-decoration:none;
      }
    #menu-main a span {
      background:url("tabright.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#666;
      }
 
    #menu-main a:hover span {
      color:#fff;
      }
    #menu-main a:hover {
      background-position:0% -42px;
      }
    #menu-main a:hover span {
      background-position:100% -42px;
      }
    #menu-main #current a {
            background-position:0% -42px;
    }
    #menu-main #current a span {
            background-position:100% -42px;
    }
 

which works great in Firefox but IE and Opera ignore it. I have to be missing something but I'm running around too much to think.

[ChrisZ]

I had to put alot of the code you removed back in to get the buttons to display correctly (the code is not ott but designed to be added to other css files) and while doing so I realised that I needed to control the overflow in the original version by adding the overflow:hidden; to #menu-main-border (overflow:auto gives a scroll bar in opera)

This allows me to have the menu relative to other code (better to use in different layouts)

Now tested in IE6, Opera 924 & FF 2009 ... will check others now

thanks for the assist,
Chris