So the idea is that I have a list of states (52 including DC and Puerto Rico) and I want them to be listed on the side of the main content. I’ve done that, but I also want make the height of the list equal to the content height (it changes depending on what it draws from the server).
In changing the height to match the content I now have the need to change the font-size and line-height to match increases and decreases in size of content. My way to change the state list height works and it changes to match the content but the font size and line height will not change… I can’t figure out what I’m doing wrong and at this point I’ve been staring at the code for so long I can’t seem to see any errors.
Note about the code. The function is called when the full height of the content has been determined (i.e. all images have loaded in the content portion of the page) so the height will remain accurate. I know it’s running because the stateList gets resized upon change of the content height.
function setListHeight()
{
var fullHeight = document.getElementById("infoWrap").offsetHeight + document.getElementById("footer").offsetHeight;
document.getElementById("stateList").style.height = fullHeight + "px";
var calcLineHeight = round((fullHeight/52) - 1);
var calcFontSize = 0.7 + (calcLineHeight / 12);
$("#stateList a").css("line-height", calcLineHeight);
$("#stateList a").css("font-size", calcFontSize);
}