Width issue in IE9

I have a header, containing a logo, navigation and search box. It is working fine in all modern browsers (FF, Chrome, Safari and IE8). It is displayed the way I expected and even in IE 7 and 6 it is shows right, but in IE9 the search box is pushed downwards. It is if there is less space available. Here is the CSS:


/* Reset, Html & Body */
html,body,address,blockquote,div,form,fieldset,caption,h1,h2,h3,h4,h5,h6,hr,ul,ol,ul,li,table,tr,td,th,p,img {
	margin: 0;
	padding: 0;
}

ul, ol, li {
	list-style-type: none; 	
}

img,fieldset {
	border: none;
}

html, body {
	height: 100%;
}

body {
	overflow: auto;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;
	line-height: 130%;
	background: #CCC;
}

/* Content Wrapper */
#wrapper {
	width: 1049px;
	min-height: 100%;
	margin: 0 auto;
	position: relative;
	font-size: .812em;
	z-index: 6;
}

* html #wrapper {
	height: 100%	
}

/* Header Content */
#header {
	overflow: hidden;
}

/* Logo Content */
#header .logo {
	float: left;
}

#header .logo a {
	width: 225px;
	height: 125px;
	margin-bottom: 20px;
	display: block;
	background: url(../images/graphics/logo.png);
	text-decoration: none;
	text-indent: -999em;
}	

/* Menu Content */
#menu {
	margin: 80px 0 0 10px;
	float: left;
	display: inline;
	overflow: hidden;
	z-index: 6;
}

#menu li {
	float: left;
	position: relative;
	margin-right: 10px;
	display: inline;
}

#menu li.last {
	margin-right: 0	
}

#menu a {
	height: 40px;
	line-height: 40px;
	padding: 0 20px;
	display: block;
	background: url(../images/graphics/libg.png) repeat-x;
	color: #FFF;
	font-size: 130%;
	text-decoration: none;
}

#menu a:active,
#menu a:focus,
#menu a:hover{
	background-position: 0 -40px;
}

#menu a.current {
	background-position: 0 -80px;	
}

/* Search Box */
#search {
	height: 40px;
	margin-top: 80px;
	background: url(../images/graphics/search.png);
	float: right;
}

#search .search-inner{
	padding: 6px 5px;
}

#search .search-input {
	width: 230px;
	height: 23px;
	padding: 1px;
	background: none;
	border: #36A747 solid 1px;
	color: #FFF;
}

#search .search-button {
	width: 34px;
	height: 27px;
	background: url(../images/graphics/btnGo.png);
	text-indent: -999em;
	border: 0;
}



<!-- Start Header Content -->
<div id="header">

<div class="logo">
<a href="#" title="">Greece Activities Homepage</a>
</div>

<div id="menu">
<ul>
<li><a href="#" title="Greece activities homepage" class="current">Home</a></li>
<li><a href="#" title="Activities in the Peloponnese">Activities</a></li>
<li><a href="#" title="About the Peloponnese">Peloponnese</a></li>
<li><a href="#" title="Greece activities blog">Blog</a></li>
<li class="last"><a href="#" title="Greece activities contact page">Contact</a></li>
</ul>
</div>

<div id="search">
<div class="search-inner">
<form action="#" method="get" name="searchForm">
<input name="txtSearch" type="text" class="search-input" />
<input name="search_button" type="submit" value="search" class="search-button" />
</form>
</div>
</div>

</div>
<!-- End Header Content -->

I have tried to float the search box left as well but that only makes my suspicion bigger, that there is a width difference between IE9 and the other browsers because in that case the search div is pushed left under the logo where in all other browsers it nest against the menu div

Is this a known issue since IE 9, since it is the Beta version or is it something I’m doing wrong.

Thank you in advance

Is this a known issue since IE 9, since it is the Beta version or is it something I’m doing wrong.

Hi, I would not be to concerned about it right now nor would I make any attempt to fix it for a beta version. IE8 had many problems too in it’s beta state which were corrected before the final release.

Thanks for the reply Rayzur. That is quite a relieve. Those things makes you wonder :scratch:. Specially since it is working fine in trouble child 6 For demonstration purpose, I have it temporary solved though, by giving the <a’s> 1px less padding on each side, which can be easily fixed down the line. Thank you again :tup:

that there is a width difference between IE9 and the other browsers because in that case the search div is pushed left under the logo where in all other browsers it nest against the menu div
Hi don,
I don’t have IE9 so I can’t see what your code was doing to it other than what you explained. It very well may be that IE9 could have been rendering the font slightly bolder on your menu items. That could have caused a width difference.

The layout is pretty fragile to begin with and all it takes is one text zoom to drop the search box down in all other browsers. In doing that the search box drops down 80px below the menu due to it’s top margin. The menu has that same top margin also as you know. If nothing else is going above the menu and search box I would just use a 80px top padding on the header and then pull the logo up with a negative top margin. At least your search box would just drop right below the menu then. The only real fix for that is to move it to the top right of the header but I don’t think that is what you are after.

It is always best to set haslayout for IE6/7 on any element that contains floats, that is your header div. The overflow:hidden is actually taking care of IE7 but IE6 needs haslayout too. Here is where some bugs start coming into play though. IE6/7 also ignore the bottom margin on a float unless there is a cleared element after it, that bottom margin was on your .logo anchor. You were not seeing that since there was no BG color on the header to show what was going on. The margin can easily be changed to a bottom padding on the logo div though, it will give the same effect in this case.

