JQuery Positioning Problem

views:

answers:

+1 Q:

JQuery Positioning Problem

Hello,

I have been trying to create a menu panel with JQuery that can be seen here by clicking the Preview button on top:

Problem:

If you hover over Link Two or Link Three, the black panel comes perfectly replacing the respective blue link, however if you hover the Link One, the black panel comes little below that link. What's wrong I am doing there? How can I fix this?

Thanks.

+4 A:

You need to account for the margin automatically applied to <ul> elements.

If you look at your page with Firebug, you'll notice Firefox applies a top and bottom margin of 16px.

Jeremy 2010-03-05 19:07:33

Correct!Add this to your CSS:ul {padding:0;margin:0}

Diodeus 2010-03-05 19:14:26

@Jer: Thanks i also zero out but forgot. Thanks :)

Sarfraz 2010-03-06 04:38:35

+1 A:

As stated above, you can apply a margin-top value of -16px to the .left class to get your intended behaviour.

http://jsbin.com/amexi/3/edit

Adnan 2010-03-05 19:14:33

Margin values are not relative to their current value. Setting the top margin to 0 would be the correct solution.

Jeremy 2010-03-05 19:21:12

Yes, as Jer said adding ul {padding:0;margin:0;} (below the 'ul#menu li a' rule) is the the correct solution.

Adnan 2010-03-05 19:26:17

To avoid stuff like this I usually zero out margins and padding at the top of my stylesheets.

Jeremy 2010-03-05 19:32:03

+1 A:

Check out http://jsbin.com/amexi/5/edit

I just can't figure out why the TOP is identical on all the popups BUT the actual position of them all is different. Makes no sense. Its almost like a negative margin.

The main problem I found is that you didnt move the popup into the position of the link + offset it to the .top + .height.

Dmitriy Likhten 2010-03-05 23:06:17

ansaurus

tags:

views:

answers:

JQuery Positioning Problem

related questions