iPad Safari bug clear needed after floated list

So I’ve been working on a website for a client and in addition to testing on Internet Explorer and Firefox, I also test it on an iPad.
The client’s website is implemented with WordPress and I decided to do a ‘child theme’ (a theme that leverages another theme), and my child theme was leveraging the included TwentyEleven theme because the latter offers a lot of nice features and I figure it’s been well beaten over and fixed up over time. It’s been much more a pain than I would have thought to adapt TwentyEleven to my needs (by having to override things in my child theme) but I digress.

What really ate up a huge amount of time trying to fix was the site not displaying on the iPad the way in which it showed everywhere else. The top menu and header were resized and background cut off about 2/3rds across. Looooong story short, I discovered that a floated unordered list (or ul) widely used (including in TwentyEleven) to do the top menu bar was the culprit, or rather the containing div element. I eventually decided to add an empty clearing div before closing the container div, and yup, that fixed it!

So the TwentyEleven theme css gives the id “access” for the menu bar. I had already defined the class “clear” simply as follows:

.clear { clear: both; }

And then I added this into the header:

<div class="clear"></div>
</div><!-- #access -->

Worked great! Hope it helps someone out there. 🙂

Leave a Comment