position of element screwed in Chrome - css

Question

For once, ff and ie comply. But in this instance chrome doesnt like it.
We have a field, with autosuggest attached, that appears after x amount of letters. Cannot really put a demo on fiddle, as its db driven.
However here is the css
.suggestionsBox {
z-index: 2;
position: absolute;
margin: 70px 0px 0px 146px;
width: 207px;
background-color: #ffffff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border: 1px solid #cccccc;
color: #000;
box-shadow:-1px -1px 7px #ccc, 1px 1px 7px #ccc;
-webkit-box-shadow:-1px -1px 7px #ccc, 1px 1px 7px #ccc;
-moz-box-shadow:-1px -1px 7px #ccc, 1px 1px 7px #ccc;
}
.suggestionList {
margin: 0px;
padding: 0px;
}
.suggestionList li {
list-style: none;
margin: 3px 3px 3px 3px;
padding: 3px;
cursor: pointer;
}
.suggestionList li:hover {
background-color: #ffffcc;
}
And screenpic of ff , ie chrome appearance. Any suggestions, I am usually bloody good with css. But this has me stumped.
As requested here is html for this element:
<div class="field"><label for="propertysuburb">Suburb </label> <input name="propertysuburb" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" size="50" type="text" class="medium" /></div>
<div class="suggestionsBox" id="suggestions" style="display: none;">
<div class="suggestionList" id="autoSuggestionsList">
</div>
</div>

Answer 1

What does the margin for the .suggestionsBox do? As an absolutely positioned element, I believe it will just ignore that.
The issue seems to be that you're not setting any top / bottom / left / right values to your absolutely positioned .suggestionsBox div; this leaves it up to the browser to determine where to put it.
Make sure your .field class has "position: relative;" on it, then add a "top: 20px;" and "right: 0px;" to your .suggestionsBox styles. Just adjust the top / right values if it doesn't line up correctly.

Answer 2

First off, a nitpick.
When using CSS3 with vendor prefixes, ALWAYS use the non-prefixed version last, otherwise you may (potentially) break something:
-webkit-box-shadow:-1px -1px 7px #ccc, 1px 1px 7px #ccc;
-moz-box-shadow:-1px -1px 7px #ccc, 1px 1px 7px #ccc;
box-shadow:-1px -1px 7px #ccc, 1px 1px 7px #ccc;
As for your problem: I can't see the CSS for the .field div, but I assume it has a positioning context set as well (probably relative), otherwise the z-index on suggestionBox wouldn't work, and judging by the screenshots, it does. Now, what you haven't set is the actual position. The absolute positioning context should place the box in the top left corner of its parent (obviously, that's why the parent needs a positioning context too). If you need it to start at the parent's bottom, you also need to add top: 100%; to your .suggestionBox properties.
I can't really see anything else that might be wrong here.

Answer 3

To debug something like this, I would slightly modify your back-end code so that the suggestion list remains fixed and open, regardless of typed input. Load the page, then open the developer pane in Chrome, go to the Elements tab, and use the "magnifying glass" icon to inspect the misplaced elements. Play with the styles panel to discover which attributes are causing the incorrect offset (don't forget to try things like absolute vs. fixed position of the element or its parents). Once you have an idea of where things are going wrong, see if the "fix" is benign in other browsers.

Answer 4

This looks like it's most-likely a JavaScript issue. The suggestion list is most likely placed programmatically (given the position: absolute it seems certain), so I'd look to that code.
If it's not a JavaScript issue, the other possibility is that the "position parent" of the absolute element differs. Your CSS shows that the suggestion box is positioned absolutely, but we cannot see from your posted code what establishes the baseline for the position (how its nearest-positioned ancestor is defined).
One thing that can sometimes help with absolute positioning is to use the top style rather than the margin-top to move your absolutely-positioned element down.

Answer 5

Thanks to #mingos and #russelluresti
We have this fixed now:
css:
.suggestionsBox {
z-index: 2;
top: 59px;
right: 524px;
position: absolute;
margin: 69px 0px 0px 146px;
width: 207px;
background-color: #ffffff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border: 1px solid #cccccc;
color: #000;
-webkit-box-shadow:-1px -1px 7px #ccc, 1px 1px 7px #ccc;
-moz-box-shadow:-1px -1px 7px #ccc, 1px 1px 7px #ccc;
box-shadow:-1px -1px 7px #ccc, 1px 1px 7px #ccc;
}
and field :
.form .field { width: 50%; float: left; position:relative;}
Cheers Guys, perfect. I havent got Safari, but it works in the 3 I was interested in, and seems to be valid code now, which supports proper rules. Many thanks