text sizing

[philbert25]

I just redigned the homepage of the Community College I work for, using CSS. I realize now that when the font size is icreased in the browser it messes everything up. Firefox handles it a little better than IE. Would setting Minimun heights on the navigation areas make a difference. Also, should I set line heights to be measured in em's? Any ideas would be very helpful.

[DeadMeatGF]

Using ems will expand/contract the elements with text size.
However, there are pros and cons for each of the sizing options, and often a combination is the best soloution.
If you've got a link so people here can see what you mean, it'll be easier to post suggestions.

[philbert25]

Sorry, I meant to include the address.
http://www.jalc.edu/

[DeadMeatGF]

In my opinion, there are two things breaking this.
1. div #banner1 which stops the John A Logan title getting above a certain width.
2. The menu bar. There is no need for this to be fixed - just allow the left sidebar to expand (give it an em value) and float the menu bar under the heading and to the right of the sidebar.

[philbert25]

I've made a little progress by taking the width out of the container div. When increasing the font it doesn't look pretty, but it holds up better in IE. Now, I'm losing visibility on some of the navigation in Firefox. As far as moving the overhead menu, I'd rather not, becuase it was created long before I came to this job, using a program called Menu Machine. I plan on replacing it eventually but for now, I don't want to screw anything up messing by with it. I can make the backgrounds bigger in column 1 and 2 for expanding heights, if I can figure out how to make the heights expand fluidly.

[DeadMeatGF]

If you look at the line

<div id="bbML" style="color: black; font-size: medium; font-family: serif; background-color: #000; visibility: visible; display: block; position: absolute; z-index: 1000; top: 32px; left: 33px; width:630px; height:35px">

this has the positional values for the menu.
You should be able to adjust those without affecting anything except the position.
I didn't spot it earlier as I forgot to check for inline styles, sorry!

[philbert25]

I see what you are saying about the menu, but my biggest problem is with the three columns. I want them to expand when the text size is increased. I can do this by taking off the width off of the container div, but when you resize the window, it kicks the columns down as the window gets thinner. If I give the container div a size, it kicks the columns down when the font size is increased. Minimum widths work for firefox, but not IE. Let me know if you guys have any ideas.

[philbert25]

I just realized that if I take all the widths off of the columns and set the container width much wider than the width of the three it can expand without collapsing. Now if I can just get it to look better when it expands (ex. banner1, column1 and bottomnav).

[philbert25]

Changing from pixels to ems helps everything a little bit too.