CODEWITHSUNDEEP
htmlcsspositioning
Matt Elhotiby
Matt Elhotiby

Reputation: 44066

Upper span is moving the lower span...Why is that

I have this page that i am working on and as you can see there are four images...if you look at the lower left booda...it has two links view Booda dog and view Booda cats. If you click the top one the bottom link moves to the left...i for the life of me cant figure out how to fix this. I am using position relitive. Here is some of my css

.booda a.button_below {
        left: 107px;
    position: relative;
    top: 64px;
}

.entry .booda a.button {
 position: relative;
    right: 13px;
    top: 31px;
}

there is other css if you view it in firebug

any help will be greatly appreciated ...thanks in advance

Upvotes: 2

Views: 123

Answers (3)

No Results Found
No Results Found

Reputation: 102735

I'm not sure what exactly is going on, but changing the bottom button class from button_below to button and giving it clear:right fixed it for me.

Hope this gets you closer to a solution!

Upvotes: 1

diedthreetimes
diedthreetimes

Reputation: 4115

It looks to me like it has to do with the text size changing when the link is highlighted.

When the upper span is selected the span is enlarged and the bottom span is shifted to align properly.

Try aligning the spans on the right instead of the left.

EDIT: To align a span to the right you can add this to your current span tags.

position: absolute; right: 0;

But you have to switch to an absolute position. To continue using relative positioning you can wrap the spans in a single container that has position: relative

Upvotes: 1

dtbarne
dtbarne

Reputation: 8200

Don't use position: relative with top and right. Use position: relative on their container and then position: absolute on those spans.

Upvotes: 1

Related Questions