Empty div gets bottom border on iPad/iPhone browser

Not sure if anyone else has been battling with this issue?  Let me explain – I built a set of templates that were tested in the usual suspect (IE6-9, FF3+, Safari 5+ Chrome 10+ Opera 10+) and all worked perfect! (albeit I had to use a dreaded IE6 CSS and conditional statement and the dreaded png fix!).

While I was at it I thought I’d just run a quick test on the Ipad/Iphone just to make sure – I honestly thought it would all be fine as I’d tested thoroughly on Safari for Windows and Chrome.  But to my dismay the “top” div I was using to hold a curved background image in and another I was using to hold a logo had strangely suffered from what looked like a 1px white border on the bottom of each div – obviously ruining my design!

Well I wasn’t going to let the Apple posse get one over on me so I turned to the trusty Google to find an answer – and luckily I did!  A single line of “meta” code in the header was all I needed to beat this Apple monster away 🙂

Here’s the code:

<meta name="viewport" content="initial-scale=1, maximum-scale=1">

In a nutshell you need to tell the Ipad/Iphone not to play with the zoom scale at all – and viola it fixes the issue!

Email Regular expression

Stuck trying to come up with the perfect regular expression for email validation?!?!  Well look no further – here’s one that I’ve found “perfect” to date!  It seems to cover all the clever variants and funny characters that are accepted in email addresses!

Bet you didn’t know the apostrophe and many other “special” characters are actually valid in an email address.  Here’s a quick low-down on what I know is accepted (if you find out any more let me know!):

  • Uppercase and lowercase English letters (a–z, A–Z)
  • Digits 0 to 9
  • Characters # $ % & ' * + - / = ? ^ _ ` { | } ~
  • Character . (dot, period, full stop) provided that it is not the first or last character, and provided also that it does not appear two or more times consecutively (e.g. craig..cartwright@example.com).

So here’s the useful reg expression:

/^[\.\#\$\%\&\’\*\+\-\/\=\?\^\_\`\{\|\}\~0-9A-Za-z]+\@[A-Za-z0-9\-\_\.]+\.[A-Za-z]{2,4}$/

Hope this helps!