Need the tabs to be "under" the #wrap

[Susie]

URL: http://bit.ly/gLgj2Z

 

See the 3 tabs on the right side of the page? I want those to appear "under" the #wrap div. I tried using z-index, but it didn't work. What am I missing?

[virtual]

Remove the z-index from #wrap and give the .tabs a negative z-index.

[Susie]

That works! But now the jquery slide out isn't working. Do you know how I might be able to make them work together? The slide out tabs are based on this: http://tympanus.net/codrops/2009/11/30/beautiful-slide-out-navigation-a-css-and-jquery-tutorial/

[virtual]

Were they working before modifying the z-index?

 

You might need to rearrange your calls to Jquery. CSS stylesheets come before the jQuery, and the jQuery library comes before your custom script.

Edited April 15, 2011 by virtual

[Susie]

Yeah, they were working before the z-index was applied.

 

I have the jquery in the head appearing after the calls to CSS. What you see in the footer is related to the wp_cycle plugin that controls the slideshow on the home page.

[virtual]

Yes I realized that after and edited my post. I'm not quite sure what is happening but they are halfway working, they slide back in on page refresh???

[Susie]

Yeah, that part is working. Ugh.... this is killing me.

 

Plus, I've got issues with the bottom widget area (the part in dark gray). On long pages, the bottom gets cut off. On short pages, it displays just fine. I know it's a silly error somewhere, but I can't find it! Nevermind the fact that the whole section is supposed to sit at the bottom right on top of the footer.

Edited April 15, 2011 by Susie

[virtual]

Are you looking at it in IE? Because I don't see your page length issue in Firefox Mac

[Susie]

No, I'm using Firefox 4. You don't see a difference between these 2 pages?

 

http://bit.ly/gLgj2Z

 

http://bit.ly/gzUAUw

[virtual]

Just a thought, the tabs do animate, try changing the 'marginLeft'; settings to positive. Or just wait till Ben gets here and he'll sort you out quicker than I can....

[Susie]

That didn't work either. Hmmm....

 

Oh, Beeeennnnnn.....

[Susie]

BTW, thanks for taking a look, Lynne. I appreciate it!

[virtual]

Yes of course, you mean your footer doesn't stick to the bottom. Have you tried the http://ryanfait.com/sticky-footer/

[virtual]

Sorry I can't be of more help.

[Susie]

Actually, the footer does stick to the bottom. The part that is white and has some links on the left and the copyright stuff on the right is the footer....

[virtual]

I'm seeing this - Firefox 3.6

[Susie]

Right - the footer at the very bottom is only 30 pixels high. That gray widget area should sit directly on top of the footer. And on long pages, the gray is cut off....you don't see the bottom dashes nor is the content properly padded....

[virtual]

Ok I missed the point before.

I think you might have a case of "collapsed margins".

http://www.complexspiral.com/publications/uncollapsing-margins/

http://reference.sitepoint.com/css/collapsingmargins

[Susie]

I don't know....I tried adding padding and borders and it didn't work for me. If I add enough padding for it to look right on the long pages, it's too much for the ones on the short pages.

 

Thanks for trying, Lynne.

[Susie]

Well, I just added a 30px bottom margin to #home-bottom-widgets and it seems to have solved it. But I'm not sure if it's the correct way to do it. I hope it won't negatively affect other pages down the road...

[grabenair]

not sure but what I do when i have a page of different lengths is make a new css rule for this document only and use the same name . That way in the cascade the new one will be at the bottom and the height only effects that page only effect that page. An example of this http://www.roxanesmarine.com