text decoration inside many elements

[ryanmarks]

I am having issues with CSS and text decoration within an a tag, div tag, and ul tag. Here is the code:

<a href="index.htm">
<div class="lb">
<ul>Home</ul>
</div>
</a>

Ive tried everything to remove the text decoration for the link. Maybe my CSS syntax is wrong. Can anyone help? Thanks.

[ryanmarks]

I tried:

.lb a { text-decoration:none; }

[shingokko]

First of all there are a couple of errors in your HTML markup.

1. a tags are inline elements and nesting block elements such as div and ul in them are not allowed

2. You shouldn't have text directly in a ul tag, for each item in the tag insert an li tag and have text in it like this

<ul><li>Home</li></ul>

To answer you question, switch the order of the tags in your selector so that it selects the div inside a tags.

a .lb
{
/* insert your style definitions here */
}

Als you probably would want to give the a tag a class of some kind so that you are not selecting all a tags within your webpages.

[Marshall]

I tried:
.lb a { text-decoration:none; }

Did that work?. I have to ask about your markup. <div> should not be in an <a> tag. The correct format is
<div>
<ul><a href="index.htm" class="lb"></ul>
</div>

Then your CSS is
simply a.lb {text-decoration: none;}
or eliminate the class and simply write
ul a {text-decoration: none;}

So I have to ask, what is the reason for the way you formatted it? Are you looking for a block display with the link?

Marshall

[ryanmarks]

Yes. I am looking for a block display with a link. Since my markup is wrong, how should I markup accordingly?

[ryanmarks]

I also forgot to note, when the user clicks on the block (not just the text) it should go to the link

[shingokko]

I wonder if what you are trying to achieve is a list of links. If this is the case, you could write the markup as follows:

<div class="lb">
 <ul>
 <li>
  <a href="index.htm">Home</a>
 </li>
 <li>
  <a href="...">...</a>
 </li>
 <!-- Add more items as you need -->
 </ul>
</div>

And to remove the underline of the a tags within the list, here's the CSS you'll need:

.lb a { text-decoration: none; }

Let me know if this is what you wanted to do.

[ryanmarks]

kind of. I am trying to make block links for a menu. Each block has css attributes. When you click anywhere on the block (with text in it), it should go to another page. My "lb" class gives the block div element its attributes (color, width, height, etc)

[ryanmarks]

Figured it out. Going to use a <span> tag with url and class set.

[Marshall]

You can simply add display: block to the <a>

Using shingokko's markup,

.lb a {text-decoration: none; display: block;}

Don't add extra markup like span's if not necessary.

Marshall