Having a spacing problem... Can anyone help?

[jmroberts70]

URL: http://www.bedofnails.tv/test/characters.htm
I'm trying to run all the text in the frame as single paragraph but I'm running into a gap with the first line (as you can see on the link above). I've already done this in my style for this page:

h1
{
margin-bottom: 0px;
margin-top: 0px;
display: inline;
}

Mind you, this renders just fine in IE but not FF, Safari, or Chrome. Do you guys know how I can get rid of this gap on the first line?

 

[mrgstiffler]

Did you get this fixed? I'm not seeing a problem.

 

[wags]

I think you need to experiment with the "line-height" property on that h1 selector in your CSS.

The other thing that might throw you off a little bit is the padding on that link on the first line.

If that still doesn't help, I would tinker with is grouping that text in a paragraph tag and/or adjusting some of your cufon settings. As an FYI, cufon is broken in the new IE 9... your text won't show up at all. I really don't think cufon is the culprit though, since disabling JavaScript on your page still shows the problem.

 

[jmroberts70]

Ok, I fixed it. Instead of using that fancy font replacement Javascript to get the cool "blueprint" font for the characters name done on the fly, I just used an image. That seemed to solve my spacing problem. ...As it turned out, the Javascript was STILL creating an image for each block of letters so why not just insert an image to begin with so I can have more control over the placement? Anyways, thanks everyone for your help getting me closer to being done with this project! It's been a huge learning experience for me!