G'day sitespinner gurus,

Haven't posted in ages but am still using sitespinner (latest version) and have recently published my own site www.chris-scott.info

The site renders perfectly in all windows and mac browsers, however on my iPhone the individual graphical elements within the iframe are separated by distinct white lines, as if the individual pieces don't align correctly. If the user zooms in then the pieces align more correctly but some separation lines are still evident... Hmm. Curious.

Might anyone have an idea why this is happening? Can I correct it? I've not seen another site do this on the iPhone. All my graphical elements align exactly in sitespinner to the pixel... So I'd assume the site has been built correctly.

Cheers for any advice!

Scotty

This message has been edited. Last edited by: Scotty,

I don't have an iPhone so can't check this myself.

By "individual graphical elements" do you mean image files? If so, SiteSpinner does put a one pixel (often) white border around images that it creates.

Normally this border does not show, but when on a colored background, it can. You could check this by blowing up some of your images (in an image editor, not with explosives!) to see whether the border matches what the iPhone displays.

I tried a photo from your photos page and see a yellow/black border, while you report white lines, so that may not be it.

Can you name an i-frame page, and point out the objects on that page that are bad? Then we can look more closely. If you can post a screen shot from the i-phone, that would be great -- let's hope is has a PrintScreen function just like a regular computer.

g'day mate,

Cheers for the reply. The first page you come to on the site displays the prob. The iframe contains the postit note graphic and menu buttons. The images that make up those elements were prepared and cut up in photoshop and imported into sitespinner as images. None of them have borders as none were created in sitespinner.

All of the subsequent pages are displayed in the iframe and exhibit the same prob. On further investigation it appears some image elements are off kilter and don't line up... Being several pixels out. I'll work on taking a screenshot for you...

Scotty

This message has been edited. Last edited by: Scotty,

Hey bruceee,

Am on the road at the mo so am unable to post the screenshots here but have just sent you a couple of emails with pics attached...

Scotty

Thanks Scotty. I have posted your pic here:
http://virtualmechanics.infopo...46038591/m/215102121. The lines look like the outlines of the block level elements on your page -- the boundaries of the objects you are using.

Firefox can place very similar lines on the desktop web page: If you have the Web Developer toolbar in Firefox, select Outline > Outline Block Level Elements. If I turn Outline > Outline Frames on, I get a misalignment on the bottom edge of the notepaper header similar to what shows on your full view screen shot. Am I looking in the right place for the misalignemnt?

These lines look like something your iPhone browser is adding as my Firefox does -- might you have some setting (display outlines or similar) that is doing it?

I have no way to test the following to see if it has any effect:

An iframe has 2 style attributes, marginwidth and marginheight, which work similar to their counterparts used a frame. In some browsers, the default is 1 pixel. Changing these values to 0 in the CSS or the Foreign Object window (using the Name-Value Parameters area) may help you.

Thanks for the replies and suggestions guys! And thanks for posting the screenshots too bruceee. Yeah, you've spotted the flaws that are evident. I'm reunited with my computer on the weekend I will try your suggestions. I had a look into the settings on the safari browser here on the iPhone but am unable to find any settings that might help. Hopefully I can correct it another way (at my end) so users don't have to.

I'll let you know how I get on. Also, the new iPhone OS comes out next month and that might also correct the problem. I wonder if sitespinner pro is more compatible as it purports to support mobile browsers??

Regards,

Scotty

G'day Guys,

Back in front of my computer and have had a look at the Foreign Objects Edit window and can see the Name and Value parameters...

A quick question for Larryd; How exactly should I fill the fields in? My index page has the only iFrame and all the subsequent pages are viewed through this iFrame. Do I put the name of the iFrame in "name" and the 0 in "value"?

This is where my knowledge of web design runs out. Much MUCH prefer the pure design side of things Thank Virtual Mechanics for sitespinner!!!! Else I'd be buggered.

Scotty

Name = marginwidth Value = 0
Name = marginheight Value = 0

Of course it had to be as simple as that... Here's me trying to make matters more complicated than they really are... again!!! Haha.

Scotty

News just in... Didn't work. Bugger. Ah, not to worry. Hopefully the next iPhone OS update will correct it...

I wonder how iFrames appear on other mobile phones. Hmm....

Scotty

It's not just i-frames affected -- it seemed to me that image boundaries also displayed.

I'm also wondering if this problem affects all iPhones or just your particular one.

Yeah it's defo just the image boundaries within the iframe. The rest of the index page is compiled of multiple images and their boundaries aren't visible. Curious.

I'm trying to hold someone down who has an iPhone so I can have a squiz on theirs...

Scotty

Little update for those whom may be interested. It seems the version 3.0 software update for the iPhone has largely corrected this issue. It is still evident occasionally but doesn't detract from the aesthetics as it did.

Also, the buttons at the top required two "clicks" to activate the link before (the first for the rollover state, then the second to activate the link) whereas now (with version 3.0 iPhone upgrade) only one "click" is required to activate the rollover and link

Scotty

Just adding my five cents. From my understanding the use of I-Frames should be avoided for mobile designs, at least for now.

Ah... so there are no doubt problems to be experienced when utilising them. I don't have Spinner Pro so am unable to build a mobile specific site... but I'm happy with how the iPhone is now rendering my site. I can only imagine how the other mobile devices are handling it!!

Scotty