Links not clickable after float

HTML & CSS
1

Hi everyone,

I have the following html and css:


  <div id="flash_container">
  			<h2 id="biz"><a href="biz/index.php">Biz</a></h2>
            <h2 id="cons"><a href="cons/index.php">Cons</a></h2>
			</a>
  </div>




div#flash_container h2#biz {
	width: 430px;
	height: 341px;
	float: left;
    background: url(images/biz.jpg) no-repeat 0 0;
	text-indent: -9999px;
}

div#flash_container h2#cons {
	width: 430px;
	height: 341px;
	float: right;
    background: url(images/cons.jpg) no-repeat 0 0;
	text-indent: -9999px;
}

div#business h2#biz a {
	width: 430px;
	height: 341px;
	display: block;
	outline: none;
}

div#consumer h2#cons a {
	width: 430px;
	height: 341px;
	display: block;
	outline: none;
}

The anchor elements are being wrapped by the h2s which is floated, however the h2’s aren’t clickable as links once floated.

I wondered if anyone knows what I’m doing wrong?

Thanks in advance for any help.

2

Well for one you have an extra </a> in your markup snippet which is invalid. I’d honestly just suggest a validation right now because (untested) I see nothing wrong with the code as it is.

3

It’s not because they are floated, you have your selectors set up wrong.

You should be using that flash container id, or just the id’s on the h2’s by themselves


[COLOR=Blue]div#flash_container[/COLOR] h2#biz a {
    width: 430px;
    height: 341px;
    display: block;
    outline: none;
}

[COLOR=Blue]div#flash_container[/COLOR] h2#cons a {
    width: 430px;
    height: 341px;
    display: block;
    outline: none;
}
4

Thanks for both replies. I’m getting a bit sloppy with my code - I should have seen those issues. It’s fixed now which is great.