Rounded corner div using tables



After spending some time googling the approach to create rounded corner, I can not find any method that can extend horizontally and vertically without limitation. Therefore I start to create my own using tables and css.

The following is the html/css that works in FF 3.0, Chrome 4.0 and IE7.


table.padded-table
{
border-collapse: collapse;
width:100%;
}

table.padded-table tr, td
{
padding:0px;
spacing:0px;
}

td.td1,td.td3, td.td7, td.td9
{
width:5px;
height:5px;
}
td.td1
{
background: url(topleft.png) no-repeat right top;
}

td.td3
{
background: url(topright.png) no-repeat right top;
}
td.td7
{
background: url(bottomleft.png) no-repeat right top;
}
td.td9
{
background: url(bottomright.png) no-repeat right top;
}

td.td1,td.td2,td.td3, td.td4 , td.td5 , td.td6 , td.td7, td.td8 , td.td9
{
background-color:#BCFFBC;
}
td.td2
{
border-top: solid 1px #cccccc;
}

td.td4
{
border-left: solid 1px #cccccc;

}
td.td6
{
border-right: solid 1px #cccccc;

}
td.td8
{
border-bottom: solid 1px #cccccc;

}

Comments

Post a Comment

Popular posts from this blog

Javascript Hosted on Google Drive Not Working Reliably

Here is the story. I have been using Google Drive to host the javascript files and stylesheet files all the time. It works perfectly, until a few days ago when I noticed that if the web page contains javascript files hosted at Google Drive, it can not be viewed properly from the Facebook built in web browser.  I did some further investigation. The same thing happened when the page is opened in Wechat built in browser.  However, the page works fine when it is opened in most browsers, like IE, Chrome, Firefox. It took me several hours to figure why. And So far I have not find out the reason. I checked the mime type of the files. They are correctly recognized by Google Drive. But the solution is: moving the files out of Google Drive. Now it works perfectly, in browser and in App built in web browsers as well.
Read more

Newsmag Theme and External Featured Image

The  NewsMag  wordpress theme is a fast and simple.  It is excellent for a news, newspaper, magazine, publishing or review site. It also supports videos from YouTube and features a rating system. It uses the best clean SEO practices, and on top of that, it’s fast, simple, and easy to use. In addition, News mag supports responsive Google Ads and AdSense. The problem I had with this theme is that it does not work with  Nelio External Featured Image  by default. You can follow the steps in this article to make the theme and the plugin work with each other Nelio External Featured Image Not working with Newsmag theme Another useful information is here:  Solution fix thumn for theme Newsmag when using module Nelio External Featured Image Unfortunately whenever the theme is updated, the update to the theme will get lost. Therefore it is not a good idea to use the   Nelio External Featured Image  plugin. After some research, I found a...
Read more

How to clear MS SQL Server Database log file on GoDaddy

GoDaddy does not allow webmaster to clear the MS SQL Server database log file. And the Database file size is limited to 200 MB. I used to call GoDaddy to truncate the log file. However, it is really time consuming. Using following workflow I can successfully truncate my SQL Server log file. 1. Create a new MS SQL Server DB name it as NDTemplate.  2. Backup this database as an empty database. The backup file is about 1.6MB 3. Backup the original DB that you need to truncate. At my case this backup file is about 200MB. 4. Generate database script for the full database, and execute this sql script against the empty database. 5. Export the data in the Database to the new DB 6. Backup the new DB again and restore it against the original DB. Now the database will have all the data and structure. But the log file is minimized. It will only include the initial insert log.
Read more