Text Size 1

[jakeyg]

What are the conditions for getting the Text Size option in IE (and other browsers ???) working?

In tek-tips for example, changing the Text Size only affects some of the headings like "Member Moderated" and "Programmers" but headings like "HTML, XHTML & CSS (Cascading Style Sheets) Forum" are unaffected.

On some sites the font size only changes fractionally and on others from tiny to humungous.

ta

 

[BillyRayPreachersSon]

Basically - don't used "px" for your font units. Use ems, percentages, points, whatever - but not px.

I find this works well, to give a consistent size across browsers, including Safari:

/* Set default font size to 16px for Safari. Thanks to Harry's post here for this tip: [URL unfurl="true"]http://www.clagnut.com/blog/348/#c794[/URL] */
body {
	font-size: 100%; /* For IE */
}

html>body {
	font-size: 16px; /* IE can't read this */
}

Then, you can scale up or down from there as desired.

Hope this helps,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[ChrisHunt]

Use ems, percentages, points, whatever

Correction: Use ems, percentages, whatever

Points are absolute units too.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[jakeyg]

Lovely
Is using px elsewhere in the CSS like

margin:10px 0px 16px 0px;
line-height:20px;

considered good or bad form ?

 

[BillyRayPreachersSon]

That depends on the circumstances surrounding each usage. If, for example, you wanted an element's margin to be offset a set distance so you could sit an image next to it, you would use px.

Dan


[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[mkrausnick]

You can also use descriptive sizes from xx-small to xx-large:

.massive { font-size:xx-large }



Mike Krausnick
Dublin, California

 

[jakeyg]

Just noticed that even though my menu links are defined with px

a.menu {
color:#09c;
font-size:16px;
text-decoration:none;
font-weight:600;
font-family:verdana, arial, helvetica, sans-serif;
}

The menu items grow/shrink a little bit
Any ideas why?

 

[BillyRayPreachersSon]

It's probably white-space surrounding your menu elements that is growing / shrinking, at a guess.

Dan


[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[jakeyg]

Checked every number in the CSS and the fixed sizes for margins/padding/whatever are all defined using px, so that shouldn't move.
I've tried changing/removing every line within the CSS to see which line affects it, but no matter what I get rid of the menu items grow and shrink, no matter where the menu actually is on the page.

Are there any other factors which can affect the menu?

 

[FesterSXS]

when you say it grows and shrinks - do you mean when you place your mouse cursor over the menu links?

If so - where is the CSS code for a.menu:hover?

Tony

Spirax-Sarco - steam traps control valves heat exchangers
Sun Villa - Luxury Florida accommodation

 

[tsdragon]

Tony may be on the right track. If the font size, or even the font weight, changes on hover that would affect it. Even bolding a word makes it longer.

Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.

 

[jakeyg]

No, I've got nothing on the hover, yet ;-) it's just when you alter the size of the text. Nothing else on the page moves

Me site is

http://www.gallowtech.co.uk

Don't laugh at the site too much it's only there for me to play around with code and colour combinations which isn't easy when you're colour blind

 

[BillyRayPreachersSon]

It can't help that you have two elements with the same ID ("menu") - I'd fix that before trying to track this down, as you may well find your CSS is not being applied correctly because of that.

Hope this helps,
Dan


[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Vragabond]

Your <li> elements have a font size of 1em. Ems are relative measures and expand/contract when larger/smaller text is chosen. Since your links are in list items, those items grow and your links jostle around. If you give your <li>s fixed font size, you're all set.

 

[jakeyg]

I've changed one of the menu elements and it looks like I accidentally changed the <LI> when I changed all the other fonts over to ems :-( DOH

On a whim I tried not using <LI>s to define where the buttons sit and it looks and acts fine, so I'll leave it now that it works

thanks for the help guys