I was also able to eliminate the div around the menu and just style the UL, likewise I was able to remove the inner padding div that was nested in your search div. Your inputs needed to be nested in a block element so that’s really where the div got moved to.

IE8 was also throwing off the vertical alignment of the inputs, that was fixed with inline-block and v-a middle.

Here is your code with all those things I mentioned being corrected and some BG colors to show what is going on. The CSS is commented with notes and some unnecessary rules were commented out.

Hope that helps, I am curious to see how IE9 handles it now. :wink:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Page</title>

<style type="text/css">
/* Resets */
html,body,address,blockquote,div,form,fieldset,caption,
h1,h2,h3,h4,h5,h6,hr,ul,ol,ul,li,table,tr,td,th,p,img {
    margin: 0;
    padding: 0;
}

ul, ol, li {
    list-style-type: none;  
}
 
img,fieldset {
    border: none;
}
 
html, body {
    height: 100&#37;;
}
 
body {
    overflow: auto;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 100%;
    line-height: 130%;
    background: #CCC;
}
 
/* Content Wrapper */
#wrapper {
    width: 1049px;
    min-height: 100%;
    margin: 0 auto;
    position: relative;
    font-size: .812em;
    z-index: 6;
}
 
* html #wrapper {
    height: 100%   
}
 
/* Header Content */
#header {
    overflow: hidden;/*IE7 haslayout and contain floats*/
    padding-top:80px;/*replace top margin on ul and search floats*/
    background: #777;
}
* html #header {
    width:100%;/*IE6 haslayout (contain floats)*/    
    padding:0;
    border-top:80px solid #777;/*(padding triggers IE6 bug, use border instead)*/
} 
/* Logo Content */
#header .logo {
    float: left;
    margin:-80px 10px 0 0;
    position:relative;/*for IE6*/
    padding-bottom:20px; /*fix IE 6/7 float bug*/
}
 
#header .logo a {
    width: 225px;
    height: 125px;
    /*margin-bottom: 20px; move to .logo bottom padding*/
    display: block;
    background:red url(../images/graphics/logo.png);
    text-decoration: none;
    text-indent: -999em;
}   
 
/* Menu Content */
#menu {
    /*margin: 80px 0 0 10px; move 10px right to .logo div*/
    float: left;
    /*display: inline;*/
    overflow: hidden;
    /*z-index: 6; does not work without positioning*/
}
 
#menu li {
    float: left;
    /*position: relative;*/
    margin-right: 10px;
    /*display: inline;*/
}
 
#menu li.last {
    margin-right: 0; 
}
 
#menu a {
    float: left; /*for IE6/7*/
    height: 40px;
    padding: 0 20px;
    /*display: block; (the float makes a block)*/
    background:#000 url(../images/graphics/libg.png) repeat-x;
    color: #FFF;
    font: 130%/40px arial;
    text-decoration: none;
}
 
#menu a:active,
#menu a:focus,
#menu a:hover {
    background-position: 0 -40px;
}
 
#menu a.current {
    background-position: 0 -80px;   
}
 
/* Search Box */
#search {
    height: 40px;
    /*margin-top: 80px;*/
    background: url(../images/graphics/search.png);
    float: right;
}
 
#search form { /* was #search .search-inner (no need for that extra wrapping div)*/
    padding: 6px 5px;
    background: blue;
}
#search .search-input, /*line em up vertically with inline-block*/
#search .search-button {
    display:inline-block;
    vertical-align:middle;
} 
#search .search-input {
    width: 225px;/*230px;*/
    height: 23px;
    padding: 1px;
    background: none;
    border: #36A747 solid 1px;
    color: #FFF;
}
 
#search .search-button {
    width: 34px;
    height: 27px;
    background:red url(../images/graphics/btnGo.png);
    text-transform: capitalize;/*force text-indent to work in IE6/7*/
    text-indent:-999em;
    border: 0;
}
</style>

</head>
<body>

<div id="wrapper">
    
    <div id="header">
        <div class="logo">
            <a href="#" title="">Greece Activities Homepage</a>
        </div>             
        <ul id="menu">
            <li><a href="#" title="Greece activities homepage" class="current">Home</a></li>
            <li><a href="#" title="Activities in the Peloponnese">Activities</a></li>
            <li><a href="#" title="About the Peloponnese">Peloponnese</a></li>
            <li><a href="#" title="Greece activities blog">Blog</a></li>
            <li class="last"><a href="#" title="Greece activities contact page">Contact</a></li>
        </ul>     
        <div id="search">
            <form action="#" method="get" name="searchForm">
                <div>
                    <input name="txtSearch" type="text" class="search-input">
                    <input name="search_button" type="submit" value="search" class="search-button">
                </div>
            </form>
        </div>
    </div> 

</div>

</body>
</html>

Hi Ray,

Thank you so much for this very clear explanation :tup:. It’s working really great. Because of the changes IE 9 is not pushing the search div down any longer. There is still a width difference compared to all other browsers, but like you said in post #2 I’m not gonna do anything about that right now.

Thank you again