473,721 Members | 2,216 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Unexpected space in div in firefox

5 New Member
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 2099
drhowarddrfine
7,435 Recognized Expert Expert
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 New Member
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 New Member
A little more info...
I have tested the page on browsershots.or g 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 Recognized Expert Expert
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 New Member
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 Recognized Expert Expert
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 Recognized Expert Expert
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 New Member
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

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

Similar topics

12
9405
by: skeeterbug | last post by:
http://www.geocities.com/operationsengineer1/test2.htm the extra space between the logoHeader and the menu bar occurs when i add the <ul>. if i comment out the ul and and all the li, the 1em space disappears in firefox. http://www.geocities.com/operationsengineer1/test3.htm it never shows in ie6. if i increase the margin of hmenu to 1 em, there is no effect on the top and bottom, but the right and left are
6
2186
by: yawnmoth | last post by:
I'm having some problems with the CSS on the following page: http://www.frostjedi.com/terra/scripts/graemlin2.html First, in Firefox, there's unwanted space between the #header div and the #main div. The following image better demonstrates this problem: http://www.frostjedi.com/terra/dev/ie-vs-fox-1.jpg I prefer IE's rendering.
7
2716
by: yawnmoth | last post by:
i have an image inside a table, and am getting an unexpected space underneath the image in firefox and opera (but not in IE). i've tried setting margin padding and border to 0 to no avail. here's the webpage: http://www.frostjedi.com/terra/dev/test.html any ideas on how to get rid of that space would be appreciated - thanks!
8
6872
by: lkrubner | last post by:
Am I wrong, or do paragraphs have extra space on top in FireFox, when compared to Microsoft IE. The top of this page is an example: http://www.publicdomainsoftware.org/index.php?pageId=299 The text in the box at top looks like it has an extra 10 or 20 pixels of padding at the top, when FireFox is compared to IE. Why is that?
5
718
by: Michael Shell | last post by:
Greetings, Consider the XHTML document attached at the end of this post. When viewed under Firefox 1.0.5 on Linux, highlighting and pasting (into a text editor) the <pre> tag listing will preserve formatting (white space and line feeds). However, this is not true when doing the same with the <code> tag listing (it will all be pasted on one line with multiple successive spaces treated as a single space) despite the fact that...
20
1359
by: Dr John Stockton | last post by:
In <URL:http://www.merlyn.demon.co.uk/estrdate.htm#T3> the button "Table III Reversed" executes function BCPTableIII() { var GN, DM, Ro, CY document.write("\t\t\tCalculated Table III", "<fieldset>\t\t\t THE GOLDEN NUMBERS\t\t SL P F M\n") for (GN=19 ; GN ; GN--) document.write(Prfx(GN, 3, " ")) document.write("<hr>\n") for (Ro=DM=21 ; Ro<=51 ; Ro++, DM++) { for (GN=19 ; GN ; GN--) {
3
6965
by: UnixSlaxer | last post by:
Hello All, While doing some TPC benchmark testing on DB2-UDB 8.2, I face the following problem when running this query: select * from lineitem where l_shipdate <= date '1998-12-01' - interval '69' day (3)
2
20012
by: P | last post by:
Hi all, I'm trying to run the following code taken from http://blogs.ittoolbox.com/database/technology/archives/006045.asp# select substr(tablespace_name,1,30) as "Tablespace Name", case (tablespace_type) when 0 then 'DMS' else 'SMS' end as "Type",
5
2574
by: Richard Maher | last post by:
Hi, Can someone please show me how to tell Firefox to preseve white-space when returning the selectList.option.value attribute? I have change the style so that the white-space is preserved on the screen, but for some bizarre reason when I try to substring out a series of bytes (aka a fixed-length string or field) from a given option it squashes everything up and corrupts the result.
0
8840
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8730
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9064
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
8007
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
5981
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4484
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
1
3189
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
2576
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2130
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.