Here's a question for those with really great minds in CSS. I tried all day at work on Friday and I think I gave my brain a hernia! 
I want to combine two techniques if at all possible. I'd like to use 'CSS Sprites' <!-- m --><a class="postlink" href="http://alistapart.com/articles/sprites/">http://alistapart.com/articles/sprites/</a><!-- m --> and 'Sons of Suckerfish Dropdowns' <!-- m --><a class="postlink" href="http://htmldog.com/articles/suckerfish/">http://htmldog.com/articles/suckerfish/</a><!-- m --> at the same time. I'd like to have a menu with buttons of differing lengths that display both a rollover state as well as a drop down menu. I don't want the buttons to be just solid-colored buttons. Instead I've created the graphics I'll use with the 'CSS Sprites' technique. I've gotten that to work on another project in the past but I'd to combine these two. Can it be done?
Here's a page to look at. <!-- m --><a class="postlink" href="http://www.purevolume.com/">http://www.purevolume.com/</a><!-- m --> Take a look at their top menu buttons. How did they do that there? Maybe I'm going about this the wrong way.
Thanks in advance!You only need to use the suckerfish dropdown for this not the css sprites i assume you would for the graphical bit of the menu just set that for the list property then set the sub list property different.I agree that all I'd need to use is Suckerfish Dropdowns for the submenu, but what about the rollover state of each button? Or maybe I totally misunderstood what you were saying...Unless ive read the post wrong for the rollover state all you need is the small piece of DOM scripting provided by ALA but that is only needed for the less standards compliant browsers that dont support the hover psuedo on other items that arent links.
Hope the long winded explanation helped.Here's a page (with some screwed up results) for you to look at.
TO Management System (<!-- m --><a class="postlink" href="http://members.cox.net/williamsray/toms/TOMS.html">http://members.cox.net/williamsray/toms/TOMS.html</a><!-- m -->)
And here's the culprit: the screwed up CSS.
The Culprit (<!-- m --><a class="postlink" href="http://members.cox.net/williamsray/toms/toms.css">http://members.cox.net/williamsray/toms/toms.css</a><!-- m -->)
I used just the code for Suckerfish Dropdown Menus, but had to make slight changes. Instead of each button being the same length, they were differing so each button has its own class.
Where it gets screwy (it's very obvious, if you've looked at the site already) is the first and second dropdown. The other three work as intended for now. The dropdown shows up BELOW the text. For the first two, the dropdown CUTS OFF part of the graphic. Can you tell me how to fix that? Also, the :hover isn't working like I want it to. Instead of the button changing, the links in the dropdown are displaying the alternate image.
Will someone look at the code and tell me what I've gotten wrong? I'd be very grateful!Im afraid im not good enough to find why this is doing it but ray/lavalamp/paul jr/pyro and more will definatly able to help cuz there real good with css.Take a look that this update in FF. I think I've got it! (It only works in FF for now because the JavaScript is incorrect. And you have to have the JS for IE to display it.)
Rollovers AND Dropdowns! (<!-- m --><a class="postlink" href="http://members.cox.net/williamsray/toms/TOMS2.html">http://members.cox.net/williamsray/toms/TOMS2.html</a><!-- m -->)
Here's the CSS (<!-- m --><a class="postlink" href="http://members.cox.net/williamsray/toms/toms2.css">http://members.cox.net/williamsray/toms/toms2.css</a><!-- m -->) if anyone is interested.
Now that I think I've answered my own question, will someone please help me with the JavaScript for IE? Everyone that will use this application will be using IE. I know nothing about JavaScript.
I want to combine two techniques if at all possible. I'd like to use 'CSS Sprites' <!-- m --><a class="postlink" href="http://alistapart.com/articles/sprites/">http://alistapart.com/articles/sprites/</a><!-- m --> and 'Sons of Suckerfish Dropdowns' <!-- m --><a class="postlink" href="http://htmldog.com/articles/suckerfish/">http://htmldog.com/articles/suckerfish/</a><!-- m --> at the same time. I'd like to have a menu with buttons of differing lengths that display both a rollover state as well as a drop down menu. I don't want the buttons to be just solid-colored buttons. Instead I've created the graphics I'll use with the 'CSS Sprites' technique. I've gotten that to work on another project in the past but I'd to combine these two. Can it be done?
Here's a page to look at. <!-- m --><a class="postlink" href="http://www.purevolume.com/">http://www.purevolume.com/</a><!-- m --> Take a look at their top menu buttons. How did they do that there? Maybe I'm going about this the wrong way.
Thanks in advance!You only need to use the suckerfish dropdown for this not the css sprites i assume you would for the graphical bit of the menu just set that for the list property then set the sub list property different.I agree that all I'd need to use is Suckerfish Dropdowns for the submenu, but what about the rollover state of each button? Or maybe I totally misunderstood what you were saying...Unless ive read the post wrong for the rollover state all you need is the small piece of DOM scripting provided by ALA but that is only needed for the less standards compliant browsers that dont support the hover psuedo on other items that arent links.
Hope the long winded explanation helped.Here's a page (with some screwed up results) for you to look at.
TO Management System (<!-- m --><a class="postlink" href="http://members.cox.net/williamsray/toms/TOMS.html">http://members.cox.net/williamsray/toms/TOMS.html</a><!-- m -->)
And here's the culprit: the screwed up CSS.
The Culprit (<!-- m --><a class="postlink" href="http://members.cox.net/williamsray/toms/toms.css">http://members.cox.net/williamsray/toms/toms.css</a><!-- m -->)
I used just the code for Suckerfish Dropdown Menus, but had to make slight changes. Instead of each button being the same length, they were differing so each button has its own class.
Where it gets screwy (it's very obvious, if you've looked at the site already) is the first and second dropdown. The other three work as intended for now. The dropdown shows up BELOW the text. For the first two, the dropdown CUTS OFF part of the graphic. Can you tell me how to fix that? Also, the :hover isn't working like I want it to. Instead of the button changing, the links in the dropdown are displaying the alternate image.
Will someone look at the code and tell me what I've gotten wrong? I'd be very grateful!Im afraid im not good enough to find why this is doing it but ray/lavalamp/paul jr/pyro and more will definatly able to help cuz there real good with css.Take a look that this update in FF. I think I've got it! (It only works in FF for now because the JavaScript is incorrect. And you have to have the JS for IE to display it.)
Rollovers AND Dropdowns! (<!-- m --><a class="postlink" href="http://members.cox.net/williamsray/toms/TOMS2.html">http://members.cox.net/williamsray/toms/TOMS2.html</a><!-- m -->)
Here's the CSS (<!-- m --><a class="postlink" href="http://members.cox.net/williamsray/toms/toms2.css">http://members.cox.net/williamsray/toms/toms2.css</a><!-- m -->) if anyone is interested.
Now that I think I've answered my own question, will someone please help me with the JavaScript for IE? Everyone that will use this application will be using IE. I know nothing about JavaScript.