Tobo Posted February 21, 2006 Share Posted February 21, 2006 Wotcha, folks.My first post here, so please be gentle with me.I'm currently trying to upgrade my websites to make them more xhtml friendly. The validator here at w3.org basically ripped 'em to shreds.I've always liked the way the Microsoft highlights it's links using just css, and I've tried to replicate it here: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head> <title>Untitled</title><style>a:link {text-decoration:none;}a:visited {text-decoration:none; color:silver;}a:hover {text-decoration:none; color:red; background-color:green;width:100px;}</style></head><body><p><a href="one.htm">One</a><br /><a href="two.htm">Two</a><br /><a href="three.htm">Three</a><br /><a href="four.htm">Four</a></p></body></html> However, when I convert my code to xhtml and close off all the tags and include this for the doctype: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> ....I find that the width property when used with the links doesn't work!Can anyone help me?Many thanks,Tobo. Link to comment Share on other sites More sharing options...
boen_robot Posted February 21, 2006 Share Posted February 21, 2006 Try adding "display: block;". Link to comment Share on other sites More sharing options...
Jonas Posted February 21, 2006 Share Posted February 21, 2006 And also you should probably add a MIME type to your style tag:<style type="text/css">style declarations</style> Link to comment Share on other sites More sharing options...
Tobo Posted February 21, 2006 Author Share Posted February 21, 2006 display:block kind of works, but it adds a line underneath each link!Is that right? Link to comment Share on other sites More sharing options...
Jonas Posted February 21, 2006 Share Posted February 21, 2006 Hmm, it shouldn't do that if your css is correct. Where did you enter the display: block, and did you put a semicolon after it?display: block;may give a different result thandisplay: blockif more css statements come after.display: block text-decoration: none;that won't work I think... Link to comment Share on other sites More sharing options...
sbrownii Posted February 22, 2006 Share Posted February 22, 2006 The width property does't work on inline-elements...It does work on block elements...That's why when you set display to block the width works as you wantedsee more: http://www.w3.org/TR/CSS21/visudet.html#propdef-widthWhy are you wanting to change the width?Changing size in any way on hover may make it difficult for the user. I have seen many sites try to use this, and I have a hard time clicking on what I intended to click on.But, if you really want to... try the padding propertyHere is one way you could use padding: a:hover {text-decoration:none; color:red; background-color:green;padding-left: 2em; padding-right: 2em;} You can change the value "2em" to whatever you like - you don't have to use "em" as your unit either.If you really want to mess with your visitors then use the margin property (just change padding-left and padding-right to margin-left and margin-right) - it gives a pretty wacky effect in firefoxHope that helps you in your combat against usability... lol... just kidding... kind of... Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now