FreewayTalk

22 replies to this thread. Most Recent

David Owen

6 Jan 2012, 7:13 pm

[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

www.ineedwebhosting.co.uk

Freeway Friendly Web Hosting, Domain Names, VPS and Dedicated Servers. (Create an account it’s Free!)


PrintlineAdvertising.co.uk

Print Design, Digital and Litho Printers, Promotional Merchandise and Corporate Gifts.

DeltaDave

6 Jan 2012, 11:17 pm

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

Glasgow, Scotland

iMac 27 5K El Cap and Pro Final

David Owen

7 Jan 2012, 9:19 am

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 :(

David

On 7 Jan 2012, at 00:17, “DeltaDave” <[email protected]> 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

www.ineedwebhosting.co.uk

Freeway Friendly Web Hosting, Domain Names, VPS and Dedicated Servers. (Create an account it’s Free!)


PrintlineAdvertising.co.uk

Print Design, Digital and Litho Printers, Promotional Merchandise and Corporate Gifts.

David Owen

9 Jan 2012, 10:50 am

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

www.ineedwebhosting.co.uk

Freeway Friendly Web Hosting, Domain Names, VPS and Dedicated Servers. (Create an account it’s Free!)


PrintlineAdvertising.co.uk

Print Design, Digital and Litho Printers, Promotional Merchandise and Corporate Gifts.

george

15 Jan 2012, 2:54 am

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.

David Owen

16 Jan 2012, 10:25 am

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.

www.ineedwebhosting.co.uk

Freeway Friendly Web Hosting, Domain Names, VPS and Dedicated Servers. (Create an account it’s Free!)


PrintlineAdvertising.co.uk

Print Design, Digital and Litho Printers, Promotional Merchandise and Corporate Gifts.

David Owen

16 Jan 2012, 4:44 pm

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

www.ineedwebhosting.co.uk

Freeway Friendly Web Hosting, Domain Names, VPS and Dedicated Servers. (Create an account it’s Free!)


PrintlineAdvertising.co.uk

Print Design, Digital and Litho Printers, Promotional Merchandise and Corporate Gifts.

george

16 Jan 2012, 5:44 pm

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

David Owen

17 Jan 2012, 10:53 am

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.

www.ineedwebhosting.co.uk

Freeway Friendly Web Hosting, Domain Names, VPS and Dedicated Servers. (Create an account it’s Free!)


PrintlineAdvertising.co.uk

Print Design, Digital and Litho Printers, Promotional Merchandise and Corporate Gifts.

george

17 Jan 2012, 5:14 pm

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!

David Owen

17 Jan 2012, 6:39 pm

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 protected]> 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!

www.ineedwebhosting.co.uk

Freeway Friendly Web Hosting, Domain Names, VPS and Dedicated Servers. (Create an account it’s Free!)


PrintlineAdvertising.co.uk

Print Design, Digital and Litho Printers, Promotional Merchandise and Corporate Gifts.

george

17 Jan 2012, 7:55 pm

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.

David Owen

17 Jan 2012, 8:17 pm

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 protected]> 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.

www.ineedwebhosting.co.uk

Freeway Friendly Web Hosting, Domain Names, VPS and Dedicated Servers. (Create an account it’s Free!)


PrintlineAdvertising.co.uk

Print Design, Digital and Litho Printers, Promotional Merchandise and Corporate Gifts.

george

18 Jan 2012, 2:47 am

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 +/-.

Joe Billings

18 Jan 2012, 8:33 am

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 +/-.

Joe Billings

Freeway & Exhibeo: Visual web design apps for Mac


http://www.softpress.com

george

18 Jan 2012, 11:39 pm

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.

David Owen

19 Jan 2012, 8:16 am

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.

www.ineedwebhosting.co.uk

Freeway Friendly Web Hosting, Domain Names, VPS and Dedicated Servers. (Create an account it’s Free!)


PrintlineAdvertising.co.uk

Print Design, Digital and Litho Printers, Promotional Merchandise and Corporate Gifts.

george

19 Jan 2012, 1:43 pm

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!

David Owen

19 Jan 2012, 3:29 pm

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?

www.ineedwebhosting.co.uk

Freeway Friendly Web Hosting, Domain Names, VPS and Dedicated Servers. (Create an account it’s Free!)


PrintlineAdvertising.co.uk

Print Design, Digital and Litho Printers, Promotional Merchandise and Corporate Gifts.

george

22 Jan 2012, 3:21 am

David,

In my case I can’ simply use background colors to mask the issue. I’m using background images that do not span the entire html element, thus a permanent line will be visible at the edges.

If Freeway is producing the same HTML (which I believe it is), then I must be doing something incorrect.

Is there a link to a discussion on how to create flexible background graphics properly? I must be doing something incorrectly with the float or clear or how I’m specifying the heights.

Thanks again!

DeltaDave

22 Jan 2012, 7:02 pm

I think that if we could see better how you are building this we may be able to offer an alternative. What about a sample FW file we can look at. You would need to include images etc.

David

Glasgow, Scotland

iMac 27 5K El Cap and Pro Final

Back to Top

David Owen

22 Jan 2012, 7:15 pm

I really don’t think you are doing anything incorrect. The effects are purely in some browsers when zooming. I suspect at certain zooms perhaps half pixels are creating this gap effect (I’m guessing here!)

Since raising this issue I have noticed other sites with gaps between background images seen on my iPad when zooming. Personally I’m not worrying about it anymore. And will consider the issue when building new sites.

David

On 22 Jan 2012, at 04:21, “george” <[email protected]> wrote:

then I must be doing something incorrect.

www.ineedwebhosting.co.uk

Freeway Friendly Web Hosting, Domain Names, VPS and Dedicated Servers. (Create an account it’s Free!)


PrintlineAdvertising.co.uk

Print Design, Digital and Litho Printers, Promotional Merchandise and Corporate Gifts.