jerry_sidower

You are very correct, Haku. However, the OP never specifically mentioned which font the chart was derived from. He later asked if the chart would apply to the CSS code he listed. I am unable to answer this, as the font-family contains a great number of fonts, and each font could potentially have a different px height when viewed at the different em values. For example, take this situation: A capital letter "X" in the "Arial" font and viewed at 1em stands 12px tall. The same capital letter "X" in the "times" font and viewed at 1em only stands 11px tall. The only change made between these two was the font being used, and since em values are dependent on the font the final rendered character came out to be 1px smaller for the "times" font. I realize that these two fonts are actually from different families, but it demonstrates that different fonts will display differently, despite having a consistent em value. Because of this, there is no silver bullet equation for converting px values to em values when you are concerned with more than one font. So to conclude, the table the OP found may work for one of the fonts listed in his CSS code, but may not work for all of them. In the end though the differences will probably go unnoticed when dealing with smaller font sizes, so feel free to use the table. I'm afraid I do not know anything about Lordfrikk's method, as I do not usually make changes to the base size of the font. The article he mentions is well worth a read. I will have to take a more in-depth look at these methods and see how they work out. Personally I've always just used Haku's technique and toyed around with the values until I got something that I liked. Cheers, Jerry Sidower

Unfortunately there is no universal way to convert px measurements to em measurements. James Whittaker explains that "An em is a relative measurement based on the square of the font size at that particular point. As font sizes can vary across differing systems and displays, the result is that the em measurement will always be relatively sized and scalable." This means that the value of 1 em will vary depending on what font is being used. Px sizes are dependent on the screen resolution of the user, while em sizes are dependent on both the font being used and the base size of that font used on the page. Although the values you worked out may work for the font and resolution you had, it will not carry over so gracefully to other fonts. For more information check the following article on James Whittaker's site: http://www.jameswhittaker.com/blog/article/em-based-layouts-vertical-rhythm-calculator/ Cheers, Jerry Sidower

Without a link to the page in question I can't be sure this is what you're really looking for, but give this a try: Try placing the footer in a div with an id of "footer" like eddierosenthal suggested, but set the div to have an absolute width. Set the left and right margins to "auto" to center the div. The problem is your footer div has absolute positioning, which overrides the margins and automatically pushes the footer to the left. To fix this, enclose the "footer" div in another div with enclose the "footer" div with an id of "footerwrapper". Give this div the absolute positioning instead. <div id="footerwrapper"> <div id="footer"> <p>FOOTER CONTENT GOES HERE</p> </div> </div> /* CSS DOCUMENT */ div#footerwrapper { position: absolute; bottom: 0; width: 99%; } div#footer { width: 700px; margin: 0 auto; text-align: center; } This was tested in Firefox 2.0.0.12 and IE7, and works in both. The CSS code passes W3 validation. The width for the "footerwrapper" div is set to "99%" to prevent the horizontal scroll bar from appearing. There's probably a better fix for this but it's beyond my knowledge. Cheers, Jerry Sidower

Sorry man, I was trying to work through it but had no such luck. I was mighty confused when I refreshed the page and a bunch of new boxes popped up and your descriptions had moved. I do like the way the new javascript looks on your site though. Cheers, Jerry Sidower

Here, Check out http://www.tutorialized.com/ They have a huge collection of tutorials covering a vast range of topics. If you're looking to learn CSS for the first time check out http://www.davesite.com/webstation/css/ It's an interactive CSS tutorial that teaches you by letting you work with the code and see the results. Cheers, -Jerry Sidower