471,605 Members | 1,355 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,605 software developers and data experts.

Unexpected space in div in firefox

5
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
Expand|Select|Wrap|Line Numbers
  1.  
  2. <div id="menu-main">
  3. <div id="menu-main-border">
  4. <ul>
  5. <li id="current"><a href="index.html"><span>Home</span></a></li>
  6. <li><a href="products.html"><span>Products</span></a></li>
  7. <li><a href="services.html"><span>Services</span></a></li>
  8. <li><a href="contact.html"><span>Contact</span></a></li>
  9. </ul>
  10. </div>
  11. </div>
  12.  
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;
}
Nov 2 '07 #1
8 2001
drhowarddrfine
7,435 Expert 4TB
And id is a unique name given to only one element per page but you use the same name several times. Fix this first.
Nov 2 '07 #2
ChrisZ
5
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
Nov 4 '07 #3
ChrisZ
5
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)
Nov 4 '07 #4
drhowarddrfine
7,435 Expert 4TB
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.
Nov 4 '07 #5
ChrisZ
5
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
Nov 4 '07 #6
drhowarddrfine
7,435 Expert 4TB
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. :)
Nov 4 '07 #7
drhowarddrfine
7,435 Expert 4TB
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:
Expand|Select|Wrap|Line Numbers
  1. /*
  2. Top level menu
  3. */
  4. *{margin:0;padding:0}
  5.  
  6.     #menu-main {
  7.     border:7px solid blue;
  8.     overflow:auto;
  9.     position: absolute; 
  10.       font-size:13px;
  11.      }
  12.  
  13.     #menu-main ul {        
  14.       list-style: none;
  15.       }
  16.  
  17.     #menu-main a {
  18.       float:left;
  19.       background:url("tableft.gif") no-repeat left top;
  20.       text-decoration:none;
  21.       }
  22.     #menu-main a span {
  23.       background:url("tabright.gif") no-repeat right top;
  24.       padding:5px 15px 4px 6px;
  25.       color:#666;
  26.       }
  27.  
  28.     #menu-main a:hover span {
  29.       color:#fff;
  30.       }
  31.     #menu-main a:hover {
  32.       background-position:0% -42px;
  33.       }
  34.     #menu-main a:hover span {
  35.       background-position:100% -42px;
  36.       }
  37.     #menu-main #current a {
  38.             background-position:0% -42px;
  39.     }
  40.     #menu-main #current a span {
  41.             background-position:100% -42px;
  42.     }
  43.  
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.
Nov 4 '07 #8
ChrisZ
5
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
Nov 4 '07 #9

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

6 posts views Thread by yawnmoth | last post: by
7 posts views Thread by yawnmoth | last post: by
5 posts views Thread by Michael Shell | last post: by
20 posts views Thread by Dr John Stockton | last post: by
3 posts views Thread by UnixSlaxer | last post: by
5 posts views Thread by Richard Maher | last post: by
1 post views Thread by XIAOLAOHU | last post: by
reply views Thread by leo001 | last post: by
reply views Thread by CCCYYYY | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.