Wrox Programmer Forums
Go Back   Wrox Programmer Forums > Web Programming > CSS > CSS Cascading Style Sheets
|
CSS Cascading Style Sheets All issues relating to Cascading Style Sheets (CSS).
Welcome to the p2p.wrox.com Forums.

You are currently viewing the CSS Cascading Style Sheets section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old June 10th, 2006, 04:47 PM
Friend of Wrox
 
Join Date: Aug 2003
Posts: 137
Thanks: 0
Thanked 0 Times in 0 Posts
Default Tab item display prob / hide TABS query

OVERVIEW
I'm developing a master template which will be integrated into an e-commerce software CMS. The final global nav for the site will be TAB based. Due to the final design, the width is limited to 800px, which limits the number of TABS that can be displayed in an order listed. At present I can get 10 TABS, however, there are 17 TABS to display.

PROBLEMS

1) To enable the TAB font size to be increased, there's a large background graphic of a TAB that's displayed more when font size is increased. I have noticed on hovering over the links the left corner graphic disappears for a second. How can I prevent this?


2) Rather than have two rows of TABS, I'm wanting to include a link that on clicking hides the current TABS and display another set of tabs in its place. Is this possible in CSS, or would it be best to use JavaScript?

My current test code for the nav is as follows:

Code:
<html>
<head><title>Test Navigation</title>

<style type="text/css">

ul { margin:0; padding:0; list-style: none; width:700px; float:left; }

ul li { float:left; background: url(image/tab-right.gif) no-repeat top right; }

li a { display:block; padding: 0.6em 0.5em; 
    background: url(image/tab-left.gif) no-repeat top left;
    text-decoration:none;
    color:#000; float:left; 
    }

ul a:hover { color:#fff; }

</style>

</head>

<body>
[list]
<li><a href="#">Stands and Brackets</a></li>
<li><a href="#">Aerials</a></li>
<li><a href="#">Cables</a></li>
<li><a href="#">Computer Accessories</a></li>
</ul>


</body>
</html>
http://www.mediamole.net/testnav/index.html

I would welcome any help or advise, as at present am a little clueless.

Gaz
__________________
Gaz
 
Old June 10th, 2006, 04:58 PM
Friend of Wrox
 
Join Date: Jun 2003
Posts: 425
Thanks: 0
Thanked 3 Times in 3 Posts
Default

1. Change IE's cache settings from "Every visit" to something else. Normal people won't use the "Every visit" option anyway. ;)

2. JS (+ CSS).

--
http://yupapa.com
 
Old June 10th, 2006, 08:02 PM
richard.york's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
Default

> Change IE's cache settings from "Every visit" to something else. Normal people won't use the "Every visit" option anyway.

That's not always the cause of the flicker bug, it can be more persistent when that option is checked.

For more information on the flicker bug, and for a fix see:
http://dean.edwards.name/my/flicker.html

Regards,
Rich

--
Author,
Beginning CSS: Cascading Style Sheets For Web Design
CSS Instant Results

http://www.catb.org/~esr/faqs/smart-questions.html
 
Old June 10th, 2006, 08:08 PM
richard.york's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
Default

Oh, and sometimes normal people do have that setting checked. ;) So it's best to assume it might be. People just muck about in the options menus sometimes, so rather than have people think my site is broken, I just implement the fix.

Regards,
Rich

--
Author,
Beginning CSS: Cascading Style Sheets For Web Design
CSS Instant Results

http://www.catb.org/~esr/faqs/smart-questions.html
 
Old June 13th, 2006, 12:59 PM
Friend of Wrox
 
Join Date: Aug 2003
Posts: 137
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Thanks for all your help

Gaz





Similar Threads
Thread Thread Starter Forum Replies Last Post
Sort by date...select....display first item prob athos XSLT 2 November 3rd, 2008 04:31 PM
Link Display Prob using CSS in IE6 / Firefox socoolbrewster CSS Cascading Style Sheets 3 September 7th, 2005 11:07 AM
Display Tab Name on Sheet echovue Excel VBA 2 January 14th, 2005 10:45 AM
Hide Tabs in a Form Based on a field. snoopy92211 Access VBA 1 November 18th, 2004 02:33 PM
Display/hide layers sstian99 Javascript How-To 1 September 9th, 2004 06:53 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.