once again, IE is proving to be the biggest pain in the world, on headset.no, we have a small blue search field, when you type for example “jabra” into it, it should generate a div that gives you suggestions underneath, this works perfectly in Chrome, Safari, opera and FF, but of course, IE has another idea of what …
via Css Website development » Search Results » ajax:
Javascript created div not reading CSS in IE
once again, IE is proving to be the biggest pain in the world, on headset.no, we have a small blue search field, when you type for example “jabra” into it, it should generate a div that gives you suggestions underneath, this works perfectly in Chrome, Safari, opera and FF, but of course, IE has another idea of what to do with it.
I use the CSS Browser Selector plugin to identify CSS between browsers in this site.
When I hit F12 on IE, it seems like there are a number of inline styles applied to the
style=”
z-index: 2;
position: absolute;
filter: ;
width: 130px;
display: none;
top: 193px;
left: 1px;”
getElementsByClassName=”function() …Which are not present in the sourcecode.
Could someone please take a look and try to tell me what’s wrong with this? I have depleted all my patience on this.
The JS:
var searchSuggestionInit = function()
if ($(‘searchField’))
$(‘searchField’).addClassName(‘quickSearch’);
$(‘searchField’).down(‘.srch-txt’).addClassName(‘text’);
var field = $(‘searchContainer’).down(‘.quickSearch’).down(‘input.text’);
if (!field.id)
field.id = ‘searchQuery’;
field.setAttribute(‘autocomplete’, ‘none’);
new Ajax.Autocompleter(field.id, ‘searchSuggestions’, Router.createUrl(‘searchSuggestions’, ‘index’),
);
}
Event.observe(window, ‘load’, searchSuggestionInit);And the CSS:
/************************************************** SEARCH SUGGESTIONS*/
div.autocomplete
position:absolute;
width:250px;
background-color:white;
border:1px solid #888;
margin:0;
padding:0;
z-index: 50000;
font-size: 0.85em;
overflow: hidden;
.ie .div.autocomplete
position:absolute;
width:250px;
background-color:white;
border:1px solid #888;
margin:0;
padding:0;
z-index: 50000;
font-size: 0.85em;
overflow: hidden;
div.autocomplete ul
list-style-type:none;
margin:0;
padding:0;
div.autocomplete ul li.selected background-color: #ffb;
div.autocomplete ul li
list-style-type:none;
display:block;
margin:0;
padding:2px;
cursor:pointer;
white-space: nowrap;
And some sourcecode.
form action=”controller=category” class=”Search” handle=$form
textfield type=”text” onblur=”if(this.value==”) this.value=”;” onfocus=”if(this.value==”) this.value=”;” class=”srch-txt” name=”q” id=”s” size=”16″
/form
loadJs form=true
literal
/literal
