Layer Problem

socoolbrewster · June 15th, 2006, 05:54 PM

I'm working on a site that uses CSS TAB hovers in an ordered list. All items in the ordered list use the same background image which is one large image at 900x900 pixels spilt into two sections - which enables each TAB to expand when text is increased.

The TABS are displayed using x2 unordered lists. What I would like to do is have the top layer fall behind the first layer. I have tried using negative margins, but because of how the TAB graphic is displayed when I decrease the margin with negative value the size just shrinks.

I was wondering if anyone has come across this problem before? and had any suggestions?

the CSS used for the TABs are as follows:

Code:

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

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

li a { display:block; padding: 0 0.4em; 
    background: url(images/tab-left.gif) no-repeat top left;
    text-decoration:none;
    color:#666; float:left; font-size:0.66em; line-height:2.5em; 
    }

ul a:hover { color:#f60; text-decoration:underline; }

And a preview of the links are available here:

http://www.mediamole.net/vivanco/master2/index2.html

And finally, on increasing the text size in IE the Vacuum Bag links expands in height, rather than going to a new line like the other TABS, why is this? is there a bug in the code?
Any suggestions?

Gaz

meow · June 15th, 2006, 06:36 PM

The Microphones & Headsets tab stacks too... Add this.

ul li { white-pace: nowrap }

The problem with the background images, does it work if you make the little white corners transparent?

--
http://yupapa.com

socoolbrewster · June 15th, 2006, 06:57 PM

Hi

Thanks for the tip about white-space, that worked a treat!

And I guess must be tired, as I thought the corners to the image were transparent doh!

Gaz

socoolbrewster · June 16th, 2006, 04:20 AM

Hi

Thanks once gain for all your help. On the subject of layering and positioning, does anyone know why the footer links at the bottom of the design fall into DIV below when viewed in Firefox? The link to the site is as above

Gaz

ceadge · August 2nd, 2006, 12:33 PM

Quote:

quote:Originally posted by socoolbrewster
Hi

Thanks once gain for all your help. On the subject of layering and positioning, does anyone know why the footer links at the bottom of the design fall into DIV below when viewed in Firefox? The link to the site is as above

Gaz

Had a quick look at the code, maybe the 35px height you specified isn't tall enough to accomodate the text? That's my first thought.