Yes, another stupid IE6 problem. Unfortunately I cannot turn a blind-eye to this one. The input button is not showing up in IE6 but is working in all other browsers and the layout is breaking as well. To see the problem online, please visit the website. Again, I am only seeing the problem in IE6. As it's loading, it's inline; but when the page is done loading, it breaks. On the homepage it seems to be working fine... Any help would be great!
Here is the code for the search field:
<li class="inputSearch">
<input type="text" id="search" runat="server" title="search" value="search" class="fieldSearch" onfocus="Clear()" onkeydown="testEnterKey(event);" />
<div class="buttonSearch">
<input type="image" src="media/images/layout/button-search.png" name="btnSearch" id="btnSearch" onclick="javascript:return SubmitSearch();" />
</div>
</li>
Here is the CSS affiliated with these fields:
.inputSearch {
background: transparent url('../../media/images/layout/bg-search.png') no-repeat top left;
width: 99px;
height: 27px;
color: #000;
font-size: 12px;
padding: 6px 0px 7px 10px;
position: relative;
left: 0px;
display: block;
}
.fieldSearch {
border: none;
color: #000;
width: 85px;
}
.buttonSearch {
position: relative;
display: inline;
left: 0px;
top: 9px;
}
.navspace {
margin: 0 5px 0 5px;
}
The following is also applied from a special ie.css
stylesheet:
#topnav ul li.inputSearch {
width: 109px;
float: left;
top: -4px;
padding-bottom: 0;
padding-top: 5px;
}
alright i think got it all fixed now...
the search box was breaking due to using 'jquery.pngFix.js'. tweaked the code to not apply transparency to the search box background alone - and shazaam it's displaying inline.