Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
-
Hi
I created a site some time back with a drop down menu (www.inzpire.com) which now breaks in ie 7 using the csshover.htc technique. I have managed to fix the positioning problem, but it is now really difficult to click on the links in the dropdown as there is about a pixel gap between each list item which I can't seem to get rid of. I have uploaded the new page with the 'semi-fix' here: http://www.inzpire.com/index_new.php. I felt I was making progress but have hit a brick wall with this part. If anyone has encountered this as a problem before and has managed to find a work around, I'd be really grateful if you were able to share it!
Many thanks
Vicky -
- CommentAuthordmitryseliv
- CommentTimeMay 7th 2007
I bet it's padding value that you have there.
remove it and just use line-height: to adjust horizontal text position.
Also I don't understand why you build the top menu this way with so many
ul just bunch of extra code which doesn't make any sense.
Cheers, DS -
Hi DS
Many thanks for taking a look. I've removed all the padding and it doesn't make a jot of difference, so I'm not sure what it is which is making the dropdowns so 'unsticky'. It's fine in FF and IE6, but it's just IE7 which seems to totally break it. I'll persevere and post back if I find a solution. Right now it's driving me nuts...
Many thanks again
Vicky -
Finally I got to the bottom of the problem. It was actually a 'height' and line-height' attribute which was causing the issue. I removed it by chance as I had included some longer submenu items which were wrapping and the second line wasn't visible. As soon as they were removed, the whole problem vanished! In case anyone else is struggling with something similar, the old page with the problems (mentioned in first post) is still live, and the newer version pages with the corrected css are at www.inzpire.com/web2 and will be for the next week or so.
Vicky -
To my mind, it was unnecessarily complicated...
http://www.thexman.net.nz/test/navigation.html -
Thanks x.man
Wow, I love the simplicity of your example. It works great in FF and IE7, but sadly falls apart in IE 6.0, IE 5.5 and IE 5.01 (the only ones I tried it in). Thanks so much for taking the time to put that together - it's a great example nevertheless.
Vicky -
- CommentAuthoraxe_sosharp
- CommentTimeMay 10th 2007 edited
The the.x.man page looks like an example of the Suckerfish method. However for it to work in IE6 and below it needs a little JavaScript because they don't support li:hover state.
The full method is here:
http://www.htmldog.com/articles/suckerfish/dropdowns/
Here is an example of it:
http://www.vantagedevelopments.co.uk/template.1.php?30 -
Sorry about that Vicky- I didn't bother with the JavaScript because I was only aiming to clear the IE7 issue, although in reality, I guess it was only laziness on my part...
And yes, I originally learned that method from the (famous?), Suckerfish example. -
Thanks guys - I'm going to give it a shot with the javascript.
1 to 9 of 9