1. So far Ive managed to do it all with background images and css, no JS in site (i would like to keep it that way if possible). I cant seem to get the top of the sub menu to marry up properly with the bottom of the tabs. Ive tried changing the sub-menu-top.png so it is thicker where it would join the tab, but this breaks if the tab is wider. Any suggestions on how to make this dynamic?
2. It seems to work fine in all browsers - except IE6 (big surprise). My knowledge of IE6 hacks is limited. Any suggestions? JS would be fine for this little problem if that works.
3. Finally - you will see on the mockup that the rollover on the submenus has a background colour that goes all the way to the edge of the submenu block. Ive tried to make this work, but the padding seems to break it. Any ideas how I could do this?
This has definitely been the most frustrating part of the site so far! but it seems almost there :) Just need help from some experts!
Hmmmm. . . For number 3, you could probably use a negative left and right margin on the anchor, and then put positive left and right padding for the same amount. IE6, well, I'm not even sure if this is possible. I'll work on this more this afternoon, when I have some free time. Cliff
thanks Eric, but unfortunately this does not work with my requirements (although I concede it is a more elegant solution). The problem being that i have a patterned background that needs to show through,and using the border radius requires that small block of colour on the corners to work.
planetbob - no offence, but surely a new post is required?
Well, it seems the other guys have answered most of your problems, unless I'm misunderstanding something. There's an article somewhere on css-tricks that talks about the flared borders you want. It uses pseudo elements, I'm sure you'll find it after searching for a while. -Cliff
Ive been working on this menu for a little while now, and Ive made some progress that more or less works with my original vision:
http://www.users.on.net/~plaedien/Screen shot 2011-08-30 at 2.19.43 PM.png
I have a couple of questions though, as I cant figure out a way to implement some elements.
Here is the test site
http://www.users.on.net/~plaedien/PD_test/index.htm
1. So far Ive managed to do it all with background images and css, no JS in site (i would like to keep it that way if possible). I cant seem to get the top of the sub menu to marry up properly with the bottom of the tabs. Ive tried changing the sub-menu-top.png so it is thicker where it would join the tab, but this breaks if the tab is wider. Any suggestions on how to make this dynamic?
2. It seems to work fine in all browsers - except IE6 (big surprise). My knowledge of IE6 hacks is limited. Any suggestions? JS would be fine for this little problem if that works.
3. Finally - you will see on the mockup that the rollover on the submenus has a background colour that goes all the way to the edge of the submenu block. Ive tried to make this work, but the padding seems to break it. Any ideas how I could do this?
This has definitely been the most frustrating part of the site so far! but it seems almost there :) Just need help from some experts!
cheers,
KArl
Cliff
planetbob - no offence, but surely a new post is required?
Thanks guys for the suggestions though!
-Cliff