Re: BAD why News Article page no worky in other browsers

Hi Shawn, Steve,

As background, the main reason why the page layout brakes is not due to proprietary CSS attributes of IE but much more due to the overall behavior of the different browsers. It is a combination of the order of the elements in the page and the way in which they are presented that causes them to be messed up. It is a classic effect of drag-and-drop WYSIWYG authoring tools (you drop the different pieces in different order then play around to fit them visually into a page). Here are the two main IE differences that we are making use of:


#1 rendering floating elements
This is the primary difference that we are making use of throughout the page. The two-column layout is mostly defined by floating elements side-by-side. In most cases, only one of the two sides has a width defined (e.g. 50%), while the other width is left to the interpretation of the browser. IE tends to shrink adjacent floating elements to fit them into the respective parent block but this is not in compliance to the CSS standard. Most other browsers obey the "normal flow" of the (text-)elements without explicit width, which causes them to take the full width and be pushed down or up depending on the floating direction. A good example of this bug is in the top titles of the page: while "Panda Mating Fails; Vet Takes Over" is fitted into 50% of the page, the adjacent title "Man Gets Nine Months in Violin Case" is dropped below vertically in most browsers because it takes up more width than 50%. As a side note: the graph towards the middle of the page uses "float:right" so th
at the adjacent text is pushed *up* instead of down. Using a combination of these throughout the page makes it visually obscured.


#2 rendering of tables
This one is a nifty feature and the credits for working this out goes to Steve Faulkner from Vision Australia. The section "Return To Sender", the paragraph that starts with "There has been significant drop in brain donations", and the image of the Zookeeper (female with sun glasses) are fitted into a table. The "Return To Sender" section is floated left but there is a nesting error with the <DIV> elements so that IE sees this section as a separate block from the table while it actually isn't. The table itself has an inconsistent number of cells in each row and, more importantly, the nested table that contains the picture of the Zookeeper has relative positioning. This positioning is dependent on the respective browser and how it interprets the nesting errors in the <DIV> element and the table cells. Note that the number of table rows with respect to the number of row-cells makes a difference. This may not be classified as an IE bug in the usual sense since the effect is bas
ed on the interpretation of invalid code which is not defined by the relevant standards; but it is still a good example of testing and debugging for a single browser as opposed to cleaning up the code which is the true source of the problem.

Regards,
  Shadi


Shawn Henry wrote:
> Hi, Shadi,
> 
> Here's the promised e-mail in follow-up to our phone conversation about 
> why the BAD Demo News Article page breaks in other browsers. What I was 
> looking for is a list of the elements of the inaccessible markup that 
> are realistic examples of poor design specifically for IE; e.g., 
> IE-specific non-standard CSS.
> 
> Reminder that Steve wants this for a presentation this week. (I'm not 
> sure when.)
> 
> Best,
> ~ Shawn
> 
> 

-- 
Shadi Abou-Zahra     Web Accessibility Specialist for Europe | 
Chair & Staff Contact for the Evaluation and Repair Tools WG | 
World Wide Web Consortium (W3C)           http://www.w3.org/ | 
Web Accessibility Initiative (WAI),   http://www.w3.org/WAI/ | 
WAI-TIES Project,                http://www.w3.org/WAI/TIES/ | 
Evaluation and Repair Tools WG,    http://www.w3.org/WAI/ER/ | 
2004, Route des Lucioles - 06560,  Sophia-Antipolis - France | 
Voice: +33(0)4 92 38 50 64          Fax: +33(0)4 92 38 78 22 |

Received on Tuesday, 8 August 2006 08:53:48 UTC