android and ie7 css positioning issue

Question

I've just launched a new version of our site and I'm trying to iron out a few issues which I wasn't able to test before because I can't emulate an android phone on my localhost (I'm sure it's possible - time didn't allow the required reading)

Anyway, I tested on ie7-9, ff, opera, safari, chrome, everything you can think of an mostly everything is just fine apart from:

on android phone: I have a horizontal navigation bar between the header and the content, the last item on the menu has shifted to the next line. This could be just a pixel, but why! why! why! boohoo :(

Then on IE7, on any page which has lots of products (like this one: http://www.traditionalirishgifts.com/guinness-merchandise ) the filter options and the paging navigation are meant to be on one line, like they are on every other browser.

any css genius's out there fancy helping me out?

Answer 1

1. It depends on the screen resolution of the phone. If you tried it on a phone with a wider screen in pixels, you would have no problem.

2. I see one IE7 problem:

div#dropMenu no specified padding

IE7 has a default padding unlike any modern browser.

Add padding: 0 and you will have no problems.