althanis

Shame on you for stealing the pictures from the Viget Extend website. http://www.viget.com/extend

I'm using mootabs to hide and show some tabs, and I need to have one set of tabs nested within another set. Out of the box this isn't possible. I was wondering if someone would be able to help me sort out the javascript so I can get it working? Thanks.

Hey Jazzy, with respect to your first question, you would not normally apply padding to regular divs that you're using for layout purposes. To prevent elements within the div from butting up against the sides of their containers, you would apply left and right margins to those elements (like paragraphs, unordered lists, etc.). Paddings would also give you a similar effect, but margins are better. Not sure what you're trying to ask in your second question though.

You could also do padding: 5px; And that will apply a 5px padding to all four sides. Try as much as you can to use shorthand CSS to cut down on the sizes of your CSS files and make them more readable.

That was very clever, it worked, thanks a lot! However for IE7 I had to remove the position static from: ul#topnav li:hover, ul#topnav li.hover { position:static; } to get it to work. I had to use that to overcome an IE7 bug that stops the drop downs from hiding after the focus is changed on the page, so I'll have to go look for an alternative.

Thanks for the suggestion Elan, but I'm already using Eric Meyer's reset. Changing the value to left: 5px makes all of the nested UL's appear 5px to the left of their parent container, so they're all dropping down at the far left of the horizontal navigation bar.

I can't say enough of Eric Meyer's reset, you should really use it. While you'll have to add margins and paddings for every element that you'll have to use eventually, it makes those settings consistent across all browsers so you'll have very few problems when it comes to layout and alignment issues between browsers like FF and IE. So in the long run it is definitely worth it. And using * also targets your forms and resetting paddings and margins there is not really necessary.

Hey, I had a very similar problem at one point and used this to write some css to target only Safari, it should be exactly what you're looking for: http://rafael.adm.br/css_browser_selector/

Hey Guys, I'm using the Sons of Suckerfish to create a single level dropdown menu for a site and it's working perfectly in Firefox and Safari. However the dropdown items are not appearing directly below navbar items when hovered in both IE6 and IE7, they are appearing more toward the top and to the right. Any idea on how to fix this? I cannot post a direct link to the site for privacy reasons, but I'll provide the code and kindly ask for you help all the same: ul#topnav { padding: 12px 0 0 30px; margin: 0; list-style: none; } ul#topnav li ul li a { display:block; width: 10em; } ul#topnav li{ float: left; margin-right:35px; /*to create some spacing between items*/ } ul#topnav li ul{ position: absolute; width: 10em; left: -999em; list-style: none; margin-left: 0; padding:8px 5px 0 0; } ul#topnav li:hover ul, ul#topnav li.sfhover ul { left: auto; } I've used some paddings/margins on some elements to align them properly and give them some breathing room. Thanks for reading, I'd appreciate any help!