Tag Archives: css

"off-left" convention is bad news for RTL

4 Replies

[This post presents a web designers technical problem, in which a hack for improved accessibility damages RTLability]

This weekend I tried to debug an annoying problem in Drupal's Acquia Marina theme on RTL mode, in which a horizontal scroll bar appears with no good reason (layout doesn't scale horizontally).

I turned to monkey HTML debugging, a term I just invented for removing element-by-element until getting to a super simple HTML file which reproduces the bug.

Eventually the one to blame was an element placed at "left: -999em" absolute position,  a far place horizontally, and triggered the scroll bar to appear (on FF and IE, not on Chrome). When on LTR mode, it didn't, and things work perfectly. This setting aims to simply hide the drop-down menu when mouse is not hovering above it.

Q: Why don't they use CSS display:none, which seems to make more sense than hiding things off the screen?

A: looks like it has to do with screen readers (as this article suggests), which are apparently not aware of display:none text but are aware of off-screen text. A little puzzling. I suspect that it's too old info, for it seems to be written on 2003. I wonder if new screen readers have this problems as well, and whether the reason for using off-left is not just an ancient myth.

The problem with RTL

When placing things off-left (e.g. left: -999px) on LTR mode, all browsers do NOT widen the page horizontally. It makes sense - the page goes from left to right, not from left to even-more left.

However, when on RTL mode, left: -999px does widen the page horizontally to the right (and the off-left element is actually visible when scrolling there), which is a very unwanted effects.

Here's a related drupal discussion about the problem and possible solutions.  The problem seems broader than just acquia marina .

Continue reading →

Weird CSS tricks

Leave a reply

I was quite surprised to find out these two interesting css "tricks":

  • Data urls: putting the data inside the CSS (inline).
  • CSS sprites: instead of loading many small images (one per item), it's possible to load one big image that contains them all.. then play with the offsets to get the right image.

How can a parent DIV get the child DIV's width?

Leave a reply

In the following code, I wanted the parent div to expand to the size of the child. But it doesn't work this way:

<div id="parent">
<div id="child" style="width: 500px">Child Text</div>
</div>

Instead, the parent takes 100% of the screen width and does not shrink to the width of the child. Quite a long googling revealed some interesting facts:

  • div is a 'block', so it always tries to take all available width. (unlike a span which is 'inline')
  • Using 'float: left' in the parent, makes it "shrink wrap" over the child, thus not trying to take all available width.
    adding 'clear: both' will prevent the float from causing the other blocks to join the same line.
  • If the parent is a <td>, then the "shrink wrap" effect takes place.. (Also with <div display="table-cell"> on firefox, but not in IE)

CSS position attribute

Leave a reply

I didn't fully understand it from w3schools description, so here's a simpler (IMO) explanation after digging the issue a little bit:

  • static (the default!): The browser decides where to put the element, and it's not movable (i.e. one cannot change the position attributes (top, left, bottom, right) )
  • relative: Position attributes can be changed, relatively to the 'where-the-browser-decided' position (i.e. for having an element like the static above, but 5 pixels upper, one can put top: -5px)
  • absolute: One can specify a specific position inside the document, which should be measured from the beginning of the document. (i.e. top: 100px; left: 500px) will be on the x=500, y=100 location from the document's start point (top-left in most cases).
    I've noticed that IE6 sometimes measured the location relatively to the parent element in some cases, but it seems to be fixed in IE7.
  • fixed: Similar to absolute, only that the position is relative to the WINDOW and not the DOCUMENT, thus scrolling doesn't change the position. someone said it's like a watermark.