Okay this seems like a really stupid question. Below is the code for an H2 tag inside of a div. I want the H2 to be indented by 20px to the left and I want it to look centred by the height. . . but if I do centre it in IE it looks retarded in FF and vice versa. So I set the top position to 0px to see what's going on and I get this: Now I took out the H2 tag and just put in the plain text and the result looks fine for both IE and FF (the expected result is there for both) but when I stick the H2 tags I get this funny result. The CSS code is below: #abouth{margin:0px;padding:0px;width:263px;background:url('images/about.jpg') no-repeat;height:29px;font-size:1.3em;} #abouth h2{margin:0px;padding:0px;color:#fff;font-family:'Arial';[B]position:relative;top:0px;left:20px;[/B]} Code (markup): I've spent hours trying to figure this out. Please help! What is going on here? Skinny
Well... first off, the HTML would really help, second you've got a serious case of classitus, and a bunch of redundant and/or unneccessary properties. First off, LOSE the wrapping DIV (I asssume there's a wrapping DIV given the CSS) and style the H2 directly! <h2 id="abouth">About</h2> That's it, that's ALL the HTML you should be using - if you have more than that, you are doing something wrong. Then set the universal reset, and set the properties directly on the H2... do NOT use position:relative for a 20px left offset, that's what padding and/or text-indent are for. FINALLY, do NOT set a %/em font inside a fixed height/fixed width container, that is just BEGGING for the layout to break not only cross browser, but on systems that use a different metric (like windows 'large fonts/120dpi'). You declare a fixed height, declare the font size in the same metric. Means you can also declare your line-height thus, making sure the text centers top to bottom... Oh wait, you WANT it looking like crap at the top like that?!? Ok, so we narrow the line-height to a px or two over the font-size. * { /* reset margins and padding on EVERYTHING to zero */ margin:0; padding:0; } #abouth{ width:243px; height:29px; text-indent:20px; font:bold 16px/18px arial,helvetica,sans-serif; color:#FFF; background:url('images/about.jpg') no-repeat; } Code (markup): Oh, and some formatting on your CSS wouldn't kill you. Though again, without the HTML that goes with that CSS, it's pretty much gibberish and I made a lot of wild guesses.