Line height problem (Firefox only apparently)

[GaijinPunch]

This project is really making me rethink the (lack of) value for CSS as an entity on it's own. Seems to get something identical in both browsers takes an act of God.

Anyways, I have a line spacing issue, and I've wasted enough cells on it for one night. Maybe some braniac here can point out my stupid mistake. Again -- this is Firefox only. IE seems to not mind whatever I'm doing wrong.

Here's my production site:

http://japan.classicgaming.gamespy.com/main.php

which uses this css sheet:

http://japan.classicgaming.gamespy.com/jg.css

Here's a new layout I'm working on (very beta -- no logo):

http://japan.classicgaming.gamespy.com/new/main.php

which uses this css sheet:

http://japan.classicgaming.gamespy.com/new/new.css

Notice the line-spacing issue on the ramblings? For the love of God I can't get the new layout to look like the other one. The kicker, is that they're both in the "normal" CSS container which makes no mention of line-height. I tried setting it, and in Firefox 1.5 I see no effect.

Off to bed. Cheers to anyone that can enlighten me.

 

[BabyJeffy]

Validate your code first. Your page doesn't pass validation with the doctype you have chosen. Fix those problems and you may find the problems disappear (or at the very least the problems will be straightforward to resolve).

It's not CSS that is at fault... it's your implementation of it that is at fault

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/

http://www.codecouch.com/jeff/blog/

[/tt]

What is Javascript? FAQ216-6094

 

[GaijinPunch]

It's not CSS that is at fault... it's your implementation of it that is at fault

In this case, I'm sure, but I'm about ready to make some dynamic flash interfaces b/c I can't get IE to do something Firefox will do. The sad thing is, I hate IE, but, that's what the majority of people use.

I will get around to validating one day. That part at least should work -- I used the original as a template.

 

[BillyRayPreachersSon]

Your HTML contains more validation errors than I can believe, and your CSS has several, too. Try fixing those before trying to get your layout perfect... after all, if your markup isn't correct (which it is not), then you cannot expect the layout to be so.

Hope this helps,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Vragabond]

I would suggest using something more semantically correct. Why is the picture in a span? You could simply float the image itself. And why is all the text in a span element when I can distinctly see three paragraphs on your page. Try rewritting that so that it uses just <img> and three <p>s and that could cause your problem to disappear.

 

[Ghodmode]

It is difficult to get any decent page to render exactly the same between the two browsers. It's possible, but it's often not worth the effort.

Maybe I'm missing something, but it doesn't look like you have the line-height set for the Ramblings.

The ramblings are in a span element with a class of normal and no inline style.

The normal class in the stylesheet doesn't have any line-height setting. I don't see any line-height settings in the stylesheet at all.

I do see some inline line-height settings in the source, but none of them affect the section you were asking about.

I want to make sure I understand the problem correctly: The lines in your ramblings section are spaced a little farther apart than you want them, right?

I think the discrepancy that you're seeing is not an error on you're part, it's just a difference between the default settings of the two browsers. Maybe the font choice will have an effect, too.

I recommend the following:

.normal {
    font-family: Tahoma, serif;
    line-height: 1.2em;
}

The serif part is just a precaution. It's guaranteed to be available regardless of what OS or browser you're using. It shouldn't affect how you see the page on your system, though, because you have the Tahoma font.

I think 1.2em is standard, but I'm not sure. You might want to play with it a little bit. If it's still too far, make it 1.1em. I think the lines will actually touch each other if you make it 1em.

Let me know what you end up with.

--
-- Ghodmode

 

[GaijinPunch]

Your HTML contains more validation errors than I can believe,

