Hello,
I am redesigning the website of a local business, (for fun, and practice. I am not affiliated in any way other than being a customer/admirer.)
I have made a pretty straightforward design and fleshed it out, it works great in Firefox, and IE 7 by my tests. The problem is I checked on my iPhone (to test safari) and the header is very botched.
The main navigation (gray background) has infiltrated further up into the header, and disobeyed the page-wrap width…
The page-wrap is specified at 940px, the nav’s ul element is specified to the same, but for some reason it has moved up and further into the header, ignoring the specified width.
Also, the callouts (2 large images underneath that, have stacked instead of floating next to each other. (the first is floated left, the second right, to get the spacing perfect.)
It’s currently just a mock up, so there are a lot of things missing, mainly that links go nowhere, and some things are not links yet (logo, and all the images.)
Here is the link to the test site…
http://dingledoodle.com/anvil/start.html
I plan to create a few more mock up pages, and then convert it into a magento site.
If you have any clue how to get this to line up in safari, please help.
EDIT: a fresh look solved this, I’ll detail the steps for anyone interested in the fix.
I had to float the main nav (last item in the container, left. I added overflow:hidden to the header. all good now.
