Help: Line height in firefox and explorer

Hi there, i have set my line height css to 125% which looks great in explorer but in firefox i can see any difference.

Is there a hack or some way around this?

Examples that i have tried based on google searches.

<p> {
font-size: 12px;
font-family: Verdana, Geneva, sans-serif;
line-height: 125%;
}

<p> {
font-size: 12px;
font-family: Verdana, Geneva, sans-serif;
line-height: 125%;
line-height: 135%;
}

<p> {
font-size: 12px;
font-family: Verdana, Geneva, sans-serif;
line-height: 125%;
_line-height: 135%;
}

<p> {
font-size: 12px;
font-family: Verdana, Geneva, sans-serif;
line-height: 125%;
*line-height: 135%;
}

 

Uhm, yeah. I have a solution, declare your CSS using CSS, not gibberish. That shouldn't even work in ANY browser the way you have it written.

It's
p {

NOT
<p> {

BIG difference.

Of course I have no idea why you are sending that * and underline hack bull to specific browsers since line-height has no compatibility issues, and really you might be better off condensing properties rather than dicking with it so much.

In other words, replace ALL FOUR of your above declarations with

p {
  font:normal 100%/125% verdana,geneva,sans-serif;
}

Code (markup):

thats "style weight size/line-height face" (if you say normal it nabs both style and weight)

You'll notice I also switched to % height, since paragraphs are usually flow text and px metric fonts are a MISERABLE ****ING /FAIL/ at accessibility when used on content, especially 12px which is the bottom end of the scale for usable fonts.

It also doesn't help that browsers round differently, so that 135% of 12px could give you anywhere from 15 to 17px depending on browser. If you're going to use px for font-size, use px for line-height. If you are going to use %/em for font size, use %/em for line-height. Mixing metrics is most always a bad idea. If you really have your heart set on the steaming pile of /FAIL/ that is 12px fonts, say 15px line-height, not 125%.

 

thanks so much, setting it out as you have it makes much more sense and hopefully things will run smoother. I used dreamweaver for this project which was a little mistake but now will make many changes to the css.

How would i add colour to the line? #ffffff

p {
font:normal 100%/125% verdana,geneva,sans-serif;
}

p {
font:normal 100%/125% verdana,geneva,sans-serif color white;
}

 

Color is NOT a property of font, you still need to declare that one separate.

p {
font:normal 100%/125% verdana,geneva,sans-serif;
color:#FFF;
}

Literally the only properties that can be condensed in font - in order (or at least the order most people use), is:

font-style
font-weight
font-size /
line-height
font-family

That's pretty much it. font-size and line-height are always separated by a slash. Other properties like color have to go on their own. Likewise the 'text' properties like text-decoration cannot be put in there either. Pretty much if it starts with "font-" you can condense it into your 'font' line... the only CSS attribute that doesn't start with "font-" that can go in there is line-height.

 

Depends on what you're doing with it I guess. IE has some line-height bugs when you're dealing with vertical-align. At least with IE6/7, I heard these were fixed with 8.