Javascript created div not reading CSS in IE

Question

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

<div class="autocomplete" id="searchSuggestions" 

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.

<div id="search" title="Søk automatisk i databasen">
<div id="searchField">
{capture assign="searchUrl"}{categoryUrl data=$category}{/capture}
{form action="controller=category" class="Search" handle=$form}
<input type="hidden" name="id" value="1" />
{textfield type="text" onblur="if(this.value=='') this.value='';" onfocus="if(this.value=='') this.value='';" class="srch-txt" name="q" id="s" size="16"}
</div>
<button type="submit" class="m" id="searchsubmit">&nbsp;</button>{/form}
</div>


{loadJs form=true}
<div id="searchSuggestions" class="autocomplete" style="display: none;"></div>


{literal}
<script type="text/javascript">  
$j("#search").tooltip({ offset: [45, 200], effect: 'slide' });
</script>
{/literal} 

        <div class="clear"></div>
    </div>
</div>

Thanks very much :)

belugabob · Accepted Answer · 2010-08-27 09:03:43Z

1

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.

edited Aug 27, 2010 at 9:03

answered Aug 26, 2010 at 12:06

belugabob

4,47025 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Kyle Over a year ago

Thanks bob, there was an old call to a script that was no longer in use, I removed the call and now the generated div doesn't show up at all in IE8. We're no longer supporting older versions, fyi.

mplungjan Over a year ago

Shows in my IE8, but much lower than the input field - perhaps the top is relative to the input field, e.g. 198px under it?

Kyle Over a year ago

@mplungjan: Yes, this is what I need to do away with, the tpo 198px is an inline style that I have not defined anywhere, neither in sourcecode or javascript.

Pointy Over a year ago

Well something is adding inline styles - they're there when I look at the page in Chrome too.

Kyle Over a year ago

Seriously? What in the world could that be? Is there a way to trace it back? I'm not so hooked up on debugging JS.

|

Collectives™ on Stack Overflow

Javascript created div not reading CSS in IE

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related