The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Absolute Position Differences in iOS6 and iOS7

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #151666

    Hi everyone,

    I’m designing a responsive site ( and in the small-screen version, I’m absolutely positioning a banner (unfortunately I have no other way to manipulate the location).

    On iOS7 and all modern browsers, the banner pops in to place nicely using a top: 31% (see

    However, in iOS6, the banner appears half-way down the page (at the exact same pixel density and screen size – see

    I can’t figure out the differences between the page rendering of the two browsers.

    For reference, the CSS file is

    The specific style that I’m looking at is #outerWrap h1 .

    Again, the live address is .

    Any help would be appreciated!


    Did you ever figure this out?


    I should’ve kept a device on iOS6 for testing, so I’ll just have to guess at the problem. I’m betting that your hidden menu is pushing the banner down the page. Perhaps try removing it and seeing if the banner displays correctly.

    The problem might also stem from a few things:

    1) nesting your menu in an h2. This isn’t a good way to go. h2‘s aren’t really meant to serve as container elements (as section, article, nav, div, etc. do)

    2) prodigious use of !important. I would avoid !important as much as possible as it doesn’t make for easily maintainable or reuseable code, and it’s likely conflicting with other !important‘s and causing your problem.

    There is a lot of value in styling the page from small sizes up and avoiding styling via id’s with !important. It might help you avoid this problem in the future. Good luck.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.