Wickham's HTML & CSS tutorial

Sitemap | Home | Search

Special effects and hacks

View in Firefox, Safari, Opera and IE but IE6 often needs different solutions. In general IE7 and IE8 display like Firefox apart from the HTML5 and CSS3 features. The IE9 & above updates are mainly related to HTML 5 and CSS3 issues and display to a large extent like other main browsers. Google Chrome is based on the same WebKit engine as Safari.

Some of the examples are provided just to show problems, others show solutions that work in most major browsers. Use the example that suits you.
red icon problems   gold icon warning: works in some situations or some browsers or needs care to display as you wish   green icon OK in Firefox, Safari, Opera, Google Chrome and IE


 

Scrollbars

1 gold icon If you want to change the color of various parts of the scrollbars, you can do it in IE with the following code in the page head (it only works in IE; scripts must be used for other browsers):-

<!--[if ie]><style> html { scrollbar-face-color: #ccccc2; scrollbar-shadow-color: #ccccc2; scrollbar-highlight-color: #ccccc2; scrollbar-3dlight-color: #ccccc2; scrollbar-darkshadow-color: #ccccc2; scrollbar-track-color: #e9e9e2; scrollbar-arrow-color: #e9e9e2; } </style> <![endif]-->

Note that it sets a style for html as distinct from the body. You can also put the code in the stylesheet like this:-

html { scrollbar-face-color: #ccccc2; scrollbar-shadow-color: #ccccc2; scrollbar-highlight-color: #ccccc2; scrollbar-3dlight-color: #ccccc2; scrollbar-darkshadow-color: #ccccc2; scrollbar-track-color: #e9e9e2; scrollbar-arrow-color: #e9e9e2; }

I have found that if it is put in the stylesheet, the stylesheet will not validate. If put in the head section of a page, both the stylesheet and the page will validate.

Most pages on this site have the code in a file called iescrollbar.inc which is included in PHP code in the head section. PHP code allows sections of code common to many pages to be put in a separate file so if any edits are required they only need to be done in one file.

Note that in my WIN 98 computer the scrollbar width is set as 13px, in WIN XP it is set at 16px and in Vista it is set at 17px in the overall appearance settings so for items 5 and 6 on the page for Images with a scrollbar I have set the object or iframe to suit 17px which means that W98 and XP show a space between the horizontal scrollbar and the object or iframe box. It appears that the iframe height needs to allow for the total height of the inserted file, 70px, plus 17px for a scrollbar to suit Vista totalling 87px but the object tag requires extra height for its border, totalling 91px to make a neat fit without a vertical scrollbar or a space.

You can check your computer:- in W98 and XP right click desktop, Properties, Appearance, Advanced (not shown in W98), Item and select scrollbar in drop down list; or in Vista right click desktop, Personalise, Window Color and Appearance, Open Classic appearance..., Advanced, Item and select scrollbar in drop down list. There is not much reason to adjust these, but the problem for webpage designers is that this is out of the control of the designer as scrollbar widths cannot be fixed with CSS; possibly only with complicated script.

Dummy vertical scrollbar for IE8 and above, Firefox, Opera, Safari and Google Chrome

IE8 and above, Firefox, Opera, Safari for Windows and Google Chrome only create a vertical scrollbar when required. This has an unfortunate effect that the page content moves sideways by the width of the vertical scrollbar when you move from one page which has little content with no vertical scrollbar to another page which does have a vertical scrollbar. IE6/7 create a dummy scrollbar if none is required so that page content does not jump sideways.

It is possible to create a dummy scrollbar for the above browsers that don't create one. Add the following into your stylesheet:-

html { overflow-y: scroll; }

The above code works in IE8 and above, Firefox, Opera, Safari for Windows and Google Chrome and is the correct solution. Another solution is to separate the html from the body and make both height: 100% and your page container height 101% which will force a standard vertical scrollbar (not a dummy) but is not quite a such a correct method as the one shown above:-

html, body { height: 100%; margin: 0; padding: 0; }
#container { width: 730px; margin: 0 auto; border: none; padding: 0; height: 101%; }


100% height for all viewport (browser screen) sizes without a scrollbar

2 gold icon If you want a background-image or color panel to extend to 100% of the viewport (browser screen) height in all situations, you have to set the style for the html and body to 100% as in html, body { height: 100%; }. The body style is for IE and the html style for other major browsers. See 100% height.


Link colors and decoration

3a green icon If you don't specify any special styles, links will use the default styles on a viewer's browser; usually blue when unvisited, purple when visited and red when hovered, all underlined.

Change the following standard colors to the ones you want and put the code in the stylesheet:-
a:link { color: #de7007; } /* unvisited link orange*/
a:visited { color: #008080; } /* visited link teal*/
a:hover { color: #996633; } /* hover link dark brown*/
a:active { color: #800080; text-decoration: none; } /* active link purple*/

The color can be the same for several, perhaps just having a different hover color. Note that text-decoration: none; will stop the underlining of the link.

If you just want one particular link to have no underline in all states (ie link, visited, hover and active), add a style to the html tag as follows:-
<a href="generaladvice.html" style="text-decoration: none">General Advice</a>

If you want a link in a particular place to have different style just for one state, create a stylesheet class code like this:-
.medium a:hover { font-size: medium; color: red }
This will enable class .medium a: hover to be different wherever the class is used, perhaps incorporated in span tags in the html file as follows:
<p>Sentence with a link in it <span class="medium a:hover"><a href="generaladvice.html">here</a></span></p>
which will make the link word "here" red and medium font size only when hovered and only where that class is coded.

If you want all link states of a certain class changed, for instance class .darkgreen to be green and have no underline, you can add them into the same style:-
.darkgreen a:link, .darkgreen a:visited, .darkgreen a.hover { color:#335500; text-decoration: none }

If you want all states of a link to be different from eachother and different from the default setting, create different classes for each state:-
The first method uses a class for a span tag (but it could be the p tag or any other element like a div):-
.newlink a:link { color: red;}
.newlink a:visited { color: blue; text-decoration: none; }
.newlink a:hover { color: green; }
.newlink a:active { color: pink; text-decoration: none; }

The class would be applied like this:-
<p>Sentence with a link in it <span class="newlink"><a href="newpage.html">page description</a></span></p>
or like this:-
<p class="newlink">Sentence with a link in it <a href="newpage.html">page description</a></p>

The second method uses a class for the a href tag:-
a.newlink2:link { color: red; }
a.newlink2:visited { color: blue; text-decoration: none; }
a.newlink2:hover { color: green }
a.newlink2:active { color: pink; text-decoration: none; }

The class would be applied like this:-
<p>Sentence with a link in it <a class="newlink2" href="newpage.html">page description</a></p>

Notice that the order of the .newlink or .newlink2 in the style must match the order in the html markup; in the first example the .newlink is before the a:link etc. so the class must be in an element before the a tag. In the second example the .newlink2 class is after the a. and before the :link etc. so the class must be within the a tag.

The solid underline can be changed to dotted like this:-
.link a:link { color: #de7008; font-weight: bold; text-decoration: none; border-bottom: 1px dotted; }
The text-decoration: none; disables the solid underline and border-bottom: 1px dotted; creates the dotted underline for all a:link only in class .link.

If you do not have an a:focus style, in Firefox the active color shows for links while the mouse button is held down on a link. In IE7 the color for the active link works while the mouse button is held down but is retained on the original page after going to the new page then returning to the original page by using the back button (not to be confused with the teal visited color used generally on this site). The active color is not retained in IE7 when returning from an anchor on the same page by using the back button but it does work in IE7 when returning from an anchor to a different original page using the back button. See General Advice for details of a:focus and outline: none; to get rid of the dotted outline in browsers except IE5 to IE7. IE8 and above behave like Firefox.


3b green icon This is the code for two links from the first column of highlighted links at the top of this page just before item 1:-

<div class="nav"><a href="#scrollbars">Scrollbars</a></div>
<div class="nav"><a href="#viewport">100% height for all viewport</a><div>

The links are all in containing divs with float: left or float: right but these are not essential to the code. The containing divs are only to show the links in three columns. The divs class .nav can be placed to form a vertical navbar as shown in each column above or can form a horizontal navbar if given float: left without a containing div. The link #scrollbars denotes an anchor to a place on the same page but it could be a normal link to an html filename or an external url.

The styles in the stylesheet are as follows:-

.nav { display: block; border: none; padding: 0; }
.nav a { display: block; padding: 5px 0 5px 15px; font-weight: bold; text-decoration: none; outline: none; }
.nav a:link { color: #de7008; background-color: #e9e9e2; } /*#de7008 orange*/
.nav a:visited { color: #008080; background-color: #e9e9e2; } /*#008080 teal*/
.nav a:focus { color: #483d8b; background-color: #ddddd2; } /*483d8b DarkSlateBlue*/
.nav a:hover { color: #996633; background-color: #ddddd2; } /*#996633 dark brown*/
.nav a:active { color: #800080; background-color: #ddddd2; } /*#800080 purple*/

Alteratively you can use a background-image with text over the top and change either the text or the background-image or both for other link states, (but the separate images will tend to flash on hover so read the link in item 3d item 2):-

.nav { display: block; border: none; padding: 0; }
.nav a { display: block; padding: 5px 0 5px 15px; font-weight: bold; text-decoration: none; outline: none; }
.nav a:link { color: #de7008; background-image: url(linkimage.jpg); } /*#de7008 orange*/
.nav a:visited { color: #008080; background-image: url(visitedimage.jpg); } /*#008080 teal*/
.nav a:focus { color: #483d8b; background-image: url(focusimage.jpg); } /*483d8b DarkSlateBlue*/
.nav a:hover { color: #996633; background-image: url(hoverimage.jpg); } /*#996633 dark brown*/
.nav a:active { color: #800080; background-image: url(activeimage.jpg); } /*#800080 purple*/

Notice that in IE7 and Firefox and other browsers except IE6 the whole div width is clickable for the links just above item 1 whereas with a normal link without the above styles only the text or image in the div is clickable. IE6 with the above styles is only clickable over the text (or image) and only shows the different background-color or image over the text or image; a:focus is to provide a different effect for viewers who do not have or cannot use a mouse to hover over the link anchor and use tabbed browsing (IE uses a:active for this effect).

A normal link is shown below in a div 300px wide (without the above styles) where only the text (or image) is clickable:-

General Advice

Empty links where there is only a background-color or background-image

The above styles with display: block are useful if you only have a background-image for a link which is otherwise empty (you may be using a background image with text or an icon as part of the background-image). An empty link with the above styles (the different background-colors for normal and hover could be background-images) will work as a link in modern browsers like IE7, Firefox, Opera and Safari for Windows but IE6 needs the addition of a height for the div and the anchor as display: block on its own does not create height.

The markup code for the above empty clickable link which also works in IE6 is:-
<div id="nav2div"><a href="generaladvice.php"><span>General Advice</span></a></div>

The styles for the above example are essentially the same as listed above for .nav but I added a height so that the whole div would be clickable and show a different background in IE6:-

#nav2div { width: 300px; height: 20px; border: 1px solid black; padding: 0; }
#nav2div a { display: block; height: 20px; background-color: #ccc; }
#nav2div a:hover { background-color: #ddd; }
#nav2div a span { margin-left: -9999px; }

A height is required for modern browsers if the divs are empty.

The span style is needed to make the link text move left off-screen so that it doesn't show on the page but screen readers for blind people will read out the text.

An alternative for screen readers is to put a title tag in the href link of an empty link:-
<div class="nav2div"><a href="generaladvice.php" title="General Advice"></a></div>
but this only works if a screen reader has been set up to read a title in this situation, which may not be the case and it creates a visible tooltip which you may not want.

See yuiblog.com for more information.


3c green icon When you have several pages that are similar in design with the same menu bar it can be difficult for the viewer to remember which page he is looking at. The menu bar can be highlighted to show the current page.

Look at this page then click the menu bar links. Whether you use the menu buttons or your back button the current page will show an orange button.

The advantage of this method is that if you have the same menu on a hundred pages you can use the same menu and put it in a PHP "include" file so that you only have to edit the menu in one file at a later date for changed or additional links. The <ul> tag is different on each page and kept out of the "include" file; all the <li> tag links are put in an "include" file.


Different button for visited or hover states

3d green icon You can use different buttons as a background image for the visited or hover states. See Different visited button for two examples.


Table cell or div color change on hover

4 gold icon This does not work in IE6 but does in IE7. However, in IE6 the text link will work normally although the cell background-color will stay the same.

width: 240px; background-color: pink;
(no height stated)
There is a link here to the Introduction and a code to change the cell color on hover in Firefox.
Azure cell width: 240px; (no height stated) Yellow cell width: 210px; (no height stated)
color change on hover in Firefox
(no link needed)

The style added into the head between style tags for the pink cell (or it could be put in a stylesheet) is:-
.linkbeige:hover { background-color: #f5f5dc; }
.linkbeige { background-color: pink; }

The code in the body is:-
<td class="linkbeige"> which replaces a standard <td> tag.


5 gold icon The following example shows the same color change on hover in a div box in Firefox and IE7 (but not in IE6). For a code that changes the background and text opacity (not the color) on mouseover in IE6 as well as Firefox and IE7 see opacity.

float: left; width: 240px; background-color: pink; overall width 248px including 2*3px padding and 2*1px border
There is a link here to the Introduction and a code to change the cell color on hover in Firefox.
float: right; width: 210px; background-color: yellow; overall width 218px including 2*3px padding and 2*1px border
color change on hover in Firefox
(no link needed)
background-color: azure; border:1px solid black; margin-left: 253px; margin-right: 223px; (no width; no float: left);
more text
more text
more text
more text
 

Animated gifs

6 green icon First make some photos the same size, then save each as a gif file. Use a free photo program like Irfanview to do this.

Then download an animated gif program like UnFREEz 2.1 from WhitSoft Development.

Open the Unfreez program, then open your file list with the gif files like Windows Explorer. The Unfreez program disappears to the system tray. Highlight two or more gif files and drag them to the Unfreez icon in the system tray but don't let go of the mouse button. A small window will open and continue to drag the gif files into the space marked "drop GIF files here". Choose an interval for the animation delay - note that it is in cs (centiseconds) so multiply the number of seconds by 100 and alter the delay. Loop animation means it will continue with the first gif photo after the first sequence. Click "Make Animated GIF" and save as a gif file.

animals animation


Favicons

7 green icon Favicons (favorite icons) are the 16px x 16px images that show on the left of urls in a browser's address bar (and on tabs in IE7 and Firefox). They also appear next to links in Favorites lists (IE) and Bookmarks (Firefox).

You can make your own or use a search engine to download free ones. You must have one that is called favicon.ico but you can then have other names for additional favicons for other pages.

The favicon.ico image should be uploaded to your root directory (the main first directory at your host where you should also have an index.html file). This is the directory that is searched if viewers just use a url like www.mydomain.com without specifying a particular folder or filename.

Some browsers only need the favicon.ico in the root directory and then apply it to every file. Others seem to need it repeated in the head of an html file with this code:-
<link rel="shortcut icon" href="http://www.mydomain.com/favicon.ico">
or just <link rel="shortcut icon" href="favicon.ico"> where your html page is also in the root directory
or <link rel="shortcut icon" href="../favicon.ico"> where ../ indicates that the link is to the same image in the root directory but your page is in a sub-directory.

Some people suggest that the following is actually more correct: <link rel="icon" type="image/x-icon" href="http://www.mydomain.com/favicon.ico"> You can use both if you want!

It is probably best to put the favicon.ico in the root directory and also use the code in the head.

If you want a different icon for individual pages, use the code in the head with a link to a different image name but it should have the extension .ico.

IE6 will not show the favicon in the favorites list until it has been added as a favorite by a viewer and it will not appear in the browser address bar until it has been added as a favorite and this favorite is used the next time. In other words it won't appear in the address bar if a viewer just types or pastes the url there rather than clicking the favorites link.
Note Microsoft's comment (regarding IE6) The only way a shortcut icon appears on a user's Favorites menu and Address bar is if the user chooses to add your page as a favorite. You can add a button or link on your page that prompts the user to add your page.

IE6 will probably not show the favicon in the favorites list if the page has been added as a favorite before the favicon was edited into the html code. It may be necessary to delete the favorite and add it again.

IE7 and Firefox will show favicons in the browser address bar and on a tab as soon as the page is loaded. It doesn't have to be bookmarked or added to favorites first. After adding to bookmarks or favorites it will appear next to the link in the list.

I have noticed that IE6 is unreliable in showing favicons. They used to show in my own IE6 browser for my own websites but disappeared even though I hadn't changed the favorites or edited the root directory or changed the favicons. The favicons still showed in Firefox and since I installed IE7 they have returned in IE7.

IE7 is also unreliable showing favicons. The favicon disappeared in IE7 after I copied all my files to a new host using the same directory structure but the favicon still showed on pages from the old host. A trick to get IE7 to show the favicon is to do the following:-
open a page where you are not concerned about the favicon;
delete IE History; open the View/Explorer Bar/History then right-click each set of dates and delete, including Today;
delete the favorite by using right-click and delete in the favorite list;
close IE and clear the temporary internet files cache from Start/Accessories /System Tools /Disc cleanup;
then open IE7 and go to the page you expect to show the favicon and you should now see the favicon in the address bar and tab;
re-set the favorite.

Another consideration with IE7 is your directory structure at your host's server. I have a primary .com domain and have little trouble showing favicons for the .com pages. However, the .net domain which includes this tutorial is on a sub-domain of the .com domain. When a page loads on the .net sub-domain it has to find the favicon on the root of the .com domain. Sometimes it showed in the address bar but never in the tab or favorites list. Even if I put another favicon in the same sub-domain directory with a revised link into the same directory there were problems. I found it was most reliable to link to the favicon in the .com root directory by an external url. That showed the favicon for .net pages in IE7's address bar and tab and after a delay has shown favicons in the favorites list.

See the following links for additional information on favicons:-
msdn.microsoft.com
thesitewizard.com
accessfp.net


Rounded or bevelled corners using images

8a green icon Make a small corner image with photo/image software (Paint that is on most computers will do it). You only need to make one corner and save it, then rotate it 90 degrees three times for the other corners and save them. It should have a background color the same as the remainder of your page and a quadrant or triangle on the inside with the color of your inner div. This example uses 10px size images. The black box just represents a page with a black body background-color and is not relevant to the code.

corner image corner image

Main Content for text and other content.

corner image corner image

The code is:-

<div style="background-color: #111111; padding: 30px; border: none;">
<!--outer box (This is only here to represent a black body of a normal page)-->
<div style="background-color: #666666; padding: 10px;">
<!--10px corner images with float: left and float: right fit at corners.-->
<img style="float: left; padding: 0px; margin: -10px 0 0 -10px;" src="images/topleft10px.jpg" alt="corner image">
<img style="float: right; padding: 0px; margin: -10px -10px 0 0; " src="images/topright10px.jpg" alt="corner image">
<p style="color: #eee; text-align: center;">Main Content for text and other content.</p>
<img style="float: left; padding: 0px; margin: 0 0 -10px -10px;" src="images/bottomleft10px.jpg" alt="corner image">
<img style="float: right; padding: 0px; margin: 0 -10px -10px 0;" src="images/bottomright10px.jpg" alt="corner image">
</div>
</div>

A slightly more complicated example is shown below:-

corner image corner image

Main Content div for text and images
Beetle Little Egret Cock pheasant

corner image corner image
 
 

The code is:-

<div style="background-color: #111111; padding: 30px; border: none;"> <!--outer box (representing body of normal page)-->
<div style="background-color: #666666; border: none; padding: 0;"> <!--div box to give inner background colour; corner images with float: left and float: right fit at corners.-->
<img style="float: left; padding: 0px;" src="images/topleft10px.jpg" alt="corner image">
<img style="float: right; padding: 0px;" src="images/topright10px.jpg" alt="corner image">
<!--The following content div slips up between corner images. It will need larger margins or padding all round to avoid content clashing with corners if they are larger.-->
<div style="color: #eee; text-align: center; border: none; padding-top: 1px;">
<p>Main Content div for text and images<br>
<img src="images/beetle200x50.jpg" alt="Beetle">
<img src="images/littleegret200x50.jpg" alt="Little Egret">
<img src="images/pheasant200x50.jpg" alt="Cock pheasant">
</p>
</div>
<img style="float: left; padding: 0px;" src="images/bottomleft10px.jpg" alt="corner image">
<img style="float: right; padding: 0px;" src="images/bottomright10px.jpg" alt="corner image">
<div style="width: 100%; clear: both; line-height: 0px; font-size: 0px; height: 0px; padding: 0; margin: 0; border: none;">&nbsp;</div> <!--This clearer div is needed to drag down background color between bottom corner images.-->
</div>
</div>

An alternative to the final clearer div is to put an ordinary div with no width and the same height as the rounded corners and this will move into the space between them and drag the background-color down between the bottom corners in the same way as the clearer div which sits below them with no height.

<div style="height: 10px; padding: 0; border: none; margin: 0;">&nbsp;</div>


Rounded corners using JavaScript

8b green icon The example below uses javascript from curvycorners.net. so it needs javascript or ActiveX enabled but will only produce rounded corners, not bevelled corners. It will also round a container border if there is one. The javascript file is here. The javascript file is huge but you don't need to edit it. The scripts in the head section of a page can be used with hardly any editing - just for the image urls and the radius as a minimum. The html code is simple.

Main Content div for text and images
Beetle Little Egret Cock pheasant

 

The script codes and html codes can be seen in the source code for this page.

The above example was based on CurvyCorners Version 1.2.9 but there is now a version 2 which mixes CSS3 styles for Mozilla (Firefox) and Webkit (Safari and Google Chrome) browsers with javascript for other browsers.


CSS3 border-radius rounded corners

8c green icon There are new codes which are part of the CSS3 standards and these will form rounded corners without images or scripts. See CSS3 border-radius for details.


Sliding doors rounded corners

8d green icon If you only want flexibility horizontally, say for menu buttons to accommodate different lengths of text, you can use the sliding doors method which uses a left background image which is just the width of the left end rounded part and a wider right background image which has the background color and the rounded right end. The two background images combined will allow horizontal flexibility. See A List Apart.


Shrink-wrapped rounded corners

8e green icon If you have several menu buttons of different sizes which need rounded corners, you won't want to create background images with different sizes for each of them. Item 8a uses four small corner images and four more for the top, bottom, left and right sides but you can use just one image as a background image for all corners. Background images only show in the space allowed for them so if you make one background image that will be large enough for all your items you can then pick out just the corners with pure CSS (no javascript). This method uses transparent corners and reduces the "extra" tags count down to just one. It also allows height flexibility which the Sliding Doors method does not.

The <li> tag holds one corner, the <a> tag the second corner, the <b> tag the third corner and finally the <em> tag the fourth corner. With the use of position: relative and negative placement you can have transparent corners as the space allowed is only the size required for the corner and the background-position places the selected corner. The center color is provided by the background image so it needs to be large enough for the largest button.

This has been tested in IE6, IE7, IE8, Firefox, Opera, Safari and Google Chrome.

Just a single image is used which can be seen here - button image and it needs transparent corners. If your background image has larger or smaller corners you will need to edit the margins, padding and positions (like left: -8px; etc.) in the style codes.

The CSS is:-

The HTML markup is:-

It means that you can add another button with a different size very quickly as the code will be the same and apply the corners from the same single image.

This code is based on code from CSSplay.


9 green icon This search box is based on code for Google's free search box adjusted for XHTML. It allows searching of your own website as well as the web. It has the standard Google results page with sponsored links. There are codes available just to search your own website without sponsored links but they are paid versions.

The Google link Google Custom Search asks you to register your website with Google using your Google account username and password. However, I copied the code from this website onto another of my websites and the search did work (for that website), so it seems that you can copy the code below and substitute your own website address. I also think that the code below is an old version which has been improved.

Google web www.wickham43.net/

The code is:-

<div class="noborder" style="width: 420px; margin: auto;">
<!-- SiteSearch Google -->
<form method="get" action="http://www.google.com/search">
<p><input type="hidden" name="ie" value="iso-8859-1">
<input type="hidden" name="oe" value="iso-8859-1"></p>
<table style="background-color:#e9e9e2;">
<tr><td>
<a href="http://www.google.com/">
<img src="http://www.google.com/logos/Logo_40wht.gif" style="border: none;" alt="Google"></a>
</td>
<td>
<input type="text" name="q" size="30" maxlength="255" value="">
<input type="submit" name="btnG" value="Search">
<input type="hidden" name="domains" value="http://www.wickham43.net/">
<input type="radio" name="sitesearch" value=""> web
<input type="radio" name="sitesearch" value="http://www.wickham43.net/" checked="checked"> www.wickham43.net/
</td></tr></table>
</form>
<!-- SiteSearch Google -->
</div>


Icon color change when scrolling

10 gold icon This shows an icon in the left margin that changes color without appearing to move. It is not a case of one icon scrolling up and revealing the other because the scrolling is by the divs while the background-images are stationary.

It does not work in IE6.

See Icon color change


Gradiated background images

11 green icon This example shows a page with a gradiated background.


Border images or shadow images all round a div

12 green icon This example shows how to code border images which could be shadows. The top and bottom borders are small corner images floated left and right with a div in between. The central section is three divs; one left div 730px wide enclosing the right div which is float: right and the content div is nested inside the right div with float: left. This is an example of how background images or colors need to be "dragged down" in modern browsers by having some content inside the div.

top left corner top right corner
 
 
 
bottom left corner bottom right corner
 
 

It is necessary to nest the #right and #centercontent divs so that the background is made to show for the full height by putting the div with the most content (#centercontent) inside the others so that the div with most height drags down the background-image of the two side divs. The content div can therefore be flexible in height and the side div images will extend to the same full height.

In the example the #shadowcontainer is width: 730px to suit my page and all the other divs are related to this width but with some adaptation it could have no width and be flexible as the background images are repeating. The height is flexible.

The styles are:-

#shadowcontainer { width: 730px; margin: auto; border: none; padding: 0; }
#topdiv { width: 696px; height: 13px; margin: auto; background: url(images/main_top.jpg) repeat-x; border: none; padding: 0; }
#bottomdiv { width: 696px; height: 13px; margin: auto; background: url(images/main_bottom.jpg) repeat-x; border: none; padding: 0; }
#left { float: left; width: 730px; background: url(images/main_left.jpg) repeat-y left; border: none; padding: 0; }
#right { float: right; width: 713px; background: url(images/main_right.jpg) repeat-y right; border: none; padding: 0; }
#centercontent { float: left; width: 690px; border: none; padding: 3px; }
/*padding of #centercontent is 3px; so width of #centercontent is 730 - shadows in #left and in #right divs 2*17px = 696 - 2*3px padding = 690px*/
.clearer { clear: both; width: 100%; height: 0px; line-height: 0px; font-size: 0px; border: none; padding: 0; }

The body markup code is:-

<div id="shadowcontainer">
<img style="float: left;" src="images/main_topleft.jpg" alt="top left corner">
<img style="float: right;" src="images/main_topright.jpg" alt="top right corner">
<div id="topdiv">&nbsp;</div>
<div class="clearer">&nbsp;</div>
<div id="left">
<div id="right">
<div id="centercontent">
<p>This is the content div<br>
This is the content div<br>
This is the content div<br>
This is the content div<br>
This is the content div</p>
</div><!--end of nested #centercontent-->
</div><!--end of nested #right-->
</div><!--end of #left-->
<div class="clearer">&nbsp;</div>
<img style="float:left;" src="images/main_bottomleft.jpg" alt="bottom left corner">
<img style="float:right;" src="images/main_bottomright.jpg" alt="bottom right corner">
<div id="bottomdiv">&nbsp;</div>
<div class="clearer">&nbsp;</div>
</div><!--end of #shadowcontainer-->

IE6 would create a small space under the top border which I have stopped by adding a conditional comment in the head section after the normal styles.

The different style for IE6 is:-

<!--[if ie 6]>
<style type="text/css">
#topdiv { margin: 0 auto -4px auto; }
</style>
<![endif]-->

A typical corner image is top left corner, a typical top or bottom section is main top section and a typical side section is left section

Here is the same code but with percentage widths so that the example is flexible in width and height.

 
top left corner top right corner
 
 

This is the #centercontent1 div which has a width of 96%; and is inside #right1 div with float: right; width: 97%; which is inside #left1 div float: left; width: 100%; which is inside #shadowcontainer1 with width: 100%;
This is the content div
This is the content div
This is the content div
This is the content div

 
bottom left corner bottom right corner
 
 

Border images or shadow images to the sides of a table or div only

13a green icon If you are using a table it is simple to put side shadow images in the side cells as they can be made to repeat vertically to match the height of the center content cell. The border images are 200px wide and 10px high.

Main center content cell; Main center content cell;
Main center content cell; Main center content cell;

The code is:-

<table width="730" cellspacing="0" cellpadding="10" style="background-color: #ffffff;"><tr>
<td style="margin: 0; padding: 0; background: url(images/borderleft.jpg) repeat-y; width: 200px;"></td>
<td>
<p style="text-align: center">Main center content cell; Main center content cell;<br> Main center content cell; Main center content cell; </p> </td>
<td style="margin: 0; padding: 0; background: url(images/borderright.jpg) repeat-y; width: 200px;"></td>
</tr></table>

The cellspacing="0" ensures that there is no space between the side background image and the center content cell while the cellpadding="10" provides padding for the center content text. The side cells have margin: 0; padding: 0; to ensure that they don't have any default cellspacing or cellpadding.


13b green icon This is another example showing how to code border images for divs which could be shadows, but only side shadows. However, whereas in a table cell the background images repeat to match the center cell height, with a div the background image has to be forced to repeat by nesting the content div with the most height inside the side divs. The containing div has three divs; one left div 730px wide enclosing the right div which is float: right and the content div is nested inside the right div with float: left. This is an example of how background images or colors need to be "dragged down" in modern browsers by having some content inside the div.

This is the #centercontent2 div. The side background images (200px wide but only 10px high) are in a #left2 div and in a nested #right2 div and the #centercontent2 div is nested inside the #right2 div so that the greater content drags down the background border images to whatever height #centercontent2 requires as #centercontent2 has no height so it has a flexible height.

The styles are:-

#shadowcontainer2 { width: 730px; margin: auto; border: none; padding: 0; }
#left2 { float: left; width: 730px; background: url(images/borderleft.jpg) repeat-y left; border: none; padding: 0; }
#right2 { float: right; width: 530px; background: url(images/borderright.jpg) repeat-y right; border: none; padding: 0; }
#centercontent2 { float: left; width: 324px; border: none; padding: 3px; background-color: #ffffff; }
/*padding of #centercontent2 is 3px; so width of #centercontent2 is 730 - shadows in #left and in #right divs 2*200px =330 - 2*3px padding = 324px*/

The body markup code is:-

<div id="shadowcontainer2">
<div id="left2">
<div id="right2">
<div id="centercontent2">
<p>This is the #centercontent2 div.........</p>
</div><!--end of nested #centercontent2-->
</div><!--end of nested #right2-->
</div><!--end of #left2-->
</div><!--end of #shadowcontainer2-->


CSS3 box-shadow and text-shadow

13c gold icon The CSS3 box-shadow and text-shadow only work in Firefox, Safari, Google Chrome, Opera and Konqueror as at 28/04/10. See CSS3 box shadow for details.


Side background images extending full height in all situations

14 green icon The examples with content height greater than window height or less than window height show how side background images can be made to extend either to the window bottom if the page content has small height or to extend to the bottom of the content div if it exceeds the window height, in all cases retaining height flexibility if the window height varies or if the content height varies, for instance if someone increases text size or adds more content.

There are therefore two different objectives:-
- to extend side background images to the window bottom in any resolution (even with little content)
- to extend side background images to the bottom of the content div whatever height it needs

In the example there is enough in the content div to exceed most window heights and to demonstrate that the side background images extend to the bottom of the content div. If most of the content in the div is deleted so that it is much less than the window height, (or in Firefox if you reduce the text size several times), the side background images will still extend to the window bottom.

If either the side background image or the content div has a fixed height the solution is much simpler but it gets complicated if total height flexibility is required and also if the side background images are required to extend to the window bottom if there is not much content.

The side images are 17px wide and 13px high and repeat vertically.

The example also retains width flexibility so that the side background images are always at the window sides whatever resolution is used.


Notes

View/Source or View/Page Source in browser menu to see all html code.

The body of this page has margin: 20px. Most divs have border: 1px solid #black and padding: 3px coded in the stylesheet tutorial.css.

The examples above are in a containing div with width: 730px; and margin: auto; so that they centralise at large screen resolutions.

A lot of codes have been put in html tags in my examples rather than in a stylesheet or in a style in the head. I have done this for the convenience of the viewer so that most (but not all) codes are in one place and the stylesheet does not always have to be viewed in addition. When coding your own page you should try to put as much as possible in a stylesheet and link with id or class to the html tag.

Remember that when a Doctype is included above the head before the html tag (as it should be) then the overall width of a div is its defined width plus borders, margins and padding widths.

If there are differences between Firefox and IE6 that cannot be overcome with one code, code first to get a satisfactory solution in Firefox then create an IF style which will only apply to IE6:-
for instance, if margin-top: 20px; in Firefox needs to be margin-top: 30px; in IE6 then put the following in the head of the html/xhtml page:-
<!--[if ie 6]> <style type="text/css"> div { margin-top: 30px; } </style> <![endif]-->
or if there are many different styles, create a separate stylesheet:-
<!--[if ie 6]> <link rel="stylesheet" href="ie6.css" type="text/css"> <![endif]-->
IE6 will contain just the amended styles such as div { margin-top: 30px; } and others (no head or body tags or Doctype).

When looking at a page source for this site you may see code like &lt;p>Little Egret&lt;/p> instead of <p>Little Egret</p>. The code &lt; is because in that instance the code is to be displayed on the screen as text. If the < symbol was placed in the code a browser would activate the code and it would not display as text. Such code is not normally required when writing html code tags which are to be activated.

© Wickham 2006 updated 2008


top | prev | next