[PRO] Horizontal lines/gaps on iOS Safari between inline divs

Has anyone noticed horizontal lines appearing on web pages viewed on iOS devices?

If you’ve got an iPad have a look here http://www.printlineadvertising.co.uk/

Towards the footer lines appear where divs but up to each other as part on an inline box model layout. There is no problems with desktop browsers.

Anyone know why?

This issue is niggling me.

David


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

I did wonder if it was to do with the -20px top margin on the footer but at different scaling it comes and goes?

Tricky one!

David


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

I do wonder if this is a general issue or something I’ve done to create it. Been trying to find examples from other sites not found one yet :frowning:

David

On 7 Jan 2012, at 00:17, “DeltaDave” email@hidden wrote:

I did wonder if it was to do with the -20px top margin on the footer but at different scaling it comes and goes?

Tricky one!

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

David,

After a bit if testing it looks like a iOS Safari issue. You’ve just got the check what background colours are showing and make sure forground backgrounds colours match any divs gaps creating is iOS Safari are covering them.

Just something else on the list to watch for as a web designer.

David

On 7 Jan 2012, at 00:17, DeltaDave wrote:

I did wonder if it was to do with the -20px top margin on the footer but at different scaling it comes and goes?

Tricky one!

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

I’m having the same issue, although it’s not just iOS. If you grow/shrink the page in any browser besides Safari it shows up.


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

Have you got a URL to look at?

David

On 15 Jan 2012, at 03:54, george wrote:

I’m having the same issue, although it’s not just iOS. If you grow/shrink the page in any browser besides Safari it shows up.


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

Sure.

Thanks


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

I can’t see any white lines between graphics. But the layout does break up if you re-size only the text up.

David

On 16 Jan 2012, at 15:59, george wrote:

Sure.

http://weddings.storymixmedia.com

Thanks


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

Yes, that’s exactly what I’m talking about.


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

Have to tried adding the relative page layout action? This is supposed to help with this issue.

The only other way is to invest some time creating flexible inline layouts that can cope with differing font sizes.

David

On 16 Jan 2012, at 18:44, george wrote:

Yes, that’s exactly what I’m talking about.


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

I have built my pages as flexible inline layouts already. Perhaps that’s where I’ve gone wrong.

I’ll take a look at the relative page layout action.

I can’t be the only one having this issue. There must be some discussion on how to slice graphics in photoshop and use them in a flexible manner.

Thanks!


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

Part of the issue is you really have to put your thinking cap on and try to cover the issue of divs stretching down with content growing. You can’t just put a pixel perfect sliced background image in to a HTML box. You have to consider repeating patterns and background colours to make it all work together.

Luckily most moderns browsers grow images and text when they zoom as a default setting so to many there won’t be an issue.

David

On 17 Jan 2012, at 18:14, “george” email@hidden wrote:

I have built my pages as flexible inline layouts already. Perhaps that’s where I’ve gone wrong.

I’ll take a look at the relative page layout action.

I can’t be the only one having this issue. There must be some discussion on how to slice graphics in photoshop and use them in a flexible manner.

Thanks!


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

Yep. I have done that. The problem I’m seeing is when you grow/shrink the text size. Then the lines/spaces start to appear.


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

Where are are the spaces? Do you mean in the image areas. I did not see any.

David

On 17 Jan 2012, at 20:55, “george” email@hidden wrote:

Yep. I have done that. The problem I’m seeing is when you grow/shrink the text size. Then the lines/spaces start to appear.


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

Yes. The main background box is made up of three html elements as well as the white badge, Get Started button, and turquoise content box too.

Everything looks ok until you start enlarging / shrinking the text via cmd +/-.


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

What browser are you using? I’m not seeing that in Safari 5.1.2.

Joe

On 18 Jan 2012, at 03:47, george wrote:

Yes. The main background box is made up of three html elements as well as the white badge, Get Started button, and turquoise content box too.

Everything looks ok until you start enlarging / shrinking the text via cmd +/-.


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

It’s more noticeable in Firefox 9 and especially on the iPad. iPhone and Safari are ok (not perfect).

You need to enlarge/shrink the text a few times to really see it in a browser.

Zooming in on an iPad is the worst condition.


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

I can see some white lines appearing between background images on Firefox and iPad. I don’t think there is a lot you can do about this. The conclusion I came to its just part of the rendering process in the browser when zooming.

One fix is to make sure there is a background colour the same (or similar) to the background image. Then you won’t see white gaps but your background colour. This won’t always work if you’re using transparent items in Freeway.

David Owen { Freeway Friendly Web hosting and Domains }

http://www.ineedwebhosting.co.uk | http://www.PrintlineAdvertising.co.uk

On 19 Jan 2012, at 00:39, george wrote:

It’s more noticeable in Firefox 9 and especially on the iPad. iPhone and Safari are ok (not perfect).

You need to enlarge/shrink the text a few times to really see it in a browser.

Zooming in on an iPad is the worst condition.


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

I really can’t believe that’s the case. Or if it is, I should be doing it differently. I don’t see this happening on other sites so there must be a way to do it properly.

Why would this be specific to Freeway?

BTW, thanks for all the help David!


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

It’s not specific to Freeway. Freeway produces HTML code same as used in any other site. It’s more a method of working. Many sites are hand coded and may be able to cope better with this issue along the way as a consequence. Freeway does produce an abundance on divs to keep the WYSIWYG method going, whereas a hand codes site might be uses a lot fewer divs and therefore the effect of misaligned background images on zoom less noticeable.

The effect can be fixed but using background colours it you think its work the extra effort.

Think of it this way, a good designed web site will look a roughly similar in design to the original if images are turned off. e.g. background colours replace what were background images. If you turn off images and all you see is white text on a white background, you know you’re going wrong and should re-think. If a brown background image is replaced with a similar brown background colour then all is well. This method of working and checking will fix the white line issue.

Either way, it’s a browser issue not a Freeway issue. Just another thing a web designer has to contend with to make a good site.

David

On 19 Jan 2012, at 14:43, george wrote:

Why would this be specific to Freeway?


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