4

I have menu made with Superfish jquery plugin http://users.tpg.com.au/j_birch/plugins/superfish

But i have some problems with that, it is added padding when i view my page in Firefox, Chrome and IE:

enter image description here

Here is the jsfiddle sample http://jsfiddle.net/YsG97/2/ May be some one may suggest how to remove this spacing between Superfish menu ul and header div?

and there is strange thing i indecently find out, if i put &nbsp after menu closing tag: </ul>&nbsp; it is fixed spacing in Firefox, don't know why. May be some one may explain?

jason
  • 379
  • 1
  • 8
  • 18
  • That is super weird. I solved it by removing the superfish.css then setting `.sf-menu div { float: none; }`.. but obviously you _need_ the superfish.css and this doesn't work with it included.. – Kyle Sep 19 '11 at 12:32
  • @Kyle Sevenoaks currently i am trying to make it work without that css , but having problems with popuping ul's – jason Sep 19 '11 at 12:42
  • http://jsfiddle.net/Kyle_Sevenoaks/YsG97/3/ see it as you like here _without_ the included superfish menu css. – Kyle Sep 19 '11 at 12:44
  • There is also this solution which works very well http://stackoverflow.com/a/9727799/1197092 – Gandalf Mar 23 '12 at 14:49

2 Answers2

5

Here you go:

#menucontainer {
    ...
    vertical-align: top;
}

Live demo: http://jsfiddle.net/YsG97/5/

The #menucontainer DIV has display: inline-block set, which effectively makes it an inline element. Inline elements are by default aligned to the baseline, which means that there will be space below them (between the baseline and the descender):

http://vidasp.net/media/CSS-vertical-align.gif

Šime Vidas
  • 182,163
  • 62
  • 281
  • 385
  • You cant imagine how much time i spend to make it work, and i did, but a bit another way. Anyway i am rolling back to use `vertical-align: top;` instead, like you suggested, it is working for me. – jason Sep 19 '11 at 14:39
1

If you add a clearing element after the closing ul tag, it matches up to the bottom. there is a problem with the floats, not sure what the problem is but this fixes it (although with increased height in the #menucontainer div.

See here.

Kyle
  • 65,599
  • 28
  • 144
  • 152