CSS - Css Selectable Block Test

I am curious how people go about testing their CSS code in all browsers? I am a mac user and don't have a PC sitting next to me. I am using browsershots.org .... but its awfully slow (I even paid for priority processing)

Just curious how everyone checks their CSS code on a Mac? Because IE is the big problem causer....

Hi there. Please have a look here. Could you please report any prob you come into and the browser you're on? Check out the layout section. Thank you in advance :)

In it I meld Tonico Strasser's brilliant "Flexible Layout" (http://www.webproducer.at/flexible-layout ) with Stu Nicholls' mega-cool "How to Use CSS to Solve min-width Problems in Internet Explorer" (http://www.webreference.com/programming/min-width/ ).

From a geek perspective this is a pretty cool layout: fully flexible source ordered pure CSS three (or two or one) full column layout with headers and footers and no javascript. It should look pretty much the same on any modern browser and should scale up and down smoothly as the font sizes are changed by the user.

I'm curious how it works on real world browsers. Does it jerk or flicker as it is loaded or the browser window is resized? Does it scale up and down smoothly as you change the font size? Are the contents of the side columns always visible as you play with the browser window and font size? Do the side columns maintain their size and the center column shrink as the browser window shrinks until a minimum center column size is reached? Does it do anything funky?

I've already found some minor funkiness on older versions of modern browsers running on Macs, but nothing awful, and the funkiness is due to browser bugs about which I can't do anything (data table captions, for example, don't seem to be understood well by Opera 6 for Macs . . . but then this is a data table caption issue, not a layout issue . . .).

How does this layout work for you? In addition to the feedback, let me know the browser and platform you are using (eg., Firefox 1.0.6 on Windows XP). I'm particularly interested in feedback from folks testing it over a modem.

Thanks!

Here's the link to my test page: http://www.econinformation.com/layout_test.htm

-- RS

This works on Opera while still working on IE and Firefox. Does it work on Konqueror? html4strict Code:
Original - html4strict Code <style type="text/css"> wbr { display: inline-block; width: 0; overflow: hidden; } .test { width: 150px; } </style> <div class="test">This<wbr />sentence<wbr />is<wbr />really<wbr />just<wbr />one<wbr />big<wbr />hillariously<wbr />long<wbr />word.</div>

  

 <style type="text/css">


 wbr


 {


  display: inline-block;


  width: 0;


  overflow: hidden;


 }


 .test


 {


  width: 150px;


 }


 </style>


 <div class="test">This<wbr />sentence<wbr />is<wbr />really<wbr />just<wbr />one<wbr />big<wbr />hillariously<wbr />long<wbr />word.</div> 

I've uploaded a test page re how do I get a content div to scroll under [apologies for new thread]. It renders fine in Camino-Shiira, Safari, iCab, Firefox, IE Mac 5.2x, but not too good on Opera 8.52 Mac [fuhgeddabout Netscape 4x].

1) Can someone provide some feedback on how it renders in Windows IE/FF?
2) Is the CSS a reasonable structure to convert the other pages of my site to?

The template would be a fixed sidebar, fixed clock header (different-pages different-heights) and relatively positioned content. Two of the javascript clocks and the table are running ahead of time in debug mode.

The test page is [obsolete link deleted]; clicking w3c css validator at bottom shows .css file.

Issues in Opera-Mac indicate all is not well:
a) table is one to two pixels wider (cut-off by overflow: hidden)
b) scrolling table div eventually "catches" and drags fixed header when it scrolls.
c) anchor "top" doesn't work from the bottom link.