Hi there!

Have a question that's a bit on the side from this forum, but hopefully someone knows the answer to this so I'll give it a shot.

Have a recent interest in building pages with CSS, only to make the pages load faster. In this case I have wanted to make a mouseover like the one Microsoft uses on their site, www.microsoft.com.

Not even sure this is CSS, or if it can be done with CSS.

Anyway I find it cool that a box appears around the link.

Does anybody know how to do this?

Regards, Christian

It should be something like the code below, just change the values to what you want.

<pre id=code><font face=courier size=2 id=code> a:link{
color: #000000;
background : #cccccc;
width : 100%;
padding-left : 3px;
font-size : 11px;
text-decoration : none
}

a:visited{
color: #000000;
background : #cccccc;
width : 100%;
padding-left : 3px;
font-size : 11px;
text-decoration : none
}

a:hover{
color: #ffffff;
background : #696969;
border : 1px solid #000000
width : 100%;
padding-left : 3px;
font-size : 11px;
text-decoration : none} </font id=code></pre id=code>

put the code above in your style sheet.

Hope it helps

Thank you very much Wayne1000!

Your tip worked out just fine!

Still one question though, do you know how to prevent the text from moving when mouseover?
Noticed that the link moved down to the right when moving the mouse over.

Have you changes any of the padding values? If you have make sure they are all the same.

You could try putting a border the same colour as your background in the a:link and the a:visited

wayne