/    Sign up×
Community /Pin to ProfileBookmark

View Text Size Issues in Firefox

Copy linkTweet thisAlerts:
Jan 29.2006

I have a text resizing issue. I changed all my code over to semantic h1, h2 etc instead of the individual divs for each thing, and I really like it.

I have some text on the top of my page that I do not want to get bigger when the person enlarges the text, as it is already really big…it’s a title. I found out by accident that I can keep text from enlarging in IE by assigning points vs ems as shown below. The “problem” arises in Firefox…the text grows up too big and wraps and looks bad. It works great in Opera though…

If anything I would have expected a problem in IE, but maybe it likes my bad coding…can someone tell me the right way to selectively allow text to be enlarged when someone uses control + ? CSS is inline for troubleshooting only. Thanks! ?

[CODE]<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<head><style type=”text/css”>
h1{
font: 38pt Arial, sans-serif;color:#e9c62a;
margin: 0 auto;background-color:#ffffff;
letter-spacing: 8px;text-align:center;padding-top:15px;
}
h2 {
font: 18pt Arial, sans-serif;color:#333;background-color:#ffffff;
letter-spacing: 0px;margin: 0 auto;text-align:center;padding-bottom:15px;
}
h3 {
font:.9em Arial, sans-serif;font-weight:bold;color:#faa71b;
background-color:#ffffff;text-align:left;margin-left:210px;margin-right:80px; margin-bottom:0px;
}

</style></head><body>

<h1>I don’t want These<span style=”color: #faa71b”>Words</span></h1>
<h2>to expand in Firefox…but they do.</h2>
<h3>I do want this text to get bigger (cntrl-+)…and it does so correctly.</h3>
</body></html>[/CODE]

to post a comment
CSS

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@toicontienJan 29.2006 — First and foremost, if a user increases their text size, it means they can't read your text. Not allowing IE-Win users to increase their text size is a violation of a user's control of their computer. Internet Explorer shouldn't even allow that. You want people to read your site, so let them resize text as they see fit.

Secondly, IE-Win is the only browser that prevents users from resizing their text. There is no way to do it in any other browser.

The challenge is to design pages the are flexible enough height-wise so that increased text sizes don't break the layout. That means, if any box on your page will contain text, do not give it a height. Just let it flow.
Copy linkTweet thisAlerts:
@KeveyauthorJan 29.2006 — I agree in theory...but still want the work-around. The text in question is a banner title (h1) with a size of 38pts, and a subheading (h2) of 18pts...I just want them to stay 38pts and 18pts. The body text of the page (h3) is resizeable from 0 points to anything they want it to be...I just want the title to stay still so it looks right....whatever that is. ?

I completely agree with what you're saying though...thanks for the input...
Copy linkTweet thisAlerts:
@toicontienJan 29.2006 — But you missed the answer to your question: [b]You can't prevent non IE-Win browsers from resizing the text.[/b] Even IE5-Mac allows you to change the font sizes. You just can't prevent it. It really all comes down to you setting the font sizes to how you want them to look by default. Just don't sweat it too much when a user increases their text size. It might look ugly to you, but they can read it. And to them, that's all that counts.

... Although I [i]can[/i] see why you'd want to prevent them from increasing a 38pt font. Generally speaking that's plenty big, and a couple Ctrl + in Firefox and you'd get giamundus text (pronounced jie-mun-duss ?).
Copy linkTweet thisAlerts:
@NogDogJan 29.2006 — Only option I know of is to make the H1 text into a graphic, put it inside the H1 tags, then be sure to replicate the text with the ALT attribute for non-graphical browsers:
[code=html]
<h1><img src="title.png" alt="My Title" height="50px" width="200px"></h1>
[/code]
Copy linkTweet thisAlerts:
@KeveyauthorJan 29.2006 — Thanks to both of you...you're right I missed the answer ? I should have increased my text size and read more carefully ?

Thanks again...good idea on the graphic...I may try that out.
Copy linkTweet thisAlerts:
@JPnycJan 29.2006 — Use em's instead of pt or px.
Copy linkTweet thisAlerts:
@felgallJan 29.2006 — You can't prevent anyone with IE on Windows (as with all other browsers) from creating a user stylesheet and making the web page appear the way that they want it to.
Copy linkTweet thisAlerts:
@KeveyauthorJan 29.2006 — Gotcha...i've never met someone that actually does that...but definitely believe that people do. Thanks all.
×

Success!

Help @Kevey spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.4,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...