Little CSS Question

[Zenax]

Well now I ask you intelligent guys a question on CSS.

Take a look at this:

http://projectmicah.com/v2/index2.php

Hover over the top link and then look at the second link, and you will understand what happens.

The second link seems to move down about 10px.

CSS Code:

.navcontent a:link, .navcontent a:visited
{
color: #000000;
text-decoration: none;
}

.navcontent a:hover
{
background-color: #0066FF;
border: 1px solid #000000;
color: #FFFFFF;
text-decoration: none;
display: block;
clear: both;
}

The person to reply with an answer that works, gets 50pts.

Regards,
Zenax

 

[3aKaT]

remove display: block;
--------------------------
<a href="http://#">Home[&nbsp;as many as it need]</a> and use <br /> instead <br>

 

[Zenax]

Well that fixed that problem, but is there any way to get it stretch the entire width of the nav area with having to put in &nbsp; ??

 

[3aKaT]

i think in navigation better to use table

 

[Zenax]

well I design with divs, but I might try a table

Still, any suggestions?

 

[cetutnx1]

Maybe you can use unordered list, view my attachment

Then you can change the style of the li, and of the anchor....

 

[t2t2t]

.navcontent a:link, .navcontent a:visited
{
color: #000000;
text-decoration: none;
[COLOR=Red]width: 100%;[/COLOR]
}

Try adding red code.

 

[Zenax]

OK tried both of those suggestions and neither work!

This could really bug me

NEW PAGE: http://projectmicah.com/v2/index2.php

 

[oab]

it works for me in firefox the old one not 2, and ie6. what browser were you using?

EDIT:
oh yea to stretch it all the way just add width:100%
and if i was you i would make the hover effect also add some left padding.

 

[Zenax]

Yeah I am fixing the code, but when I change it to width 100% it still does not stretch the whole width.

I think the idea is that I should just do the layout in tables instead, and see what happens when I do that.

Regards,
Zenax

 

[cetutnx1]

Or you could do width: inherit instead of width: 100%, should work in FF, and Opera, dont know about IE

The problem of width: 100% is that this will make the width equals to the content width, this is because by default the a element it's an inline element not a block element.

 

[noerrorsfound]

I think the idea is that I should just do the layout in tables instead, and see what happens when I do that.

You are not supposed to do that. Perhaps try to find another forum to post your question to.

I searched Google and found these:
http://www.sitepoint.com/forums/forumdisplay.php?f=53
http://forums.digitalpoint.com/forumdisplay.php?f=39

 

[oab]

well if your layout is not liquid you can just hard code the width in..

width:200px;

 

[Zenax]

Ok, this is driving me crazy, so I am dropping the idea, and going with a different one! Thanks for all your help guys.

50.00 Points sent to everyone who posted in this thread, who tried to help me out! Thanks Again!