Hello all,
I have this strange bug with a site I made.
The AjaxSearch bar is pushed down about 15 pixels in Chrome and Safari.
IE6, IE8, Firefox and opera look fine....
Here is the code:
<div id="container">
<div id="header">
<div id="header_nav">
<div id="header_nav_left">
</div>
<!-- End #header_nav_left -->
<div id="header_nav_middle">
<a href="nederlands/bedrijf/contact.html" class="contact_header">Contact</a>
<div id="search">
[!AjaxSearch? &ajaxSearch=`0` &AS_landing=`106` &tplAjaxResult=`zoek_resultaten` &breadcrumbs=`1` !]
</div>
</div>
<!-- End #header_nav_middle -->
</div>
<!-- End #header_nav -->
.... more code
The div #header_nav_left is used for some background image...
Positioning is relative and I only added some margin-top to the div #search.
here some of the relative css:
#container {
position: relative;
width: 920px;
margin: 0 auto 0 auto;
padding: 0px 0px 20px 20px;
background: transparent url('images/site/container_bg.png') repeat-y;
}
#header #header_nav #header_nav_left {
float: left;
background: transparent url('images/site/header_nav_left_bg.png') no-repeat;
height: 49px;
width: 22px;
}
#header #header_nav #header_nav_middle {
background-color: transparent;
background-image: url('images/site/header_nav_bg.png');
background-repeat: no-repeat;
height: 49px;
float: left;
width: 400px;
}
#header #header_nav #search {
float: left;
height: 30px;
margin: 10px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 220px;
}
#header #header_nav #search input {
padding: 3px 5px 2px 5px;
border: 1px solid #d0d0d0;
display: inline;
}
This is how it should look (firefox):
This is the problem in Chrome:
An the same in Safari:
The chrome (firebug-like) inspector shows this:
So the the #search div is positioned correctly...
But as you can see here
the search fields are pushed down, but why?
Can anybody help?
☆ A M B ☆