Jump to content

xhtml and link widths


Tobo

Recommended Posts

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

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

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...