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.
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:
<body>
<img src=”images/bg.jpg” class=”bg” />
Then go to the CSS and add this:
img.bg {
bottom:0;
min-width:1024px;
position:fixed;
right:0;
width:100%;
}
Then add some exception CSS for IE6, because it doesn’t get this stuff to work well.
Today I saw something new for me:
a[title=”Home”] {
font-style:italic;
}
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.