This is one oddest problems I've seen in CSS.. h2s and spans

[lord_havoc]

On a certain page http://cyanideperfection.net/gallery you will see that the first link has the text floating just on top the way I want while the other is off to the side looking ugly. They are styled as H2s but if I say the following it turns out like the ugly one

<h2 class="left">Exhibit</h2>

Whereas if I say this:

<h2 class="left">Exhibit</span>

It looks normal the way I want it to.

And if I actually style them as spans and close them correctly they look even crazier. How in the world could this be happening? I've never seen anything like this... it's really odd.

EDIT: I should mention that this problem is in FF, I know IE is messed up also but I'm getting to that.

[Rockonmetal]

its cuz you haven't closed the h2 tag...
try this instead...

<div id="gallery">
<div class="image"><h2 class="left">Landscapes</h2><a href="landscape/index.html"><img src="splash/sunset_crop.jpg" class="left"></a></div>
<div class="image"><h2 class="left">Exhibits</h2><a href="exhibit/index.html"><img src="splash/exhibit.jpg" class="right"></a></div>

</div>

I don't know if thats what you want but it will help the overlap

[lord_havoc]

No thats the problem! If you actually end the header2 tag... it puts off to the side like the exhibit! thats why I said it was odd.

In order to make it the way I want, I have to style it as a h2 and use an </span>. I know there is some way this can be done properly but I'm just confused.

[Rockonmetal]

woops
i messed up... sorry i changed the class for exhibit

<div id="gallery">
<div class="image"><h2 class="left">Landscapes</h2><a href="landscape/index.html"><img src="splash/sunset_crop.jpg" class="left"></a></div>
<div class="image"><h2 class="right">Exhibits</h2><a href="exhibit/index.html"><img src="splash/exhibit.jpg" class="right"></a></div>

</div>

Try I think your only trying to get rid of the top one overlapping is that correct???

[lord_havoc]

No, I want exhibit to look like Landscape.

[lord_havoc]

Hmm, odd. If I place the </h2> tag at the end of the line right before the </div> it works fine.