Small CSS problem in IE7

Question

Hi,

I have a small css problem that i can't seem to find a solution for. I have 2 problems:

url to site: http://www.umono.nl/test/

1. The OL in the red box "Zoek en boek" is wrong in IE7
2. The css popup menu in the header "home, alle steden, etc.." is not aligned right in IE7.

Can somebody please help me out?

Thx,

Kevin,

Answer 1

Oddly, I would actually say that IE is acting the most correctly in this situation.

Basically that technique of layout out form elements in the red box is a bit dodgy. Honestly, I think that's what tables are designed for (and it is tabular data):

<table id="zoek">
<tr>
  <th>Land:</th>
  <td><select>...</select></td>
</tr>
<tr>
  <th>Plaats:</th>
  <td><select>...</select></td>
</tr>
</table>

with:

#zoek th { font-weight: bold; text-align: left; }
#zoek td { text-align: right; }

Your CSS will be so much simpler (and I'm going to roll my eyes and shake my head in advance at any anti-table zealots in advance).

If you don't want to do that (for whatever reason), consider this as an arguably more robust technique:

<ul id="zoek">
  <li><div class="label">Land:</div><div class="select"><select>...</select></li>
  <li><div class="label">Price:</div><div class="select"><select>...</select></li>
</ul>

with:

#zoek li { overflow:hidden; }
#zoek div.label { float:left; }
#zoek div.select { float: right; }

Alternatively you can dispense with the list entirely and just nest some divs.