Hi Folks I am having problems with alignment of text in the sample page at: www.aupcheck.com/simpleproblem/ The boxes at the right are supposed to have the title text positioned in the middle vertically in the darker colored area, as it appears in IE7. But Firefox wants to put the text at the top edge of this area. Can anybody shed light on this? Thanks in advance.
I believe you need to style your h4 details in your CSS, as you have set your default padding and margins, you also need to set defaults for settings such as h1, p, br etc h4 { /*Use whichever size you want to post*/ margin-top:0.5em; margin-bottom:0.5em; } HTML: Try that, see what happens.
Oooh, so much /FAIL/, so little time to fix it You've gone a little 'div happy' here - and it's biting you. I could give you the quick answer - set your line-height equal to the height of the DIV wrapping it - but there shouldn't even BE a div wrapping it in the first place! There are even bigger problems like you are using the same ID's more than once on a page (they are supposed to be unique, need it more than once, that's what a CLASS is for), you dropped all the way to H4's without any intermediate heading tags, etc, etc. Though admittedly, your formatting and namespace choices seem... familiar (gee, I wonder why) Oh, btw - it's a REALLY bad idea to set your line-height the same as your font-size - it can make the descenders hang into the text of the next line, making it VERY hard to read. 'bare minimum' is usually 10% more, though I like 30-40% myself... AND in general using PX for fonts is also a /FAIL/, as at 12px you are at the SMALLEST size I'd even think of using. SINCE I'm so familiar with the coding style used here (heh) it only took me a few moments to do a quick rewrite for you. Since you are only doing the column on one side we can get rid of the relative positioning... Ok, czech this out: http://battletech.hopto.org/for_others/antigen/take2/template.html You know the drill, the directory is unlocked: http://battletech.hopto.org/for_others/antigen/take2 You'll notice I yanked a few div, changed certain ID's to classes, etc, etc. I set the line-height to 14px on those headers, then set padding on it as Hopper suggested. You could also do away with the padding and declare the same height and line-height - but that CAN on occasion make the text appear a bit too high up by two or three pixels and breaks horribly should you decide to use a title that will word-wrap.
As with your previous help, this solution is much more elegant. Thank you very much. I am gradually getting the hang of manually coding CSS, although as you indicated I have some way to go. Point taken re the excess divs and substitutions of IDs for classes. I see what you mean by using the same element height and line height, with the slight vertical displacement. I like the way you did it. Thank you again for your instructive example. Also thanks to Hopper for the response.