PDA

View Full Version : Help! text enlarges on hover!


jase1985
03-05-2011, 09:54 AM
Hi all, i have an issue with a site that i'm working on where the logo and navbar text enlarge when the mouse is hovered over it. Both items are situated in the header of the page. I am quite new to web design, particularly css so I only understand half of it!

Any helps is greatly appreciated.

Corrosive
03-05-2011, 11:14 AM
Link, code or crystal ball please :)

jase1985
03-05-2011, 11:55 AM
lol, well i don't like to give out my crystal ball! The url is www.photoshopbeginner.co.uk

thanks in advance

Corrosive
03-05-2011, 12:04 PM
lol, well i don't like to give out my crystal ball!

Very wise ;)

I think the code that is messing you up is this;

a:hover (line 37){
background-color: inherit;
background-image: inherit;
background-repeat: inherit;
background-attachment: inherit;
background-position: inherit;
color: #006699;
text-decoration: underline;
font-size: 2em;
}

Try playing with the font size I have put in bold. Suggestion would be to use px (pixels) rather than em as a measurement.

jase1985
03-05-2011, 12:47 PM
thanks for the suggestion, it has worked and stopped the text from expanding but it has however highlighted a new problem, would you mind checking the link again please, the error is on the navbar only now when you hover over it.

Thanks again

Corrosive
03-05-2011, 01:27 PM
#header-content li a:hover (line 280)

{

background-color: #65944a;

background-image: none;

background-repeat: repeat;

background-attachment: scroll;

background-position: 0% 0%;

color: #ffffff;

font-size: 1.3px;

}

1.3px is a very small font size ;)

jase1985
03-05-2011, 01:33 PM
thanks again, i had changed the wrong property in the css. All sorted (for now lol). The support here is fantastic

d a v e
03-05-2011, 01:38 PM
still jumps on the contact link in the first page - if you check with the css validator you have errors
http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A%2F%2Fwww.photoshopbeginner.co.uk%2F

your text is also pretty small and you should use margins or padding on the <p> in the stylesheet to sort out spacing rather than using empty p's.

Corrosive
03-05-2011, 01:42 PM
The support here is fantastic

Please don't mistake help for support. We are just friendly folks who wanna help others. People have been ejected from here before for 'demanding' help like we are a helpdesk with paid staff!

Don't worry, we know what you meant and will take it as a massive compliment. Thank you. All we ask from you in return is to stick around and help others :)

Corrosive
03-05-2011, 01:59 PM
Looks like you have some fine Photoshop skills there by the way. What do you do for a living?

jase1985
03-05-2011, 03:48 PM
ok, first off thanks for the support! I have fixed the errors on all the pages, I just haven't updated them yet. i should probably use a testing server instead of uploading it straight to the domain.

I will attempt to sort out the <p> in the stylesheet and check out the validators, thanks for the tip!

The photoshop skills are not my own, although I am more than competant with photoshop I cant take credit for work that isn't mine. Unfortunately it's hard to credit each one individually as finding the true source can be difficult sometimes.

I would also be glad to stick around and support others, i think I need to learn a little more myself first though before i could support others adequately.