Alazanto

Tasman & Absolutely Positioned Child Elements

Filed Under: CSS Related, Journal.

We now have a wonderful workaround for screen-readers that are unable to read elements with a display declaration of none.

For more information about this method, See the “Screenreader Visibility” article at the CSSD Wiki.

The Code Behind this Method

li {
position: absolute;
top: 0px;
left: -999px;
/* and for those HR's you want to hide: */
width: 400px;
}

Unfortunately, however, the following workaround has given me many headaches when I tried implementing it into this site.

Problems?

Rendering elements with the above properties is quite rosy when using Opera, Mozilla and IE/windows. However, IE5/mac did not play so nicely. Why not? When everyone gets along with each other, the playground can be an enlightening experience!

Anyway, let us make a simple list. The second item in this list belongs to a special class called “hide.”

<ul><li>item1</li><li class=�hide�>item2</li></ul>

Here is the CSS:

.hide { /* this is a generic class */
position: absolute;
top: 0px;
left: -999px;
width: 400px;
}

In the Macintosh edition of Internet Explorer 5, both item1 and item2 will disappear from the browser’s display. From what I can gather, the browser has difficulty mixing multiple position declarations for child elements. A list item is a child element and if one list item is positioned statically and the other, absolutely (far off the screen), both list items will disappear.

Work Around the Work-around

I gave this issue a little thought this morning and tried to think of a workaround that doesn’t involve creating additional markup. However, IE5/mac has trouble with child elements - and we best not position child elements absolutely when the the others are positioned statically or relatively. For this reason, the quickest workaround involves an additional span tag. Span tags are not child elements, thankfully.

<ul><li>item1</li><li><span class=�hide�>item2</span></li></ul>

Because I used a generic class definition (.hide) in the original CSS snippet, the CSS code does not have to change.

To conclude, remember to be aware of child elements when hiding specific elements from a browser’s display through the use of absolute positioning.

Published: 4 years, 9 months ago

Keywords