Jump to content

Underline not going from link


Recommended Posts

Hi, i have just been trying to build a main navigation for my test website, but when i go to set the text-decoration property to none. The links still stay underlined. Please help thanks.

<!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"><head>	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>	<title>Links</title>	<style type="text/css">	<!--	* {	margin:0;	padding:0;} #main-nav {	font-family: Calibri;	font-size: 1em;	word-spacing: 20px;	text-align: center;	text-decoration: none; }  li {	display: inline; }  a:link {	color: #000; }  a:visited {	color: #000; }  a:hover {	color: #32CD99; }  a:active, a:focus {	color: #000; } 	-->	</style>	</head><body>	<ul id="main-nav">				<li><a href="#">Home</a></li>		<li><a href="#">Products</a></li>		<li><a href="#">Testimonials</a></li>		<li><a href="#">Support</a></li>		<li><a href="#">Clients</a></li>	</ul></body></html>

Edited by XHTMLboy
Link to post
Share on other sites

You need to set the text-decoration for the actual anchor tags.

Link to post
Share on other sites

As Synook pointed out, you need to have the text-decoration set for your a tags not their container. If you wanted to set it for all a's in the #main-nav container you could target them like this:#main-nav a {text-decoration: none;}

Link to post
Share on other sites
You need to set the text-decoration for the actual anchor tags.
And i just did, it displays the links without the underlining, but all of the other properties don't take affect. :) but thanks for helping anyway :)
Link to post
Share on other sites

What does your CSS look like now?Are the style declarations under #main-nav supposed to style your links? If so, you can leave everything the way you had it and just change the selector to the one I gave you in my last post.Ie.#main-nav {becomes$main-nav a {

Link to post
Share on other sites
What does your CSS look like now?Are the style declarations under #main-nav supposed to style your links? If so, you can leave everything the way you had it and just change the selector to the one I gave you in my last post.Ie.#main-nav {becomes$main-nav a {
yes, i only wan't to change the links, but where i have got #main-nav in my css, it's been changed to main-nav a. i no that should only affect the links, but the properties i have given them seem to not be taking affect. But when the selecor is like #main-nav it seem's to apply some of the properties apart from the text-decoloration propertiy.
Link to post
Share on other sites

add the properties you want to them to have to #main-nav a selector too. and so on and so forth for the pseudo classes too. If anything, let us see the latest version of your code.

Edited by thescientist
Link to post
Share on other sites
add the properties you want to them to have to #main-nav a selector too. and so on and so forth for the pseudo classes too. If anything, let us see the latest version of your code.
At the moment this is my latest code
<!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"><head>	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />	<meta http-equiv="X-UA-Compatable" content="IE=Edge" />	<meta name="robots" contnt="Index, follow" />	<meta name="description" content="" />	<meta name="keywords" content="" />	<title></title>		<style type="text/css">		#main-nav a{			text-decoration: none;			font-family: Arial;			font-size: 1.2em;			word-spacing: 20px;			list-style-type: none;			text-align: center;}				li {			display:inline;}				a:link {			color: #000;}				a:visited {			color:#000;}				a:hover {			color:#3C9;}					a:active, a:focus {			color: #CCC;}	</style></head><body><ul id="main-nav">		<li><a href="#">Home</a></li>		<li><a href="#">Products</a></li>		<li><a href="#">Clients</a></li>		<li><a href="#">Testimonicals</a></li>		<li><a href="#">Support</a></li></ul></body></html>

And thanks for your help as it is very much appreciated :)

Edited by XHTMLboy
Link to post
Share on other sites

Which properties aren't being applied? I can't see any reason why everything in your #main-nav a selector shouldn't be applied. Maybe try modifying the selector like this: #main-nav li aBTW, is the misspelling of "testimonials" deliberate?

Edited by ShadowMage
Link to post
Share on other sites
Which properties aren't being applied? I can't see any reason why everything in your #main-nav a selector shouldn't be applied.BTW, is the misspelling of "testimonials" deliberate?
No i'm just a crap speller, lol. But most properties work apart from text-align and word-spacing.
Link to post
Share on other sites
No i'm just a crap speller, lol.
OK, just checking. :)
But most properties work apart from text-align and word-spacing.
Those two won't work. You only have one word in each one so there isn't anything to space out with word-spacing. And text-align doesn't do anything for inline elements, which is what your <a> tags are. If you want fixed width links with centered text you need to set them as inline-blocks. Add this to your #main-nav a styles:display: inline-block;width: 100px; /*Or whatever you want*/You may also have to set the display of your li's to inline-block as well. I'm not sure if inline-block elements are allowed inside of inline elements.
Link to post
Share on other sites

text-align won't do anything right now, since <a> fits itself to its content, leaving no space to center anything.word-spacing impacts the size of each space between words, and all the links in main-nav are only one word, so you won't see the effect. Were you thinking of letter-spacing?Edit: Hurr.

Edited by BlueDigit
Link to post
Share on other sites
OK, just checking. :)Those two won't work. You only have one word in each one so there isn't anything to space out with word-spacing. And text-align doesn't do anything for inline elements, which is what your <a> tags are. If you want fixed width links with centered text you need to set them as inline-blocks. Add this to your #main-nav a styles:display: inline-block;width: 100px; /*Or whatever you want*/You may also have to set the display of your li's to inline-block as well. I'm not sure if inline-block elements are allowed inside of inline elements.
Oooh thanks, it seem's to be working now. And i thought i would never find the problem. I guess i will just have to look up more on CSS. But thanks anyway :)
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...