Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Apr 2005
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Whitespace in IE problem

    I have adapted some menu code from the nice example at seoconsultants.com to well look a bit better, but am having a lot of problems with spacing in IE.

    The problem is that in IE there seems to be a gap between the left hand icon strip and the text list of menu options, this gap shows through the underlying page making it look bad



    The above example can be found here

    html (excuse the bad formatting it was script generated)
    Code:
    <!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>
        <link rel="StyleSheet" type="text/css" media="screen" href="menu.css" />
    	<!--CSS behaviour fix for IE-->
    	<!--[if IE]>
    		<style type="text/css" media="screen">
    		body {
    		behavior: url(csshover.htc);
    		font-size: 100%;
    		}
    		
    		#menu ul li {float: left; width: 100%;}
    		#menu ul li a {height: 1%;} 
    		
    		#menu a, #menu h2 {
    			font-family: verdana, arial, helvetica, sans-serif;
    			font-size: 10px;
    		}
    		</style>
    	<![endif]-->
    </head>
    
    <body>
    	<div id="menu">
    
    	<ul><li><h2>Menu 2</h2>
    	<ul>
    	<li><div class="icon"><img class="menuSpacer" src="images/invoices.gif" alt="" /></div><a href="#">Item 1</a></li>
    	<li><div class="icon"></div><a href="#">Item 2</a></li>
    	<li><div class="icon"></div><a href="#">Item 3</a></li>
    	<li><div class="icon"></div><a href="#">Item 4</a></li>
    	<li><div class="icon"></div><a href="#"><img class="sep" src="images/menuSep.gif" /></a></li>
    	<li><div class="icon"></div><a href="#">Item 5</a></li>
    	<li><div class="icon"></div><a href="#">Item 6</a></li>
    	<li><div class="icon"></div><h2>Item 7<img class="arrow" src="images/arrowGreyRight.gif" alt="" /></h2>
    	<ul>
    	<li><div class="icon"></div><a href="#">Sub Item 1</a></li>
    	<li><div class="icon"></div><a href="#">Sub Item 2</a></li>
    	</ul>
    	</li>
    	</ul>
    	</li>
    	</ul></div>
    	
    	<div style="background-color:#ff0000; width: 100%; height: 200px;"></div>
    </body>
    
    </html>
    and the CSS
    Code:
    /* Global Classes */
    html
    {
    	margin: 0px 0px 0px 0px;
    	padding: 0px 0px 0px 0px;
    	height: 100%;
    	font-size: 10px;
    }
    
    body
    {
    	margin: 0px 0px 0px 0px;
    	font-family: verdana, arial, helvetica, sans-serif;
    	font-size: 10px;
    	height: 100%;
    	z-index: 0;
    }
    
    
    form{
    	margin: 0px 0px 0px 0px;
    	padding: 0px 0px 0px 0px;
    	display: inline;
    }
    
    a
    {
    	text-decoration: none;
    	color: #6fbfbf;
    }
    
    h3
    {
    	margin: 2px 2px 2px 2px;
    	padding: 2px 2px 2px 2px;
    	font-size: 20px;
    }
    
    input, textarea, select
    {
    	font-size: 9px; 
    	color: #000000; 
    	font-family: verdana, arial, helvetica, sans-serif;
    }
    
    a img
    {
    	border: none;
    }
    
    
    
    
    /*---- Menu CSS ----*/
    #menu
    {
    	position:absolute;
    	width: 100%;
    	background: #ffffff;
    	float: left;
    	border-bottom: 1px solid #cc8888;
    	z-index: 500;
    	min-width: 640px;
    
    }
    
    #menu ul
    {
    	list-style: none;
    	margin: 0;
    	padding: 0;
    	float: left;
    	width: 100px;
    }
    
    #menu ul ul
    {
    	border: 1px solid black;
    	width: 180px;
    	border-right: 2px solid;
    	border-bottom: 2px solid;
    	position: absolute;
    	z-index: 500;
    }
    
    #menu a, #menu h2
    {
    	display: block;
    	margin: 0;
    	padding: 2px 3px;
    }
    
    #menu h2
    {
    	font-size: 10px;
    	margin-left: 20px;
    	color: #000000;
    	background: #ffffff;
    	height: 16px;
    }
    
    #menu h2:hover
    {
    	background: #e6ffff;
    	cursor: pointer;
    }
    
    #menu a
    {
    	margin-left: 20px;
    	color: #000000;
    	background: #ffffff;
    	text-decoration: none;
    	padding-top: 3px;
    	padding-bottom: 5px;
    }
    
    #menu a:hover
    {
    	color: #000000;
    	background: #ffe8e8;
    
    }
    
    #menu li
    {
    	position: relative;
    }
    
    #menu img.arrow
    {
    	position: absolute;
    	left: 160px;
    	z-index: 500;
    }
    
    #menu img.menuSpacer
    {
    	position:absolute;
    	top: 2px;
    	left: 2px;
    	background-color: #f7e8e8;
    	z-index: 500;
    }
    
    div.icon
    {
    	height: 20px;
    	width: 20px;
    	float: left;
    	border-right: 1px solid black;
    	background-color: #f7e8e8;
    	padding: 0px 0px 0px 0px;
    	margin: 0px 0px 0px 0px;
    }
    
    #menu ul ul ul
    {
    	position: absolute;
    	top: 0;
    	left: 100%;
    	z-index: 500;
    }
    
    img.sep
    {
    	border: none;
    	height: 12px;
    	width: 100%;
    }
    
    
    div#menu ul ul,
    div#menu ul li:hover ul ul,
    div#menu ul ul li:hover ul ul
    {display: none;}
    
    div#menu ul li:hover ul,
    div#menu ul ul li:hover ul,
    div#menu ul ul ul li:hover ul
    {display: block;}
    /*---- End Of Menu CSS ----*/
    There is also a behaviour file for ie that can be obtained here

    No matter what I change / try the gap won't go away, this might be aparant by the number of zero margin/padding sets I've put in my CSS

    Can anyone help with this problem as I am at a loss and need the help of a higher being

    o btw in Firefox this gap doesn't exist and the menu looks fine.


    thanks

  • #2
    Regular Coder Pepe, the bull's Avatar
    Join Date
    Feb 2005
    Location
    Vancouver, WA
    Posts
    163
    Thanks
    1
    Thanked 16 Times in 16 Posts
    Code:
    #menu ul ul
    {
    	border: 1px solid black;
    	width: 180px;
    	border-right: 2px solid;
    	border-bottom: 2px solid;
    	position: absolute;
    	z-index: 500;
    	background-color: #ffffff;
    }
    I don't really know why this works, but it does.
    Pepe, the bull

  • #3
    New Coder
    Join Date
    Apr 2005
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Gr8 thanks Pepe, that fixes the problem.

    Would be interesting to know where this whitespace is coming from but that fix will do nicely.

    Thanks again!

  • #4
    New Coder
    Join Date
    Mar 2004
    Posts
    78
    Thanks
    0
    Thanked 0 Times in 0 Posts
    What about using a negative margin. Also might want to check out this article at positioniseverything.net
    -Simon


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •