I want to have a one-pixel one-color solid border around a table and its cells. Adding
border="1" to the
table tag isn’t suitable, because it looks horrific in most of the browsers.
Solution with HTML only
Back in the old days we used to use just HTML to create a one-pixel border. Some people even used 1×1 pixel transparent gifs, but let’s not go into that. The easiest way to achieve the border was to use nested tables: outer table that provides the border color and inner table that holds the content.
Here’s an example:
Looks pretty fine, doesn’t it? However, let’s look into the code:
If you want to add an image that resizes according to the monitor or the browser size just follow the steps:
First put the image exactly after the opening <body> tag:
<img src=”images/bg.jpg” class=”bg” />
Then go to the CSS and add this:
Then add some exception CSS for IE6, because it doesn’t get this stuff to work well.
Today I saw something new for me:
And it’s applied to an element which has the title Home in my case it was:
<a title=”Home” href=”#”>Something</a>
So there is a way to style elements by their title, no need to add a class or id in such case.
I tested on most browsers and it works exceps of IE6, but who cares of this old browser.