TechBuji.com

Xenocode Browser Sandbox is a great tool to test web pages in different browsers. You need not use 3 different machines to test websites in IE6,IE7 and IE8.  You can run any number of browsers from your machine.

All you have to do is go to www.xenocode.com/Browsers , click on the browser’s icon which you have to run. They will prompt you to install a plugin (spoon plugin). After installing the plugin, restart your browser and click on the browser’s icon again and the browser will be started.

You can run IE6, IE7 and IE8 simultaneously.

Plus Points : Great tool. Saves a lot of time. You can start the browsers from Firefox also.

Drawbacks : They frequently update the plugin. So you will have to install the latest plugin frequently. And the plugin exe will be run every time you start Windows. You will have to manually remove that from msconfig. And some text boxes in IE6 wont work properly when run through Xenocode. I have seen IE6 crashes also.

The fix is posted in http://wordpress.org/support/topic/170320?replies=12#post-741557.

I am just copying it for easy reference.

Look in thickbox/thickbox.css

Around line 50, change all the below

#TB_window {
position: fixed;
background: #ffffff;
z-index: 102;
color:#000000;
display:none;
border: 4px solid #525252;
text-align:left;
top:50%;
left:50%;
}

To

#TB_window { /* my IE7 Hack*/
position: fixed;
background: #ffffff;
z-index: 102;
color:#000000;
display:none;
border: 4px solid #525252;
text-align:left;
bottom:10%;
left:50%;
}

Here is a simple fixed width css rounded box.

Download Live Example

Sample Rounded Box

The Rounded Box will look like this. This rounded box uses two background images, one at the top and the other at the bottom.

HTML Markup

<div class="rbox">
<div class="heading"> Rounded Box </div>
<div class="boxContent">
Your content goes here
</div>
</div>

CSS Code

.rbox {
width: 188px; /*The width of the images */
background-image: url('rboxBottom.gif');
background-position: bottom;
background-repeat: no-repeat;
border-bottom: solid 1px white; /*If this is omitted, it wont work in Firefox*/
}
.rbox .heading {
padding-left: 10px;
background-image: url('rboxHead.gif');
border-bottom: solid 1px #cccccc;
}
.rbox .boxContent {
margin-bottom: 18px; /* The height of the bottom image*/
border-right: solid 1px #cccccc;
border-left: solid 1px #cccccc;
padding: 10px;
}

Download Live Example