Website design issue with text size and browser viewing

[hbradshaw]

Good Morning All,

Where to begin.

I have a few people who increase the size of their text within Internet Explorer. They do this by going to View, Text Size, and select Largest Size.

Well, the website when it appears with a normal text appears on the browser as it should.

But, when the person increases their text size in the browser, the website does not appear correctly. Text are being wrapped around to the next line.

Yet, there are other sites which you view with the larger text appears correctly. Meaning that the text is larger but there is no wrapping.

I guess the best way to further explain this is if you see it for yourself.

My site with the problem is: http://www.informedmortgage.com

A good example where a site appears correctly regardless of the text size chosen is:
http://www.yahoo.com

First, view Yahoo with the medium text size (which is actually normal).

Second, open a second browser, view Yahoo again this time go to the the View menu at the top of your browser, selet Text, and then Largest.

Notice, between the two browser windows that the links appear exactly the same except for the text size.

Now, if you go to http://www.informedmortgage.com and do the same thing as you did with Yahoo (medium and largest text size), you'll will notice how text is wrapping to the next line.

My question, finally, who can I compensate the text size from the browser when designing a site so that the site appears as it should regardless of the text size?

Any help is greatly appreciated. Thank you in advance.

Helen

[sharkey]

The best way to do it would be to use css for layout i.e. divs then use relative widths such as "ems" so that the site will increase when such as text size is increased.

[hbradshaw]

Thanks for your reply. I've never used ems.

What are they? How do they work? How should they be used?

For example, the font that I'm using on my web page is Verdana - 10px.

How do I go about apply the ems to that font attribute so the browser can display the page correctly?

Thanks.

[Pittimann]

Hi!

Whatever units you use in your css, because of your HTML it would be meaningless. In your td's, you are using the font tag and this will override your css.

Let's say, you want all the td's with <font size="2" face="Verdana">blah</font> have a fixed font-size of 10px, you just create a class in your css with that font-size (and family and stuff), assign it to the td's in question and (VERY IMPORTANT) remove the font tags. Whereever different sizes (or colors or family, weight, whatever) are required, use a different class with these attributes defined.

Once you did that with your entire HTML, you will see that the browser settings would not change that stuff any longer.

Cheers - Pit

[hbradshaw]

Hi,

Thanks for the info.

I'll rework the web pages using your suggestion.

Hopefully, I understood what you wrote and my web pages will be normal.

Thank you for the help.:)

[Pittimann]

Hi!

You're welcome! :)

Cheers - Pit