CSS Positioning

Hi, I am pretty new to css. I am toying with a responsive menu. It works perfectly well on the desktop. But on the iPad and iPhone, the div doesn’t slide down enough to cover the form when clicked upon a iconFont.
I am guessing this is a div positioning issue?
I need to find out which div and property steer the div postioning as I will have other forms with more formfields then the one I have toyed with.
I have created media queries for the iPad and iPhone
Please test this page on all three devices, desktop, iPad and iPhone.

This is the url to the demo page:

Hi,Welcome to Sitepoint :slight_smile:

This is pretty hard to debug because of the extra media queries and the icon fonts which won’t show (without downloading the whole shebang) when I try to set up a local test.

I have a feeling that the problem is the ‘auto’ absolute positioning you have used on the icons. The parent ul has text-align:center and that affects the position of auto positioned absolute elements as some browsers will set auto to the middle and some to the left. Therefore its always best to define co-ordinates for absolute elements where possible.

As a test try adding this CSS after al the mefia queries so that it over-rides the styles and see if it makes a difference. I can’t really test from this end so it wil be a matter of try it and see and then re-think if nothing has changed.

#expressmenu ul {text-align: left;}
a .cv_iconFont:before,
a .search_iconFont:before,
a .blog_iconFont:before,
a .logon_iconFont:before {left:20px}

I should point out that you have complicated things a little with your duplicated styles in your media queries which makes it hard to work out what has changed in each. The media queries should only contain the “over-rifdng CSS” and not contain duplicate css form the desktop styles. In that way you know that al rules in the media queries are over-rides and the ones to fiddle with.

It also means that you cut down on code bloat as you do not want to repeat any unnecessary styles if you can help it :slight_smile: