HTML /CSS - Different margins on iPad?

It is identical on the iPad.

Hey etresoft, I have a just a couple questions for you (something I'm doing for school). What's the best way to contact you?

See Apple's #2262 tech note: Preparing Your Web Content for iPad

jamie.shaw wrote:

Is it an iPad (1st Gen) or iPad 2?

I checked it on my iPad1 and my wife's iPad 3 - no difference that I can see. The biggest problem I can see is that huge image that needs to be reduced.

It seems to be an issue with retina displays as Safari on the new 15" MacBook Pro also has an issue.

I didn't look at your code because I can't see anything that is wrong. Can you say specifically which elements are displaying incorrectly? Just because it looks correct doesn't mean it is. A retina display might show that.

It's only a miniscule amount, but text is pushed down and "uncentered" if one has specifically set margins to vertically align objects.

Remember that fonts are different. You aren't ever going to get things to be exactly the same. It is better to use a more flexible design that will accomodate differences in browsers.

TheClapp81 wrote:

Hey etresoft, I have a just a couple questions for you (something I'm doing for school). What's the best way to contact you?

It is something specific that I am doing? Go to my website and there are e-mail links not well hidden. If it is more of a general question, it would be better to start your own question here. Someone else may have a much better answer than me.

Afer overlaying those two images, I can see what you are talking about.

I think you have too much presentation structure in your code. Each menu item is:

<a class="navlink" href="">

<div class="navicon">

</div>

<div class="navtext">

About

</div>

</a>

All you really need is:

<a class="navlink" href="">About</a>

And you could probably even infer the "navlink" class from the parent.

All those elements provide more opportunities for slight variations. Also, You are using some "*" CSS rules to set relative position on everything. I try hard to do as little as possible. The more of your code there, there greater the chance for a browser to screw it up. Finally, and this is the biggest point, you are specifying VAG Rounded bold for a font. I like that font but it isn't on the iPad. You are going to fall back to a different font with different spacing. Always use iPad fonts.

Also, you have a very slight vertical offset on ":active". I think that should be either removed or accentuated.

PS: I like the ":hover" on your nav items. Can I steal that? Coding is easy, but design is hard.

I think the iPad perhaps has a default CSS file to make it more ledgable on iPad.

iOS uses WebKit - mobileSafari and UIWebview both look to it regardless of device. Layout subtleties are your responsibility 🙂, of course.

You may want to visit WebKit.org for details...

jamie.shaw wrote:

As for stealing the ":hover" style, be my guest. I'm flattered, if anything 🙂

Thanks. I realize is it just a darker, inset background, but while it's on my mind and in front of me, I'm going to snag it. I would be better at web design if I didn't hate it so much.

The best advice I can give is to try to keep your content and presentation separate. Try to make the site usable even without any styling at all, like in a text-based web browser. Try very hard to use only basic HTML. Don't add divs that serve only the display. Don't have any metadata (like "widebutton" or something) that implies some sort of display attribute.

In most cases, you can build a nice site with just CSS styles. If you are lucky, IE might even render it properly. If not, it is easy to add IE-specific CSS. Only change the structure as a last resort. Even if you get it looking perfectly, some browser update or new version could break it at any time. The fewer hacks and tricks you use, the better your site will handle that stuff.

Next, check it in Firefox. IE9 is actually quite good. Firefox needs more hacks. Finally, check with Chrome. If there is a problem there, change the structure and start again with Safari.

You should also download Validator S. A. C. Your site reports 24 errors. Web browsers will try to correct these errors on their own and that could result in a different structure or CSS interpretation than you expected.

(Not intending to stray OT, etresoft, but this is awesome:

"Validator S.A.C. uses the AppDNA system to bundle the source code inside the application. Every copy of Validator S.A.C. is capable of recompiling itself. To examine the source code, select "Show Source Code" from the Help menu, and the internal XCode project will open."

Thanks for bringing this under my attention!)

Validator S. A. C. is a really cool tool. It uses the same code from the W3C Validator, but you can run it on your localhost website. However, I have never gotten the AppDNA system to work. It breaks hard with each OS update.