What's wrong with this CSS?

January 10, 2006 7:54 PM

I have a CSS class that displays "correctly" in Safari and Mac IE, but for some reason knocks the font size down in Firefox and IE under XP. Everything looks right to me, but I'm not a CSS expert by any means. Anyone care to take a look?

The site is here, the CSS here; it's the class "blogbody" that's causing problems. This is a modified Movable Type default template, so it seems like it ought to work -- the only thing I could think of to change in the HTML was to remove the second </div> and the end of each blog entry, because I couldn't tell what it was closing, but that had no effect. I tried altering the font-size in the CSS, which only changed the first entry; subsequent entries always stayed at what looks like 10px. Any ideas?

posted by aaronetc to Computers & Internet (4 answers total)

Best answer: You're not closing all your FONT tags. Take a look at your page in DOM Inspector of Firefox and you'll see your little text is nested beneath two or more FONT tags with size set to 1. Close the tags, think it might fix your problem.
posted by mdevore at 8:12 PM on January 10, 2006

Also, you might want to consider not using FONT tags in the first place. Since you're already using stylesheets, why not replace the old-school FONT stuff with proper CSS?
posted by staggernation at 8:34 PM on January 10, 2006

Also, if you're going to mark it as XHTML Transitional, you should try to get it to validate. This could be causing some of the errors across browsers that you're seeing (ie: Safari starts rendering in quirks mode while Mozilla honors the doctype).
posted by sbutler at 8:44 PM on January 10, 2006

Response by poster: Thanks, the font tag was it; I wasn't seeing it with all the MT markup in there. I'm still using that setup because I basically threw this template together as soon as I switched to MT and haven't really taken the time to take out the bubblegum and twine.
posted by aaronetc at 9:47 PM on January 10, 2006