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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Full CSS Horizontal Menu - Extra space in IE

    Hello everyone,

    I'm finally getting into tableless CSS layouts, and I'm working on my first full CSS menu. One of the huge headaches has been browser compatibility. I'm aiming to have this function correctly on all browser/platform combinations, but I keep running into issues where something will be 1 pixel off in IE, and when I correct it in IE its 1 pixel off in Firefox, etc. Is that normal? Is it common to have several differents stylesheets for various browsers, or do I just need to write better CSS?

    Case in point, I have a horizontal menu with a "search" text input that is working great in Firefox, but there is a 2 pixel space under each menu item in IE:

    http://www.outshinehosting.com/ee/menu_search.html

    I can get rid of the 2 pixel space by setting a fixed height in #navcontainer ul, but that starts to create problems in Firefox. Am I taking the wrong approach to building this menu, or is there just something simple I'm missing?

    My markup below:

    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> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>CSS Menu</title> 
     
    <style> 
     
    html,body{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin: 0px;
    padding: 0px;
    }
     
    #navcontainer ul
    {
    background-color: #2378ad;
    padding: 5px 0;
    margin: 0;
    list-style-type: none;
    color: #FFF;
    width: 100%;
    text-align: center;
    }
    
    li {
    display: inline;
    padding: 4px 0;
    border-right: 1px solid #006192;
    border-left: 1px solid #3a91ca;
    } 
    
    li a
    {
    text-decoration: none;
    color: #FFF;
    padding: 5px 12px 5px 13px;
    font-weight: bold;
    }
     
    li a:hover
    {
    background-color: #7ccbf3;
    color: #00689c;
    }
     
    li a.current
    {
    background-color: #ffcd64;
    color: #00689c;
    padding: 5px 12px 5px 13px;
    font-weight: bold;
    }
    
    li.left {
    border-left: 0px;
    }
     
    li.right {
    border-right: 0px;
    }
    
    li.search{
    border-right: 0px;
    border-left: 0px;
    padding-right: 60px;
    width: 137px;
    height: 18px;
    background-image: url(http://www.outshinehosting.com/ee/images/searchbox_bg.png);
    background-repeat: no-repeat;
    background-position: left center;
    } 
    
    .searchbox{
    border: 0px;
    color: #777777;
    padding-left: 20px;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    font: 12px Arial, Helvetica, sans-serif;
    background: none;
    }
     
    </style> 
     
    </head> 
     
    <body> 
     
    <br><br> 
    
    <form> 
    
    <div id="navcontainer"> 
    	<ul id="navlist"><li class="search"><input type="text" class="searchbox" value="Search" name="search" /></li><li class="left"><a href="#">Option 1</a></li><li ><a href="#" class="current">Option 2</a></li><li ><a href="#">Option 3</a></li><li ><a href="#" >Option 4</a></li><li><a href="#">Option 5</a></li><li class="right"><a href="#">Option 6</a></li></ul>
    </div>
    
    </form> 
     
    <br><br> 
     
    </body> 
    </html>
    Thanks to anyone who is willing to help this CSS newbie! I'm trying hard not to use any tables, but all these browser compatibility issues are making it difficult!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello outshine81,
    I've never tried to put a form in the ul like that. If you could float your form to one side the menu is easy to fix. It would probably need to be in a fixed width container to work that way though and your demo isn't.
    This works, until you put the form back in...
    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> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS Menu</title>  
    <style type="text/css">
    html,body {
    	font: 12px Arial, Helvetica, sans-serif;
    background: #ccc;
    } 
    * {
    	margin: 0px;
    	padding: 0px;
    	border: none;
    }
    #navcontainer {
    	margin: 50px 0;
    }
    ul#navlist {
    	height: 25px;
    	background: #2378ad;
    	text-align: center;
    } 
    li {
    	display: inline;
    	border-right: 1px solid #006192;
    	border-left: 1px solid #3a91ca;
    }  
    li a {
    	height: 25px;
    	line-height: 25px;
    	padding: 5px 12px 5px 13px;
    	text-decoration: none;
    	font-weight: bold;
    }
    li a:hover {
    	background: #7ccbf3;
    	color: #00689c;
    } 
    li a.current {
    	background: #ffcd64;
    	color: #00689c;
    } 
    .left {
    	border-left: none;
    } 
    .right {
    	border-right: none;
    } 
    .search {
    	width: 137px;
    	padding-right: 60px;
    	border: none;
    	background: url(http://www.outshinehosting.com/ee/images/searchbox_bg.png) no-repeat left center;
    }  
    .searchbox {
    	color: #777777;
    	padding-left: 20px;
    	background: none;
    }
    </style>  
    </head>  
    <body>  
        <div id="navcontainer">
            <ul id="navlist">
                <li class="left"><a href="#">Option 1</a></li>
                <li ><a href="#" class="current">Option 2</a></li>
                <li ><a href="#">Option 3</a></li>
                <li ><a href="#" >Option 4</a></li>
                <li><a href="#">Option 5</a></li>
                <li class="right"><a href="#">Option 6</a></li>
            </ul>
        <!--end navcontainer--></div>
            	<li class="search"><input type="text" class="searchbox" value="Search" name="search" /></li>
    </body> 
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Excavator, thanks for the reply!

    I ended up getting the menu working by using a little CSS hack I found online. I'm placing # in front of class properties that I only want IE to read, so I changed #navcontainer ul to:

    Code:
    #navcontainer ul
    {
    background-color: #2378ad;
    padding: 5px 0;
    #padding: 3px 0;
    margin: 0;
    list-style-type: none;
    color: #FFF;
    width: 100%;
    text-align: center;
    }
    And that did the trick. I'd rather not use hacks like that, but at this point I just need to get it working! Thanks for taking the time to reply.


  •  

    Posting Permissions

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