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

Hi Shadi,

Thanks for the clear and comprehensive explanation.  I really like what
you are doing with these good v. bad pages!

Steve

> 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 |
>


-- 
Steven R Bratt, Chief Executive Officer     mailto:steve@w3.org
World Wide Web Consortium   http://www.w3.org
MIT Computer Science and Artificial Intelligence Laboratory
Stata Center, 32 Vassar Street
Cambridge, MA 02139, USA / Voice: +1.617.253.7697 / Fax: +1.617.258.5999

-- 
Steven R Bratt, Chief Executive Officer     mailto:steve@w3.org
World Wide Web Consortium   http://www.w3.org
MIT Computer Science and Artificial Intelligence Laboratory
Stata Center, 32 Vassar Street
Cambridge, MA 02139, USA / Voice: +1.617.253.7697 / Fax: +1.617.258.5999

Received on Tuesday, 8 August 2006 12:01:58 UTC