Strange CSS block behavior

[FortyFivan]

Hey all,

First post here so go easy on me! I'm currently updating my Wordpress site and have come across a very strange CSS predicament. I have a page for DJ mixes and have set a number of div tags with block links to toggle the selected mix to display. The link blocks are two in a row, but for some reason, the first block is not vertically aligned properly. I've been scratching my head over this one for hours now so I figured I'd bring it to the experts.

The page in question is...

http://dev.fortyfivan.com/mixes/

The CSS code is...

#mix_list
{
	font-size:14px;
	color:#006f93;
	text-shadow: 1px 1px 0px #ffffff;
}

#mix_list .mix_button
{
	float:left;
	display: block;
	width:300px;
	height:40px;
	overflow:hidden;
	border:1px solid #c0c0c0;
	padding:5px;
	margin:0 7px 7px 0;
	background:#eaeaea;
	font-size:14px;
	line-height:1.4em;
	text-decoration:none;
	text-align: center;
	color: #006f93;
}

#mix_list .mix_button span
{
	display:block;
	padding-top:13px;
}

#mix_list .mix_button:hover
{
	background:#ddd;
	border:1px solid #aaa;
}

The HTML code is...

<div id="mix_list">
<a class="mix_button" href="#" onClick="Toggle(0,14)"><span>Summer Soulstice Vol 2</span></a>
<a class="mix_button" href="#" onClick="Toggle(1,14)"><span>Forty Fivan Compacto Edition Vol 2</span></a>
<a class="mix_button" href="#" onClick="Toggle(2,14)"><span>Afrodisia</span></a>
<a class="mix_button" href="#" onClick="Toggle(3,14)"><span>Forty Fivan Compacto Edition Vol 1</span></a>
<a class="mix_button" href="#" onClick="Toggle(4,14)"><span>Brasil Meu Amor Vol 2</span></a>
<a class="mix_button" href="#" onClick="Toggle(5,14)"><span>AFREAKA! Guest Mix</span></a>
<a class="mix_button" href="#" onClick="Toggle(6,14)"><span>Brasil Meu Amor Vol 1</span></a>
<a class="mix_button" href="#" onClick="Toggle(7,14)"><span>Forty Fivan Vol 3</span></a>
<a class="mix_button" href="#" onClick="Toggle(8,14)"><span>Forty Fivan Vol 2</span></a>
<a class="mix_button" href="#" onClick="Toggle(9,14)"><span>America Do Sol</span></a>
<a class="mix_button" href="#" onClick="Toggle(10,14)"><span>Forty Fivan Vol 1</span></a>
<a class="mix_button" href="#" onClick="Toggle(11,14)"><span>Funky Penguin</span></a>
<a class="mix_button" href="#" onClick="Toggle(12,14)"><span>Africa Brasil</span></a>
<a class="mix_button" href="#" onClick="Toggle(13,14)"><span>Summer Soulstice Vol 1</span></a>
</div>

Any assistance would be greatly appreciated... I'm just an amateur web developer

Cheers,

Ivan

[vikram1vicky]

<br> tags are not required here, so remove it.

Also correct tag is <br />, <br> is invalid

[alykins]

<br> tags are not required here, so remove it.

Also correct tag is <br />, <br> is invalid

to elaborate Vikram means delete it... I went and looked and if you delete this line the problem will go away (posting this bc it is still there and didnt know if you understood what he meant)

[FortyFivan]

to elaborate Vikram means delete it... I went and looked and if you delete this line the problem will go away (posting this bc it is still there and didnt know if you understood what he meant)

Thanks for checking... unfortunately that didn't do the trick. It was only there in the first place because I was trying a bunch of different things and forgot to take it out before posting. Any other ideas?

[Arbitrator]

Thanks for checking... unfortunately that didn't do the trick. It was only there in the first place because I was trying a bunch of different things and forgot to take it out before posting. Any other ideas?

Removing the first br element does the trick for me. Apparently, this issue is caused by interaction between the br element and the floated song title boxes.

I don't know why you have br elements at all given that floating the song title boxes causes automatic line-breaks.

<br> tags are not required here, so remove it.

Also correct tag is <br />, <br> is invalid

Speaking of XHTML 1.0 validity, XML is case-sensitive and, since all XHTML attribute names are defined in lowercase, onClick is not an XHTML attribute (i.e., the attribute you're looking for is onclick).