- This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
Viewing 3 posts - 1 through 3 (of 3 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Hi everyone,
I’m designing a responsive site (http://www.kent.edu/cci/comm2/) 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 https://www.dropbox.com/s/5v2lpel389qm1qm/Screenshot%202013-09-30%2004.25.24.png)
However, in iOS6, the banner appears half-way down the page (at the exact same pixel density and screen size – see https://www.dropbox.com/s/bptsdzlwxptpt7k/Screenshot%202013-09-30%2004.24.47.png)
I can’t figure out the differences between the page rendering of the two browsers.
For reference, the CSS file is https://ucm.dreamhosters.com/comm/comm-homepage.css
The specific style that I’m looking at is #outerWrap h1 .
Again, the live address is http://www.kent.edu/cci/comm2/ .
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.