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

Responsive Web Design

Google has an document about  How to Building Smartphone-Optimized Websites . In this document, responsive web design is the first suggestion. I have been looking for a easy to implement responsive css framework that can change my websites layout so that they can fit to smart phone device for quite a little while. However, most of them requires more than a css file.  After searching aroung, I found a good article that introducts 10 well adopted grid frameworks  10 Lightweight & Minimal Responsive Grid Frameworks Among them, the  Simple Grid  is very clean and simple. It does not work well on IE 7 or IE 8. Other than that, it works fine.  The  Proportional Grids  is also a quite stable and simple one. For a website that involves user input, I would recommend  Base Framework which is almost ready to use so that you do not have to worry about the user input formatting. It is very important to add following line to the he...
Read more