On Sat, Feb 25, 2012 at 4:50 AM, Matthew Willis <[email protected]> wrote: > Hi CSS-heads, > > I'm working on a site map, using background images with lines connecting the > various site pages. The problem I'm having is that fonts render differently > over different operating systems and browser. I thought that by using px > rather than em for font-size would control the height of the fonts, but that > hasn't been the case. Does anyone know of any strategies for this, short of > replacing the text with images? > > Here is what i'm working on to get a better idea of what I'm talking about. > > http://fat-hair.com/2012stage/ftr-sitemap.php
It already seems to line up well for me on Linux and Windows, but I noticed that you aren't setting the line-height of the text and you're adjusting the vertical position of the background image down a little. That was to correct for the height of the text being taller than the height of the image, right? A detail that might help you out is that text is vertically centered on its line height. You can even make the line-height smaller than the font size. So, if your background image is 11px, you can make your line-height 11px also and it should line up pretty well. This could make text overlap vertically a little, but that's not a problem here because you're using header elements for your text and their default margins prevent the text from overlapping. I tried it out on your site and it worked well, but I also had to change the vertical background position to 0. And if that doesn't work ... You're using the generic font family "sans-serif", so you're letting the OS/browser decide what font to use. It's more likely that they're different fonts than that they're the same fonts rendering differently. You would probably be better off using "web safe" fonts, which means that they're likely to be available on all of your target platforms. A web search for web safe fonts will help you decide what fonts to use. I just did it and here's my first result: http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html -- Vince Aggrippino a.k.a. Ghodmode http://www.ghodmode.com > Thank you! > Matthew ______________________________________________________________________ css-discuss [[email protected]] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
