CSS text-decoration rule ignored

Question

I have found similar questions to mine but none of the suggestions seems to apply to my situation, so here goes...

I have a webpage with a buch of images on them. Each image has a title which in markup is between h2 tags. The title is a link, so the resulting markup is like this:

<ul class="imagelist">
<li>
<a href=""><h2>Title 1</h2></a>
<a href=""><img src="" /></a>
</li>
<li>
Image 2, etc...
</li>
</ul>

All I want is for the title links to not be underlined. I tried to address this like this:

.imagelist li a h2 { color:#333; text-decoration:none; }

It completely ignores the text-decoration rule, yet respects the color rule. From other questions I learned that this could be because a child element cannot overrule the text-decoration of any of its parents. So, I went looking for the parent elements to see if any explicit text-decoration rules are applied. I found none.

This is driving me crazy, any help?

For the sake of completeness, here is the Firebug CSS output, which shows the full inheritance and such. Probably more than you want, but I cannot see anything conflicting here.

.imagelist li a h2 {
color:#333333;
text-decoration:none;
}
main.css (line 417)
h2 {
font-size:14px;
}
main.css (line 40)
h1, h2, h3, h4, h5, h6 {
display:block;
font-weight:bold;
margin-bottom:10px;
}
main.css (line 38)
h1, h2, h3, h4, h5, h6 {
font-size:100%;
font-weight:normal;
}
reset-min.css (line 7)
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
margin:0;
padding:0;
}
reset-min.css (line 7)
Inherited froma /apps/ju...mage/745
a {
color:#0063E2;
}
main.css (line 55)
Inherited fromli
.imagelist li {
list-style-type:none;
}
main.css (line 411)
li {
list-style:none outside none;
}
reset-min.css (line 7)
Inherited fromul.imagelist
.imagelist {
border-collapse:collapse;
font-size:9px;
}
main.css (line 410)
Inherited frombody
body, form {
color:#333333;
font:12px arial,helvetica,clean,sans-serif;
}
main.css (line 36)
Inherited fromhtml
html {
color:#000000;

Answer 1

Try this:

.imagelist li a, .imagelist li a:hover{color:#333; text-decoration:none;}

Answer 2

Try switching your html about a little, while HTML 5 allows block level elements to be within a tags, I'm not sure that HTML 4.01 or xhtml does, so it might be worth:

...
<li><h2><a href="#">title 1</a></h2></li>
...

And using the css:

a:link,
a:visited {text-decoration:  none; }

Or, in case of specificity being the problem:

ul.imagelist li h2 a:link,
ul.imagelist li h2 a:visited {text-decoration: none; }