Ok I made links that have a hover which puts the link in a border.

see http://www.thelnews.com/fiorelladesigns/index.html

the navigation

but you can see the links are very spread out and they move when you hover over them

How can I fix this so they are normal links like close together.

Thanks
ben

You're changing the layout properties of your links as a result of manipulating a border that doesn't always exist. So:

a:link,a:visited {
border: 0;
padding: 1px;
}

a:hover,a:active {
border: 1px solid rgb(214,166,3)
padding: 0;
}

That did nothing

Any other ideas


Thanks

you have anchors inside #navcontainer as block elements which will put a implied line break, <li>s already have an implied line break AND you have a <br> after each <li>

So 3 line breaks per nav and it isn't surprising there are gaps.

Thanks, that took care of the spacing.

But when I hover over the links it pushing the link and the image below it down a little. The links move

How do i fix that?

Thanks

Ok I fixed that, now the only time it moves is when you roll over a visited link.

Please Help
Thanks

a.nav:visited
{
color:#888888;
text-decoration:none;
padding:2px;

The other pseudo classes only have 1 px padding. You have to make everything consistent or you get the little shift. You also have to compensate for the fact that the normal state has no borders and your hover states do.

No,

a.nav:link

has to have a padding of 2px

and

a.nav:hover

has to have a padding of 1px

Because hover also has a border of 1px


Everything works except a visited link. Then things move.

Fine.. but I told you, your VISITED style has a 2px adding.. of course it's going to jump !

I wasn't being mean about it. I'm just saying it doesn't work.

How do I fix it?

Thanks

read your style sheet for goodness sake

visited has padding of 1px all round

all others have 2px all round or 1px padding plus a 1 px border

THEREFORE visited links are 2px SMALLER than all the others

Im not stupid, no matter what I change it to nothing works.

I have made the padding on visited links 0, 1, 2, 3px's nothing works.

So apparantly what you fail to tell me is not that obvious.

you are using thin for border width, thin does NOT equal 1 px

As I said read the style sheet, then understand the differences.
Yes, we can simply post verbatim solutions to problems but in the long run it doesn't help you with learning how to solve problems, or how to avoid future issues.

One piece of advice I was given by my college lecturer was to "always treat the person before you as an idiot" Which translates to "never trust their work until you have checked for yourself"
The same holds true for your own work, check it and check it again.


Also the order of your pseudo elements is wrong it should be

Link
Visited
Hover
Active

LoVe HAte

There, I fixed it...

Thanks for all of your help, I really do appreciate it.

Ben

Curious Question: Would the problem with the shifting not occured because of the box model difference with IE/FF?

I thought that IE includes the width of the border in the total width whereas FF adds it on to the total width. Is that not right??

Also... Lunchbox170 - I just went to your site and it still shifts over the links and I haven't visited anything. So if you have already updated that link with the corrected code it still isn't working properly, but if you haven't updated the page then disregard this.

But if someone could clarify my question for me that would be great.

Thanks.

Would the problem with the shifting not occured because of the box model difference with IE/FF?

Yes.. and no. While the box model problem is a factor, the behavior was the same inside just Firefox, which renders boxes, margin and padding per the standards.

Thankyou friend

Best Regards

Musicmaza
<please create a forum signature>