[Pro] Text overlap on iPhone

I have discovered that when viewing one particular page of my website on my iPhone, the html boxes containing text are overlapping each other.

Viewing the page on line with Safari and with an IE7 render program shows the page rendered correctly!

Does anyone have any idea what is happening?

Help would be much appreciated.

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

A link to the page would help…

Post it here as http://wwwetc and it will be a clickable link.

If you also set your HTML code as More readable - that will help too.

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Have reset the HTML code to ‘More readable’ and re-made the page which has made no difference!

The link is: http://www.cinema-organs.org.uk/NEWS/news.html

Hope this helps.

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

The only difference will be to those who try to help you. Browsers
don’t care (much) about whitespace in code. People find it very hard
to read code without some structure to make the relationships easier
to see.

Walter

On Jan 12, 2010, at 9:12 AM, Cos wrote:

Have reset the HTML code to ‘More readable’ and re-made the page
which has made no difference!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Try drawing a single html box the size of your right hand column. Draw
it on the pasteboard next to the page so you can do the next trick.

One at a time, click once on each element in the right column so it’s
selected (handles showing on all sides/corners) and cut to the
clipboard. Then double-click inside your new HTML box so you see a
flashing text cursor in it and paste. Repeat until all elements have
been moved into this new box. Finally, set the new box to have no
height (click on the icon to the left of the height box in the
Inspector) and move it into position on your page. If your boxes crash
into each other vertically, select each one in turn and apply some
bottom margin. You might also go through all of these inline boxes and
remove their height as well. The final result will scale the boxes
along with the text size.

iPhone does some clever things to get the text size up above the
“where’s my glasses” zone, and you’re seeing the dark side of that
noble effort.

Walter

On Jan 12, 2010, at 9:12 AM, Cos wrote:

Have reset the HTML code to ‘More readable’ and re-made the page
which has made no difference!

The link is: http://www.cinema-organs.org.uk/NEWS/news.html

Hope this helps.

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

To see this on Safari on your Mac choose View>Zoom Text Only and then increase the text size (cmd+) by a couple of sizes.

And then redo your page as per Walters suggestion - essentially a Box Model (Inline elements)

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Guys,
Thanks for the advice which I am trying to implement.

What I would like to know, is what is causing this problem on this page as I don’t get it on other pages?

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

It is your page construction - layered HTML boxes containing quite a lot of text. As the text size increases the containers and overlap the other HTML containers.

If you leave a bit more space between them it will accommodate a bit of text growth.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thank you both for your help and feedback. I am much obliged.

Regards

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options