skip to content

Cross browser tabbed pages with embeded links

20th March 2006

For IE5.5, IE6, IE7 beta, Opera 8, Firefox 1.5

For Netscape 8 & Firefox 1.0.4



NO javascript - just CSS - and it validates


Information

Based on my recent selection of dropdown and flyout menus this is a method of displaying several pages just by hovering over tabs. As with my menus this works in Opera, IE5.5, IE6, IE7 beta & Firefox. It should work in Safari 1.3.2 and Firefox 1.0.4 but will not work on Mac IE5.

Just hover over the tabs to display a page of text with a picture and embeded links. A working scroll bar is added for each page as required.

24th March 2006

To please Netrscape and hopefully FF 1.0.4 users I have added a second set of tabs that do not use scroll bars.

Cascading Style Sheet

If you look at the header of this page you will see that the normal method of loading a file is used for the non-ie browser css files.

The first tab set

<link rel="stylesheet" media="all" type="text/css" href="css/one_page.css" />

The one_page.css file

The second tab set

<link rel="stylesheet" media="all" type="text/css" href="css/two_page.css" />

The two_page.css file

The IE only style sheets are loaded using the conditional comment.

<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="css/one_page_ie.css" />
<link rel="stylesheet" media="all" type="text/css" href="css/two_page_ie.css" />
<![endif]-->

The one_page_ie.css file

The two_page_ie.css file

The xhtml

The xhtml code for the first tab set can be seen here in text format.

The xhtml code for the second tab set can be seen here in text format.

You will see that conditional comments have been used to hold the IE specific version of the tab set which used nested tables. The other browsers will not see the tables and instead will use the normal unordered lists.

Please note that you will also need a standards compliant !doctype for this menu to work correctly.

Copyright

Because of all the time and effort spent in producing this demonstration I would ask that you respect my copyright.

1. If you are using this on a personal web site then please add a link back to CSSplay and retain any copyright comment in the stylesheet.
A donation to the 'Support CSSplay' fund would be appreciated.

2. If you are using this on a commercial web site, or as a paying job for a client, then please email me asking for permission - stu{at}cssplay.co.uk and in this case a donation to the 'Support CSSplay' fund is required.

3. If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.




CSS play recommend

Creative stock imagesSitegrinderSocial Media Applications On DemandPSD to HTML, PSD to XHTML Service by PSD2HTML.com. You Design - We XHTML / CSS.Free, practical CSS menus, layouts, and examplesFlash LoadedBitrix Site Manager