asked on

Getting extra space on bottom of menu

I am using a menu with jQuery and I'm getting some extra space under the menu. When I use overflow: hidden, it seems to work in IE but then, the dropdown doesn't work in firefox. How can I make it have no extra whitespace on the bottom and still work in both browsers? I attached the whole page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
<title>untitled
</title>
<style type="text/css">
body { margin: 20px; background-image: url("bg.jpg"); background-repeat: repeat-x; background-position: bottom; font-family: arial; font-size: 12px; }
.navbox { background-image: url("nav_bg.jpg"); background-repeat: no-repeat; background-position: left-top; font-size: 14px; }
.clear {clear:both}    
/* remove the list style */  
#nav {   
    margin:0;    
    padding:0;    
    list-style:none;  
}      
       
    /* make the LI display inline */  
    /* it's position relative so that position absolute */  
    /* can be used in submenu */  
    #nav li {   
        float:left;    
        display:block;    
        width:120px;     
        position:relative;   
        z-index:500;    
    }   
	#nav li.big {   
        float:left;    
        display:block;    
        width:140px;     
        position:relative;   
        z-index:500;    
    }   
	#nav li.last {   
        float:left;    
        display:block;    
        width:120px;     
        position:relative;   
        z-index:500;    
		margin-left: 50px;
    }   
           
    /* this is the parent menu */  
    #nav li a {   
        display:block;    
        padding:8px 5px 5px 5px;    
        font-weight: normal;     
        height:23px;    
        text-decoration:none;    
        color:#fff;    
        text-align:center;    
        color: white; 
		
    }   
  
    #nav li a:hover {   
		text-decoration:none; 	
    }   
       
    /* you can make a different style for default selected value */  
    #nav a.selected {   
        font-style: italic; 
    }   
       
        /* submenu, it's hidden by default */  
        #nav ul {   
            position:absolute;    
            left:0;    
            display:none;    
            margin:0px;    
            padding:0;    
            list-style:none;   
			background: #661B21;
        }   
           
        #nav ul li {   
            width:120px;    
            float:left;    
            margin-top: 2px; 
			background:#8C1058;
        }   
		#nav ul li:hover {   
            float:left;    
            margin-top: 2px; 
			background: #D81988; 
        }  
           
        /* display block will make the link fill the whole area of LI */  
        #nav ul a {   
            display:block;     
            height:15px;   
            padding: 14px 5px 18px 5px;    
            color:#fff;  
        }   
           
        #nav ul a:hover {   
            text-decoration:none;    
        }   
  
/* fix ie6 small issue */  
/* we should always avoid using hack like this */  
/* should put it into separate file : ) */  
*html #nav ul {   
    margin:0 0 0 -2px;   
}  
</style>
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript">
$(document).ready(function () {    
       
    $('#nav li').hover(   
        function () {   
            //show its submenu   
            $('ul', this).slideDown(125); 
  
        },    
        function () {   
            //hide its submenu   
            $('ul', this).slideUp(125);            
        }   
    );   
       
});  
</script>
<body>
<div class="navbox">
<ul id="nav">  
    <li><a href="#">Current Rates</a></li>  
    <li><a href="#" class="selected">Loan Options</a>  
        <ul>  
            <li><a href="#">Item 01</a></li>  
            <li><a href="#" class="selected">Item 02</a></li>  
            <li><a href="#">Item 03</a></li>  
        </ul>  
        <div class="clear"></div>  
    </li>  
    <li class="big"><a href="#">Refinance My Home</a></li>  
    <li><a href="#">Buying a Home</a></li>  
	<li><a href="#">Resources</a>
	    <ul>  
			<li><a href="#">Item 04</a></li>  
			<li><a href="#">Item 05</a></li>  
			<li><a href="#">Item 06</a></li>  
			<li><a href="#">Item 07</a></li>  
		</ul>            
        <div class="clear"></div>  
	</li>  
	<li><a href="#">About Signature</a></li>  
	<li class="last"><a href="#">GET A QUOTE!</a></li> 
</ul>  
  
<div class="clear"></div>
</div>  
</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

GabelstaplerfahrerKlaus

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

