tags:

views:

404

answers:

5
+2  Q: 

Overflowing HTML line text before it gets obscured by right aligned content

I've got some text that is displayed on a single line in a container that has a fixed width. If the text can't be contained within the width of the container the overflow is hidden. Any combination of three status icons may appear positioned from the right hand side of the container. If any of these icons appear I'd like the text overflow to be hidden before the first icon appears so the text does not appear obscured behind the icons.

How can I overflow the text so it doesn't flow under the icons (ideally using only CSS and not needing to resort to JavaScript)?

An example of the CSS and HTML I've started from (neither of which are set in concrete) follows. Here's a live example of the code which also illustrates the desired result (note it has an background image inlined in the CSS using the data URI scheme so won't work in versions of Internet Explorer earlier than 8).

CSS:

.line {
  position: relative;
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.star, .circle, .flag {
  position: absolute;
  top: 3px;
  height: 23px;
  width: 15px;
  background-image: url(icons.png);
}

.star {
  right: 30px;
}

.circle {
  right: 15px;
  background-position: -17px 0;
}

.flag {
  right: 0;
  background-position: -32px 0;
}

HTML:

<div class="line">This is some text that should have overflow that is hidden.</div>
<div class="line">
 This is some text that should have overflow that is hidden.
 <div class="flag"></div>
</div>
<div class="line">
 This is some text that should have overflow that is hidden.
 <div class="circle"></div><div class="flag"></div>
</div>
<div class="line">
 This is some text that should have overflow that is hidden.
 <div class="star"></div><div class="circle"></div><div class="flag"></div>
</div>
<div class="line">
 This is some text that should have overflow that is hidden.
 <div class="star"></div><div class="flag"></div>
</div>
<div class="line">
 This is some text that should have overflow that is hidden.
 <div class="circle"></div>
</div>
+1  A: 

You could make use the background image directly in the div that contains the text and use padding to free some space for the icons.

EDIT:

Here is a working example, but I couldn't get "nowrap" to work, so I cheated by using a height:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css" media="screen">
.star {
    background-image: url('data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00.%00%00%00%10%08%06%00%00%00i%C9M%EA%00%00%00tIDATH%C7%ED%96Q%0A%C0%20%0CC%7B%98%C9%EE%7F%C2y%01%91%2C%BE%0C%19%16%FCl%F3%AC5Z%F5%C7%B8%AF%F6%1CpQOYr%11%02%80%00%96X%5CpG%D4%06~%B3%E3Y%A1%95%8E!%A3%91%10ws%A3G%9D%D88v%BB)GP%C0Q%5B%A2%EC%2Cf%C1%AB%A2%04%B8%05%3FJ%A4%BA%1E%7B%F8%14%ABK%8E%9A%DDu%C59%EA%A38%FF%A4%DD%A2%03%C8d%24%84%B6%AC%BF%C0%00%00%00%00IEND%AEB%60%82');
    background-position: right;
    background-repeat: no-repeat;
    padding-right: 30px;
}

.line {
    width: 200px;
    overflow: hidden;
    height: 20px;
}
</style>
</head>
<body>
    <div class="star line">This is some text that that should have overflow that is hidden.</div>
    <div class="star line" style="padding-right: 0px;">This is some text that that should have overflow that is hidden.</div>
</body>
</html>

And it seems like you have to use single images instead of sprites, but you could add the padding directly to the star, circle and flag class.

Tim Büthe  2009-07-01 08:36:37
That's not going to immediately work because I'm using CSS sprites with a single image to display the icons (as any combination of icons could appear for the text). But I like the idea using padding on the text container to free the space. I'm thinking I could add a class on that text container that indicates the type of the first icon that will appear which applies the appropriate padding to have the text overflow as I'd desire.
Simon Lieschke  2009-07-01 08:49:29
I've added an example
Tim Büthe  2009-07-01 09:09:52
+1  A: 

Maybe I don't understand you correctly, but what about setting the background-color of .star, .circle, .flag simply to "white" and use "z-index" on them? It certainly is a hack so to speak, but maybe will work for you.

Update

Just made an attempt based on your code. Only working on FF, Opera, IE8:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
  <title>Sandbox</title>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <style type="text/css" media="screen">
  .line{
    position: relative;
    width: 200px;
  }  
  .star,
  .circle,
  .flag{
    top: 3px;
    height: 23px;
    width: 15px;
    background-repeat:no-repeat;
    background-image: url('data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00.%00%00%00%10%08%06%00%00%00i%C9M%EA%00%00%00tIDATH%C7%ED%96Q%0A%C0%20%0CC%7B%98%C9%EE%7F%C2y%01%91%2C%BE%0C%19%16%FCl%F3%AC5Z%F5%C7%B8%AF%F6%1CpQOYr%11%02%80%00%96X%5CpG%D4%06~%B3%E3Y%A1%95%8E!%A3%91%10ws%A3G%9D%D88v%BB)GP%C0Q%5B%A2%EC%2Cf%C1%AB%A2%04%B8%05%3FJ%A4%BA%1E%7B%F8%14%ABK%8E%9A%DDu%C59%EA%A38%FF%A4%DD%A2%03%C8d%24%84%B6%AC%BF%C0%00%00%00%00IEND%AEB%60%82');
  }  
  .star{
    right: 30px;
  }  
  .circle{
    right: 15px;
    background-position: -17px 0;
  }  
  .flag{
    right: 0;
    background-position: -32px 0;
  }
  </style>
  </head>
  <body>
    <h1>Current results:</h1>     
    <div class="line" style="background-color:red;">        
        <div class="star" style="display:inline;float:right"></div>
        <div class="flag" style="display:inline;float:right"></div>
        <div style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">This is some text that should have overflow that is hidden.</div>
    </div>
  </body>
</html>
merkuro  2009-07-01 08:44:23
If you look at the example in Internet Explorer 8 you'll see the browser will display an ellipsis indicating the text has overflowed. If I set the background colour of the icons to white the ellipsis won't be positioned correctly (it will still appear just before the container ends, but hidden behind the icons). The icons are also transparent because the line is going to be a clickable item in my interface which will change background colour when hovered over.
Simon Lieschke  2009-07-01 08:56:01
Interesting approach! But there's no space left between the star and flag icons as there is in my example page.
Simon Lieschke  2009-07-01 12:54:48
A: 

Your problem is that you want to affect the rendering of a parent tag based on the number of its children of a particular type. That's just not possible without some programmatic intervention.

If you're programmatically generating these lists, I'd suggests just adding three classes which specify the width of the line to the outer div:

.line {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.noicon {
   width: 200px
}

.oneicon {
   width: 183px
}

.twoicon {
   width: 168px
}

.threeicon {
   width: 154px
}


<div class="line noicon">This is some text that should have overflow that is hidden.</div>
<div class="line oneicon">
        This is some text that should have overflow that is hidden.
        <div class="flag"></div>
</div>
<div class="line twoicon">
        This is some text that should have overflow that is hidden.
        <div class="star"></div><div class="flag"></div>
</div>
<div class="line threeicon">
        This is some text that should have overflow that is hidden.
        <div class="star"></div><div class="circle"></div><div class="flag"></div>
</div>

Otherwise, your best option might be to use Javascript to dynamically shrink the boxes.

Conspicuous Compiler  2009-07-01 09:24:25
That didn't have the expected results: http://jsbin.com/utodi
Simon Lieschke  2009-07-01 13:08:03
A: 

The easiest way to be able to let those icons affect the width of the text is to have them precede it (they're absolutely positioned anyway), and to give text itself a container as well (I'm pretty sure you need that, whichever way you do it). So you end up with this:

<div class="line">This is some text that should have overflow that is hidden.</div>
<div class="line">
    <div class="flag"></div>
    <div class="text">This is some text that should have overflow that is hidden.</div>
</div>
<div class="line">
    <div class="circle"></div>
    <div class="flag"></div>
    <div class="text">This is some text that should have overflow that is hidden.</div>
</div>

Here's the only new CSS you need to make that work (in addition to the CSS in the question):

.text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.flag   ~ .text { width: 183px; }
.circle ~ .text { width: 168px; }
.star   ~ .text { width: 154px; }

The .text rule is the same as the .line div you used for your own working example. The real "magic" happens in those last rules, and they're the reason I moved the image divs up. That allows you to use the CSS3 sibling selector to set the width of the .text div based on the presence of the icons. You can simply let the CSS cascade take care of the width by listing the icon classes in right-to-left order.

As a side note, I do have to say that there are rather a lot of divs here, so there's no indication of what it actually means. Your first concern should always be to create semantic HTML.

I'd probably want to put the text in paragraph tags and the icons in a list, and give each list item a textual description as well (hiding it with CSS). Then again, maybe that's not actually appropriate (and maybe the icon divs should really come after the text); I can't tell. And if the icons go in a list, the sibling selector will need some help...

mercator  2009-07-05 02:07:34
"~" won't work in IE6.
billyswong  2009-07-05 06:12:30
A: 

I can't comment on Merkuro's answer and your response (too few points), so I'm adding this here: You could just use a placeholder image of the line covered by the opaque img so that, once placed, it'll cover the text and the line, but the background line is seemingly uninterrupted as the image has a line that aligns up neatly with the real line behind it. And you could use hover: to switch images when the line changes colour, etc. (best I could think of at the moment)

Also if you use seperate images with just one symbol (star, circle, flag) and pad the images to the right with opaque whitespace upto the width you want to cover, you'd have something like this (I did my best to encode the base64 images, but it only works in FF. The CSS should work correctly with proper linked images).

CSS:

.line {
  position: relative;
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.star,
.circle,
.flag {
  position: absolute;
  top: 3px;
  height: 23px;
  right: 0px;
}

.star {
  width: 45px;
  background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAQCAMAAABeF73YAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAwBQTFRFAAAA%2F%2F%2F%2FAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAZ3bsYwAAABh0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjM2qefiJQAAAE5JREFUKFOd0jEOACAIA8Dy%2F0%2BLDQY3WlhcDlIJCKtQ%2Br1D844D2vhSOk%2FZNf07pxs6GKYaptFX0tALesXNMAwipfmg4sn1u5H20Tsz%2BQHT4AKfEabvTAAAAABJRU5ErkJggg%3D%3D');
  //background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD4AAAAQCAIAAADBBVtVAAAAfUlEQVR4nNVVQQrAIAyz4v%2B%2F3B0K%0AzuEYth0p6UmF1hiSKKraOKvnR4hIfkigfoBeVVnoRnkJ8cSsi9emhwQD3O9m%2FQQTJrXcrN%2Bdb%2FQj%0Aozau9R0l%2BIsgtmkc%2Bi4YcESOZP8UCT7au926Xvy9nYftKW5bIx9AbNN4OJYXccJcMFQtIo2LoIEA%0AAAAASUVORK5CYII%3D');
}

.circle {
  width: 30px;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAQCAMAAABeF73YAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAwBQTFRFAAAA%2F%2F%2F%2FAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAZ3bsYwAAABh0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjM2qefiJQAAAENJREFUKFO10UEOACAIA8Hy%2F08rSPC6NZHzpBCqsEaWjieuHLKnUGnkk7cm3ucTDuJ3usn%2F3u4%2Bsj2uicBjUPU3zuQLvrYCj5S%2FhI4AAAAASUVORK5CYII%3D');
  //background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAQCAIAAADmq9q9AAAAaUlEQVR4nO1VQQ7AIAhrjf%2F%2FMjuO%0AGOVAF8VkvWFiKAUKzQw10E4TeFGISlc%2Bk%2FSh2Ou8KgOP6csOKqusCptCs5KhEpeeFuZyVeJNSe%2FR%0A5apgXbpiLQ0AST9rcRhkFS1OcttvTyn%2FyzzBA%2B9YHizbV3zJAAAAAElFTkSuQmCC');
}

.flag {
  width: 15px;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAQCAMAAABeF73YAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAwBQTFRFAAAA%2F%2F%2F%2FAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAZ3bsYwAAABh0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjM2qefiJQAAAExJREFUKFO10LECACAERVH%2B%2F6dTJJtryNB06CE6KhlpPVyyumbjD%2FdfVd6N3jleFqALJzpXRdjD2LJQO48X9ASn48NNOfSX%2FeXgKpssziECqaokJE4AAAAASUVORK5CYII%3D');
  //background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAQCAIAAABhmjO7AAAAbElEQVR4nLWSUQ7AIAhDqdn9r8w%2B%0ASJyJ2pki%2FVPio0Lh7lamVoc2s0d%2BCYBUYyQKnXM7WqSfcEPK3HdBmO%2BvbXXZEnIi%2B%2FQJIeudm9Pp%0AJ5%2FOeufpTNF%2F7bfoP1rgx1mkWrtVPZEfAlvIBTrRC7wOMBc8CAoqAAAAAElFTkSuQmCC');
}
facepalmd  2009-07-15 23:29:42
I've plugged in your styles at http://jsbin.com/erosu and it doesn't position the ellipsis where text overflows correctly. You'll see what I mean if you view it in IE8, Safari or Chrome (the base64 encoded images all work fine in those browsers). You won't see this problem in Firefox because it doesn't support "text-overflow: ellipsis;".
Simon Lieschke  2009-07-16 11:09:57
Do you want to have the ellipsis on all lines? or do you want to hide the ellipsis completely, because on safari and IE8 I can only see the 1st dot of the ellipsis on the 2nd line. (you could hide it by increasing flag class width to 17 or such to hide it completely. If you want to have an ellipsis, would having another css class called ellipsis that positioned a background-image of an ellipsis with width 60px (or thereabouts) meet with your requirements?
facepalmd  2009-07-17 13:45:29
forget the second half about the ellipsis, i've no idea what I was smoking. I also tried attaching an ellipsis to the image, but that's not going to scale if the font is sized up or down, but I'll add it as a commented-out section above to show you exactly how it failed, just in case it gives you any ideas
facepalmd  2009-07-17 18:59:01

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?