Click to See Complete Forum and Search --> : Safari 3 on windows line-height problem.


po3
12-11-2007, 10:12 AM
Hi, I've attached an image showing my problem. All browsers are looking good except this small issue on Safari 3 Windows (Safari 3 on the mac is fine).

The text should center in the yellow bar like it does in IE and other browsers. What can I do to get Safari 3 Windows to render correctly? Is there a way to target Safari 3 for Windows directly or am I just missing something in my CSS?

The CSS is pretty basic:
#footer {
background: url(../images/common/footerYel.gif) no-repeat;
height: 34px;
width: 800px;
float: left;
}


#footer p {
font: 10px/34px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
float: right;
margin-right: 20px;

}

The HTML:
<div id="footer">
<p>© 2007. All Rights Reserved.</p>
</div>

aj_nsc
12-11-2007, 11:26 AM
scratch the post i just made, i didn't read your code....

po3
12-11-2007, 11:36 AM
guess what it actually worked. Safari for Windows must not like the line height as part of the "font" selector. I left " font: 10px/34px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;" and added "line-height: 34px;" the problem in Safari for windows in now fixed.

How about that?

WebJoel
12-11-2007, 12:17 PM
..." font: 10px/34px "Helvetica Neue", ... I've never been a big fan of of this style of combining "font-size/line-height" together this way... (this, from someone whom adores 'condensed, optimized. coding).. :o

Wondering though... -is the "px" on the "34" even required, since if a font-size is stated, you don't necessarily have to declare 'unit' for line-height integers...

Example: font-size:10px, line-height:34; is valid, whereas if you left the font's height out (declared no font-size), the line-height would require a unit-of-measure (px, em, or whatever..)...

I prefer always stating the unit-of-measure, one of either "px", "em", "ex", "in", "cm", "mm", "pt" or "pc".