EMB01

ASKER

Sorry, let me give you a different code. This will better illustrate what I'm talking about.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >   
<head>   
<style>
body { margin: 0px auto; background-image: url("bg.jpg"); background-repeat: repeat-x; background-position: bottom; font-family: arial; font-size: 12px; }
/* head */
.box { margin: 0px auto; width: 100%; background-color: #01592F; padding: 5px; }
.head { margin: 0px auto; text-align: left; width: 932px; color: white; }
/* logo */
.logo { margin: 0px auto; margin-top: 5px; text-align: left; width: 932px; background-image: url("logo.jpg"); height: 88px; }
/* nav */
.navbox { margin: 0px auto; width: 932px;  height: 33px; background-color: #E4E4E4; background-image: url("nav_bg.jpg"); background-repeat: no-repeat; background-position: left-top; }
/* body */
.body { overflow:auto; margin: 0px auto; border-top: 1px solid #E4E4E4; border-bottom: 1px solid white; width: 932px; background-color: white; background-image: url("body_bg.jpg"); background-repeat: repeat-x; background-position: top; }
.bodyleft { clear: left; float: left; margin: 20px; width: 600px; background-color: grey; }
.bodyright { float: left; margin: 20px; margin-left: 10px; width: 260px; background-color: none; }
.bodyrighthead { padding: 5px 10px 5px 20px; background-color: #005A2E; color: white; font-size: 16px; }
.bodyrightsubhead { padding: 10px 10px 10px 20px; background-color: none; color: black; font-size: 14px; }
.bodyrightbox { padding: 20px 10px 20px 10px; height: 400px; background-color: white; background-image: url("body_right_bg.jpg"); background-repeat: repeat-x; background-position: top; }
.bodyrightbox h1 { margin: 0px 0px 0px 5px; font-size: 22px; color: white; font-weight: normal; padding: 0px; }
.bodyrightbox h2 { margin: 5px 0px 0px 10px; font-size: 14px; color: orange; font-weight: normal; padding: 0px; }
.bodyrightform { padding: 20px 10px 20px 15px; margin: 10px 0px 10px 0px; height: 250px; background-color: #E9EDEE; }
.bodyrightbox span { padding: 0px 10px 0px 10px; }
.bodyrighthead2 { padding: 5px 10px 5px 20px; background-color: #E67B1D; color: white; font-size: 16px; }
.bodyrightbox2 { margin: 20px 0px 20px 0px; height: 278px; background-color: white; background-image: url("testimonials.jpg"); background-repeat: no-repeat; background-position: left-top; }
/* foot */
.foot { margin: 0px auto; width: 932px; background-color: none; }
.foottext { padding: 20px; }
</style>
<style type="text/css">
.clear {clear:both; }    
/* remove the list style */  
#nav {   
    margin:0px auto;    
    padding:0;    
    list-style:none; 
}      
       
    /* make the LI display inline */  
    /* it's position relative so that position absolute */  
    /* can be used in submenu */  
    #nav li {   
        float:left;    
        display:block;    
        width:120px;     
        position:relative;   
        z-index:500;    
    }   
	#nav li.big {   
        float:left;    
        display:block;    
        width:140px;     
        position:relative;   
        z-index:500;    
    }   
	#nav li.last {   
        float:left;    
        display:block;    
        width:120px;     
        position:relative;   
        z-index:500;    
		margin-left: 50px;
    }   
           
    /* this is the parent menu */  
    #nav li a {   
        display:block;    
        padding:10px 5px 5px 5px;    
        font-weight: normal;     
        height:23px;    
        text-decoration:none;    
        color:#fff;    
        text-align:center;    
        color: white; 
		
    }   
  
    #nav li a:hover {   
		text-decoration:none; 	
    }   
       
    /* you can make a different style for default selected value */  
    #nav a.selected {   
        font-style: italic; 
    }   
       
        /* submenu, it's hidden by default */  
        #nav ul {   
            position:absolute;    
            left:0;    
            display:none;    
            margin:0px;    
            padding:0;    
            list-style:none;   
			background: #661B21;
        }   
           
        #nav ul li {   
            width:120px;    
            float:left;    
            margin-top: 2px; 
			background:#8C1058; 
        }   
		
		#nav ul li:hover {   
            float:left;    
            margin-top: 2px; 
			background: #D81988; 
        }  
           
        /* display block will make the link fill the whole area of LI */  
        #nav ul a {   
            display:block;     
            height:15px;   
            padding: 14px 5px 18px 5px;    
            color:#fff;  
        }   
           
        #nav ul a:hover {   
            text-decoration:none;    
        }   
  