Yeah, well, about 80% of those are complaining about URL's, saying it doesn't know what element is there. I do not know how to get around that. Another 10 or so is a typo I made (repeated 10x, as it's php-generated).

Why is the picture in a span? You could simply float the image itself.

Don't really know. When I learned this trick (a while back) that was how it was explained. I got it to work, and didn't pay it any mind. I will try your trick, in the morning, after some sleep.

I want to make sure I understand the problem correctly: The lines in your ramblings section are spaced a little farther apart than you want them, right?

Yes, that's right, but apparently the problem is only in Firefox, and the first link I posted, they're fine. In the 2nd one, they're too far apart. The code for that bit should be the same.

I think 1.2em is standard, but I'm not sure. You might want to play with it a little bit. If it's still too far, make it 1.1em. I think the lines will actually touch each other if you make it 1em.

I did this a bit, but only saw the changes in IE. I might've typed them wrong... it's late, and my eyes are shutting. I will give this a shot tomorrow and report back.

Cheers to everyone for the replies.

GP

 

[Ghodmode]

I agree whole-heartedly about correcting the errors. I saw the errors, too. Whenever I create a new page, I try to do it right from the start. I always have the HTML, XHTML, and CSS Specs open in my browser tabs.

But I have to say I understand: The page seems to render well in both browsers in spite of the errors. And, If yer tryin' to get your page is mostly done and you want to get it out there, I don't blame you for wanting to leave the validation for later.

--
-- Ghodmode

 

[BillyRayPreachersSon]

Yeah, well, about 80% of those are complaining about URL's, saying it doesn't know what element is there. I do not know how to get around that. Another 10 or so is a typo I made (repeated 10x, as it's php-generated).

What about the incorrect closing TR tags, the open TR tags where there should be none, the HEIGHT attributes and SPAN elements where they are not valid... and much more if you care to look?

Those are not simple typos or "URL errors" - they are wrong markup.

I said it before, and I'll say it again - if you do not have correct markup, then don't expect your pages to look correct.

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Ghodmode]

I think 1.2em is standard, but I'm not sure. You might want to play with it a little bit. If it's still too far, make it 1.1em. I think the lines will actually touch each other if you make it 1em.

I did this a bit, but only saw the changes in IE. I might've typed them wrong... it's late, and my eyes are shutting. I will give this a shot tomorrow and report back.

In that case try creating a [tt]span.normal[/tt] section in your stylesheet. If that doesn't work try [tt]td span.normal[/tt]. It has something to do with specificity that I don't understand entirely, but FF seems to be a little more sensitive about it than IE.

If it gets to specific, give it a class of it's own that doesn't exist elsewhere in your document and use that.

Read here [URL unfurl="true"]http://www.w3.org/TR/CSS21/cascade.html#specificity[/url] if you want to. I don't understand it all.

--
-- Ghodmode

 

[GaijinPunch]

You could simply float the image itself. And why is all the text in a span element when I can distinctly see three paragraphs on your page. Try rewritting that so that it uses just <img> and three <p>s and that could cause your problem to disappear.

This worked somewhat, if you view now. The problem though (Firefox only again) is that it treats a <p> as a new paragraph, so it doesn't float properly. The first line should be higher. It's not apparent in IE. I do not know how I would change <p> to get rid of this affect, if I could at all that is.

I think 1.2em is standard, but I'm not sure. You might want to play with it a little bit. If it's still too far, make it 1.1em. I think the lines will actually touch each other if you make it 1em.

Let me know what you end up with.

Basically anything within a span there will not work in Firefox. I tried a completely new one, and changed the line-height a few times and got nothing. A mystery.

 

[Vragabond]

I checked the solution with just images and paragraphs (good job incorporating that one) and I can't see any problems (or any notable differences between FF and IE) with it.

 

[GaijinPunch]

Hmmm....

Here's my differences:

IE:

http://japan.classicgaming.gamespy.com/img/etc/ie.jpg

FF:

http://japan.classicgaming.gamespy.com/img/etc/ff.jpg

You don't see these on your machine? The text is clearly offset in Firefox on mine.

 

[Vragabond]

Are you talking about the gap before the first paragraph of text? And the gap after the last one? That's the only offsets I can see. Those can be removed simply by playing with margins: margin-top on the first paragraph and margin-bottom on the last one. That would require some new classes or your could work with :first-child and :last-child, since you seem to have problems with browsers outside IE. Or, looking at your current code, you could simply add [tt]margin: 0;[/tt] and all your problems would disappear.

 

[GaijinPunch]

I have all the errors out that I can get out.

1: The <html style="height: 100%"> was a solution to make the table stretch to 100% of the browser. I did not want to use the faux columns approach. I got this solution in a few places -- I think even here.

2: <script=language> error: My provider sticks this code in. No way around it.

3: There's one "target=new" error in there which I can't get to now, as it's stuck in a database.

The rest are errors about URLS, which you can be assured are valid. How can I prevent the validator from moaning about these?

 

[Vragabond]

If you change your links to output [tt]&amp;[/tt] instead of a simple &, even those URL errors will go away. Also, you could put the height: 100%; for body in an external stylesheet where it would be valid. That's a few errors down the drain...

 

[BillyRayPreachersSon]

It's looking good in Firefox now... however, once you've fixed the URLs so you're outputting them correctly, don't stop there - fix te last few CSS validation errors you've got (it's not just about the HTML) and you'll have a nice validating site.

You can find a CSS validator here:

http://jigsaw.w3.org/css-validator/

Hope this helps,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[GaijinPunch]

Okay, I've gotten all the errors save the javascript one (which is beyond my control) out, and I've gotten the quirks out. Thanks for all the replies.

One thing I've noticed in this "exercise", it seems the one main difference between Firefox and IE is that when using cellpadding within a <td> tag, this will effect the actual size of the cell in IE. If I had a background that was 50px by 25px, and had cellpadding set to 5, in IE, I would have to set the height of the <td> to 15 (5 x 2) unless of course the background was repeating.

I guess I'll just have to get used to some of that stuff.

Now, for the other 10 or so scripts.