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 …

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.

loadJs form=true

literal

/literal

Thanks very much :)
…………………………………

This works in IE7, but not in IE8.
If you turn on script debugging by removing the check marks next to both ‘Disable script debugging’ option in – Tools | Internet Options | Advanced – you’ll see that there’s a script error at startup. Investigate this error, and you might find that the search box problem is due to something not being setup correctly when the page loads.

For more info: Javascript created div not reading CSS in IE

Css Website development » Search Results » ajax

Javascript created div not reading CSS in IE

Share this post:

Related Posts

Leave a Comment