Home/ Questions/Q 9065257
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T16:27:23+00:00

The web site for makepp has a simple 3-pane layout with a header and

  • 0

The web site for makepp has a simple 3-pane layout with a header and a narrow navigation, which usually floats left (but can be floated right by clicking on a ↔ button in its 1st <li>, or hidden with × to accomodate narrow screens):

+------------------------------+
+ div id="_head"               |
+ width: 100%                  |
+-------------+----------------+
+ ul          | div id="_main" |
+ width: 10em | width: auto    |
+-------------+----------------+
+ clear: both                  |
+------------------------------+

This page validates (except for some playing around with schema.org). All browsers display it correctly, except for iPhone/Pad. There I get tiny writing and a useless white band on the right (possibly as wide as the ul???).

Now I found a few people stumbling over this iPhone-bug, with solutions like min-width 100%, which doesn’t seem to work, or some apple-specific meta-headers, which is grotesque – as ridiculous as designing the web for IE6…

In an Apple store I found that safari on MacOS also suffers from this, but is nice enough to put the white band outside of the window – you have to scroll sideways to see it. I managed to download firebug, but somehow it’s not aware of this white area, which doesn’t seem to belong to any DOM-part.

I since also found the same to be true of Android: if I scroll right, I get this empty area. And (only now?) Chromium 20 does too. This means I can debug locally, so I put a red background on each of the 4 elements in my sketch: none reached out into the white band.

But if I add html{background-color:red;width:100%;min-width:100%;max-width:100%;} that’s the one, the band is red, the width is ignored.

So, what’s the clean solution to getting this page right everywhere?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Ok, I was looking in the wrong place. The side-by-side _main and ul, which can float left or right or be closed by buttons, was hard to get right. I somehow assumed that was the culprit.

    But now I found a completely different problem: The tabs in the header are css sprites, and iPhone/iPad have a rect clipping bug. They get it right optically, but behind the scenes they still use the unclipped image for calculating the overall <html>-size. And since my combined sprites were wider than the part that ever gets displayed flush right, there was a phantom sticking out. I’ve rearranged the sprites in two rows and now it’s fine!

    (Webkit is one more site that requires registering for taking the time to explain their bugs – tiresome! If anyone wants to pick this up from here, it can be reproduced by downloading and installing makepp upto 2.0.98.2.)

    • 0