I'm Looking For A New Font

[Doug E]

Im looking for fonts that are compatible with both IE and Firefox. By compatible I mean the size remains the same when viewed by both browsers.

I'm sick of customising a site only to find when viewed by the other browser tables and rows no longer line up because the font size pushes things out of place.

example, http://www.unclewangs.com/asianpornblog.html
try it with each browser, if youve got spending time

Any suggestions or good sites would be much appreciated. The html help sites that seem to top SE searches all seem out of date.

[pornoTGB]

i checked out your site with IE, opera, firefox, netscape... I can't see your problem.. you might have activated a user specific CSS-template or some other option over riding the websites font-size..
I think you also should specify the fonts with CSS.. and dont use MS fonts ;-)
you also might want to specify alternative fonts if the user does not have yours installed (should almost never be the case..)

if you dont work with css too much, here an intro: http://www.w3.org/MarkUp/Guide/Style

[Toby]

For the web, you really only have a short list of options for fonts. If you use anything other than the common fonts that come with Windows most users won't have the font installed and the font will revert to the browser default. The best solution is as pornoTGP suggested, use CSS to define the font size (in pixels), and it should be pretty close to the same in most browsers. It's still best to leave yourself a slight fugde factor in you page layout design.

[Agent]

It's a problem with IE and Firefox not using the same size for some tags. Are you using H1, H2, etc., header tags? There's are CSS "hack" you can try to make IE play by the rules Firefox and Opera do.

One thing you might want to try is this bit of css:

h1, h2, h3, h4, h5, h6 {
margin:0px;
}

It will make H-tags in IE appear in the same position as they do in Firefox. There may still be a slight difference in size. You can specify the size too. It's something I don't do myself because that used to be an old trick SE spammers used and the SE's may ding you for it.

If you're using the <font> tag I'd recommend using div instead and in its style attribute use font-size:[size]px, where [size] is the disired size in pixels ie. font-size:18px.

[Doug E]

It's something I don't do myself because that used to be an old trick SE spammers used and the SE's may ding you for it.

wish i read that a few hours earlier, I just spent the evening master the H-tags. thats a funny coincidence. im hard headed so i guess i'll test out the SE's penalty system

as for all the other info in your guys replies, its golden. Ive got some CSS homework. thanks for your help

[pornoTGB]

I love CSS.. have been playing with it some years now..

here you can find some great main-layout templates:
http://intensivstation.ch/templates/

great tutorial for starters:
http://www.w3.org/Style/Examples/011/firstcss

[Doug E]

wish i read that a few hours earlier, I just spent the evening master the H-tags.

You can specify the size too.

heh, i did it all with firefox last night, i just checked with IE today and looks like i get to redo it all. i never learn my lessons. I'll have to try that size idea youre talking about.

Thanks for the links PTGB, CSS is really going to come in handy for this new project IM starting, lots of pages and I wont have to hand do each one.

[Agent]

Once you go CSS you won't go back. It gives you freedom you can't get with tables and the basic subset of HTML/XHTML tags.

Here are some resources to add to the ones mentioned above:

http://www.simplebits.com/notebook/2...centering.html
^ Centering a layout.

http://www.alistapart.com/articles/practicalcss/
^ Positioning DIVs

PornoTGB's resource looks great too. Look at other people's CSS. I've got some of the IE hacks in my style sheets like the 'minimum height' fix.

You'll find you will need some tricks to get IE showing the same results as Mozilla-based browsers like Firefox and Netscape. Microsoft doesn't believe in the CSS standard and it shows in their support of it.

[pornoTGB]

that minimum hight really is a bitch.. had to play around for quiet a while until I found out you just have to set the hight and then the overflow ;-)

you really should check out the first link I posted.. its in german but has enough pictures .. so it should be no problem

and here my absolutly favorit quick reference.. to bad that the site did not translate everything :-(

http://en.selfhtml.org/css/eigenschaften/index.htm

[Doug E]

ADK, thanks for this,

h1, h2, h3, h4, h5, h6 {margin: 0px;}

worked perfect for IE. I just have to play around with my font size now.

pTGB, thanks for those links, Ive got them bookmarked and keep going back for reference, especially the first one, Dave Raggets, thats a lot of help for me. A great noob walkthrough.

One overall question about CSS, will search engines read a page with css as they will read one with basic html ?

[pornoTGB]

ofcourse.. CSS just aplies a style to it.. this makes a difference for the viewer but the SEs will parse your document the way it always does.

Watch out for some css-tricks as hiding content with other layers.. I have not found suficient information about google unlisting sites that use do some thing like that, but be aware

Also I would like to know why you are using h-tags? Do SEs give them a better position or ranking?

[Agent]

Originally Posted by Doug E

ADK, thanks for this,

worked perfect for IE. I just have to play around with my font size now.

pTGB, thanks for those links, Ive got them bookmarked and keep going back for reference, especially the first one, Dave Raggets, thats a lot of help for me. A great noob walkthrough.

One overall question about CSS, will search engines read a page with css as they will read one with basic html ?

Good question. I don't know how well google parses style sheets (if it does at all) but I try to use <strong>, <em>, and <h1>, tags where I can.

If you need to bold something stick with <strong> or <bold> instead of <div style="font-weight:bold"> just in case.

Use the tags when possible for simple things. That's the general rule of thumb I follow. Google and MSN have no problems indexing my pages as far as I know (and most of them make use of CSS)

I've always believed Google will love you for using CSS and cutting out extraneous shit HTML in your designs. That's just a huntch though. I have no proof of that whatsoever.

You might loose some weight in the SEs changing out various tags and replacing them with their (astetically) superior CSS equivalent. This is a loss I am willing to make to make my sites look a bit crisper. its up to the designer =)

[Doug E]

Also I would like to know why you are using h-tags? Do SEs give them a better position or ranking?

Ive always read that on html help sites and SEO sites, but lately ive been finding a lot of these sites arent updated all that regularly and some of the tips im getting could be years old and/or frowned on by SE's since being published. Basically Im just using them to try to add weight to some keywords and search terms.

You might loose some weight in the SEs changing out various tags and replacing them with their (astetically) superior CSS equivalent. This is a loss I am willing to make to make my sites look a bit crisper. its up to the designer =)

for sure, I guess I just have to find a balance that A. makes things easier for me without B. making me uncomfortable thinking google will punish me for it.

I just got into this business and am quite proud that my first google update took me from PR0 to PR3, its the one thing keeping morale high lately, I dont want to lose it