/* fix ie6 small issue */  
/* we should always avoid using hack like this */  
/* should put it into separate file : ) */  
*html #nav ul {   
    margin:0 0 0 -2px;   
}  
</style>
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript">
$(document).ready(function () {    
       
    $('#nav li').hover(   
        function () {   
            //show its submenu   
            $('ul', this).slideDown(125); 
  
        },    
        function () {   
            //hide its submenu   
            $('ul', this).slideUp(125);            
        }   
    );   
       
});  
</script>
</head>   
<body>
<div class="box">
<div class="head">
Text
</div>
</div>
<div class="logo">
</div>
<div class="navbox">
<ul id="nav">  
    <li><a href="#">Current Rates</a></li>  
    <li><a href="#" class="selected">Loan Options</a>  
        <ul>  
            <li><a href="#">Item 01</a></li>  
            <li><a href="#" class="selected">Item 02</a></li>  
            <li><a href="#">Item 03</a></li>  
        </ul>  
        <div class="clear"></div>  
    </li>  
    <li class="big"><a href="#">Refinance My Home</a></li>  
    <li><a href="#">Buying a Home</a></li>  
	<li><a href="#">Resources</a>
	    <ul>  
			<li><a href="#">Item 04</a></li>  
			<li><a href="#">Item 05</a></li>  
			<li><a href="#">Item 06</a></li>  
			<li><a href="#">Item 07</a></li>  
		</ul>            
        <div class="clear"></div>  
	</li>  
	<li><a href="#">About Signature</a></li>  
	<li class="last"><a href="#">GET A QUOTE!</a></li> 
</ul>  
  
<div class="clear"></div> 
</div>
<div class="body">
<div class="bodyleft">
<script type="text/javascript">
for (i=0;i<35;i++) {
document.write("br<br />");
}
</script>
</div>
<div class="bodyright">
<div class="bodyrighthead">
Text
</div>
<div class="bodyrightsubhead">
Text
</div>
<div class="bodyrightbox">
<h1>Text</h1>
<h2>Text</h2>
<div class="bodyrightform">
</div>
<span>Text</span>
</div>
<div class="bodyrighthead2">
Text
</div>
<div class="bodyrightbox2">
</div>
</div>
</div>
<div class="foot">
<div class="foottext">
Text
</div>
</div>
</body>   
</html>

Open in new window

Lukasz Chmielewski

Have you got an online version ?

EMB01

ASKER

Sorry, I don't right now. But you can just copy and paste it into notepad and save it as HTML and open it in your browser on your local machine and you should be able to see what I mean. The problem is there is a little space under the menu in firefox, and when I set overflow: hidden, it removes the space but hides the submenu from appearing on mouseover. All the while, it works in IE.

GabelstaplerfahrerKlaus

It looks exactly the same in the three major browsers, different computer, different versions this time... The dropdown menus work fine as well.

Can you indicate what space you're referring to on that picture? Is it the white space between the line and the menu? Because it looks like that was intentional, it being the same in the 5 different browsers (versions) that I've tested...
Untitled-1.jpg

EMB01

ASKER

Yes, it's the whitespace just beneath the menu. It's just above the line. The line is okay, I just don't want that extra space above the line.

SOLUTION

EMB01

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

GabelstaplerfahrerKlaus

Cool, no problem. Just in case you aren't already using them (or if someone else comes across this post), the best tools for debugging JavaScript and CSS are the Firefox plugin Firebug, and Google Chrome's "Inspect Element" feature.

These tools showed me your white space as if it was intentional: it showed up the same in each browser and it was part of the layout you had specified.

EMB01

ASKER

Thanks for trying.