All Posts by Email, Once a Week

Media Temple logo

CSS-Tricks is brought to you in part by Media Temple, the web hosting that we both use and recommend.

(solved) header screwed up in safari

  • # October 19, 2009 at 11:55 am


    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…

    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.

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed