s for this that are able to grow if the user enlarges the text. Here is how they look:
diff-tabs-top-wide.gif
diff-tabs-bottom-wide.gif
You''ll notice that both the hover background and the default background are saved as 1 gif file. This way the hover effect will go smooth without interuption. The entire image is loaded and the browser doesn’t have to load the hover images on the moment the user hovers the box. To be sure the box can grow we save the bottom part of the box and the top part of the box, making it long enough to be sure there will be no gaps (till a certain enlargement).
The CSS styles
The unordered list “differences”
This is the CSS for the list starting with the unordered list of the 4 boxes. To prevent the margins to collapse I’ve added float:left.
#differences {
margin:0.5em 0 1.5em 0;
padding:0;
list-style:none;
width:100%;
float:left;
}
The li element styles look like this:
#differences li {
margin:0 18px 0 0;
padding:0;
float:left;
background:url(../images/diff-tabs-top-wide.gif) no-repeat 0 0;
}
I add a right-margin of 18px to create a
|
