Hi everyone, I'm new to the board and I need some help. I wasn't sure whether to post this in HTML help or CSS help, but since I use CSS and PHP and I decided to post here.
I run a fansite dedicated to a Harry Potter character at http://deception.baptism-of-blood.net. The problem is, any time you hover over one of the links, the rest of the text moves. Does anyone know why this is or how I could fix it?!
Thanks a bunch!
Alison
Full Version: Links
It's the 'height: 0' you have in the a:hover rule.
Much of the styling is redundant. You don't have to specify underline for links, they will be underlined by default. Since you have 'border-style: none' there is no point in having other styling for borders. Without a 'border-style' there is no border. Browsers don't put borders on links anyway, so you can cut down this:
to this:
It's good that you use real headings, but you should also enclose the text in paragraphs, P.
You may find the HTML validator and the CSS checker useful too. Good teachers, those.
http://htmlhelp.com/tools/validator/
http://jigsaw.w3.org/css-validator/
Good luck!
Much of the styling is redundant. You don't have to specify underline for links, they will be underlined by default. Since you have 'border-style: none' there is no point in having other styling for borders. Without a 'border-style' there is no border. Browsers don't put borders on links anyway, so you can cut down this:
CODE
A:link { text-decoration: underline; color:black; border-style:none; border-color:#27653A; font-weight: none;
border-bottom-width:2px;
border-top-width:0px;
border-right-width:0px;
border-left-width:0px;
background-color:;}
A:visited { text-decoration: underline; color:black; border-style:none; border-color:#27653A; font-weight: none;
border-bottom-width:2px;
border-top-width: 0px;
border-right-width: 0px;
border-left-width: 0px;
background-color:;}
A:hover { text-decoration: underline; filter:; height:0; color:#006A20; border-style: none; border-color: #B0BEB4; cursor:crosshair; font-weight: none;
border-bottom-width: 2px;
border-top-width: 0px;
border-right-width: 0px;
border-left-width: 0px;
background-color:;
}
border-bottom-width:2px;
border-top-width:0px;
border-right-width:0px;
border-left-width:0px;
background-color:;}
A:visited { text-decoration: underline; color:black; border-style:none; border-color:#27653A; font-weight: none;
border-bottom-width:2px;
border-top-width: 0px;
border-right-width: 0px;
border-left-width: 0px;
background-color:;}
A:hover { text-decoration: underline; filter:; height:0; color:#006A20; border-style: none; border-color: #B0BEB4; cursor:crosshair; font-weight: none;
border-bottom-width: 2px;
border-top-width: 0px;
border-right-width: 0px;
border-left-width: 0px;
background-color:;
}
to this:
CODE
a:link { color: black; background: inherit }
a:hover { color: #006A20; background: inherit }
a:hover { color: #006A20; background: inherit }
It's good that you use real headings, but you should also enclose the text in paragraphs, P.
You may find the HTML validator and the CSS checker useful too. Good teachers, those.
http://htmlhelp.com/tools/validator/
http://jigsaw.w3.org/css-validator/
Good luck!
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.