IE7 caches rendered elements?

I’m tasked with some css tweaking to our current product. We need to implement a ‘Print Preview’ screen so the customer can see how this looks before printing. Css supports exactly this use case with the @media notation.

So far so good.

Now Internet Explorer gives me some headache. Basically it looks like that if I render a page and then render the same page again with a slightly different style sheet, the lovely IE (7) will cache the width/text-align of the element. That means formerly right aligned text now looks like center aligned. Using FireBug under Firefox confirms the correct right aligned styled text. Even using the IE Developer Toolbar shows the correct style sheet information and element. Still, it renders sort of centered. By accident the right border of the text is exactly as far away from the left border as in the previous rendering. If I add any attribute to the text cell (or delete an attribute) all of the sudden the text will be rendered right aligned exactly how it should have been in the first place.

My guess is that IE remembers the width and alignment of the text cell from the previous page (why else the centered text appears to be the size). Deleting/adding an element via the developer tools forces a refresh and voila it renders how it should be.

I hate it. I guess there is a solution for this, I just don’t know it. In any case….this is unexpected behavior.

On top of that: using css and Apache Trindad with a print preview on screen makes it hard to manipulate the css for the printout since I just don’t know the names of the css classes nor the imported Trinidad css file name (and I do have pre compiled/packaged css file where I have to restart the server every time if I do some changes).

rant off