Cross Browser positioning issue with Chrome and Firefox

Question

I was hoping someone could help me figure out what to do about a browser inconsistency issue between Safari/Chrome and Firefox.

Here's a screenshot (the one on the left is chrome/right is Firefox): http://drp.ly/QVv2T

Here's the structure: http://drp.ly/QW47y

The css:

inside-wrapper {
    position:relative;
    min-height:320px;
    font-family:Arial, Helvetica, Geneva, sans-serif;
    width:785px;
    margin-right:auto;
    margin-left:auto;
}

select p a {
    display:block;
    clear:both;
    margin:0;
    padding:7px 0 6px 10px;
}

select ul {
    position:absolute;
    top:162px;
    left:1px;
    width:396px;
}

Thanks in advance for the help and let me know if I can post more info.

Answer 1

You didn't mention it, so I'll ask: Are you using a CSS reset?

Answer 2

Based on your CSS I noticed you put a <ul> inside a <select> tag. That's not a valid combination.

Answer 3

Sorry to those who took the time to look this over - I realize I was very vague and didn't provide nearly enough information.

I was able to find a fix. The problem was the main div that encompassed all of this needed to be set to position:relative and I instead had the parent of the whole thing set to relative.

Thanks everyone for the help!