CSS, JavaScript and XHTML Explained

Estelle Weyl’s Blog of quirks, random thoughts and funky finds discovered in day-to-day coding

 

iPhone Screen Orientation: Portrait and Landscape September 11, 2009

Filed under: Browsers, Character Entities, HTML, JavaScript, Web Development, iPhone — Estelle Weyl @ 12:22 am

When you tilt your iPhone, the screen changes orientation. The website you developed for the default portrait orientation may not look good in landscape mode, especially if you developed your page for the 480 (h) x 320 (w) screen.

In my original iPhone post, I instructed detecting the width of the screen at regular intervals to detect the orientation of the iPhone. That post was written within a week of the launch of v1 of the iPhone. There is now a better method: use the onOrientationChange method to change the class of your body based on the page’s orientation. Include CSS for both normal page layout, and then include a series of overrides for when the screen is displaying your iPhone application in landscape mode.

What you want to include is the unobstrusive javascript equivalent of:

<body onOrientationChange="changeMyClass();">

In this case, we’ll call

switch(window.orientation){
   case 0:
       //handle portrait actions
       //document.getElementsByTagName('body')[0].className = ‘portrait’;
       break;
  case -90:
  case 90:
       // handle landscape actions
       //document.getElementsByTagName(’body’)[0].className = ‘landscape’;
       break;
} //end switch


 
 

IE6 & IE7 label bug (implicit label bug) September 10, 2009

Filed under: Browsers, IE7, Web Development — Estelle Weyl @ 11:01 am

HTML and XHTML specifications allow both implicit and explicit labels. However,  IE6 and IE7 do not correctly handle implicit labels. When including implicit labels, IE6 and IE7 treat the input as one label and the text within the element as a second label. In other words, if you include padding, margin, bakcground images, or, in the case of IEs, hasLayout like "zoom", the styles will be added to both the input part of the label and to the text part of the label.

For example, <label>First name <input type=”text” name=”firstname”></label>. IE6 and IE7 interpret the code as if you wrote <labe>First name</label><label><input type=”text” name=”firstname”></label>.


This is how IE6 and IE7 render:
implicit label in IE7

This is how it should be rendered:
implicit label in IE8

Generally, this isn’t a major issue, which is probably why I couldn’t find documentation on this bug. However, if you want to put a background image between the input and the text, if you want to put a border around the label, or if the label is floated left and you need to give "hasLayout" for IE6, that’s where it gets tricky.

(note: if you use zoom: 1 on your label, the label will display on two lines: one for the input, and the other for the text)

The implicit label is valid according to the w3c. See the W3C Label Specifications. The w3c states “To associate a label with another control implicitly, the control element must be within the contents of the LABEL element. In this case, the LABEL may only contain one control element. The label itself may be positioned before or after the associated control.”

Some may argue “just use explicit labels”, and there are accessibility arguments around that. However, old versions of JAWS , in forms mode, did not read the label for implicit labels on checkboxes and radio fields. I believe that has been fixed.

My fix was inane, yet valid. I assume this is such an esoteric bug that I don’t need to create recommendations on fixing it. I just wanted to document it in case someone else comes across this bug


 
 

More CSS, XHTML and JavaScript at Community MX September 9, 2009

Filed under: CSS (including hacks), JavaScript, Web Development, firebug — Estelle Weyl @ 12:55 pm

I have been somewhat prolific as a technical writer for Community MX over the past 12 months. If you are interested in any of the articles, they are listed below. I will add new articles to this list as they get published (and as I get around to it). While Community MX is a subscription based website, you can get a one week free trial, and several of the articles (as noted below) are accessible without a subscription, and without logging in.


Most articles are part of a series. These four random ones are standalone:

There is a lot of interest in my IE8 post. It was a basic post, and I couldn’t get my butt in gear to write more. By writing for community MX, I kind of forced myself to research IE8. This seried has just begun… there will be a bunch more.

Based on my blog post on all XHTML elements, their attributes and their semantic meaning that I was wrote for this blog, I wrote an 18 part series going into each element in greater detail. The Object and input element (free) ones are the most intersting. The table of XHTML elements (also free) is the most useful:


While simple, the Three Column layout series teaches the reader how to make a three column layout, with the columns being able to be rearranged into any order without touching the HTML source code. If you don’t know how to make a CSS 3-column layouts, this series is definitely worth the read.

My firebug tutorial has already had over 100,000 views. Obviously there is interest. My Community MX Firebug series is only half way done, but as you can imaging, it’s going deeper into this most excellent tool. Similar to the IE8 series, I am still in the middle of this series. There should be several more.

The EMail Setup series is especially useful for anyone using CPanel or anyone trying to manage several email to and from accounts:

The CSS for Absolute Beginners series is very basic, and likely to simplistic for readers of this blog: as noted, it’s fore beginners. However, if you do want the basics, I am including the list of articles for those of you who are interested:

Don’t worry. Obviously I am still writing here too. Just wanted to share these in case anyone is interested.