/    Sign up×
Community /Pin to ProfileBookmark

Browser settings and Text Size

Copy linkTweet thisAlerts:
Mar 01.2005

I am currently making a website for a class, and I thought I had a clever idea for image buttons.

I made one image to use as a background for all my image buttons, and put the image where ever I wanted a button to be. I would use the DIV STYLE positioning command to place text directly over the image, representing where the button would go. I hyperlinked both the image and the text, and everything works nicely.

However, I happened to visit my own website on a friend’s computer and I noticed that the text no longer sat on top of the images because he had his browser text size set larger than I had when I was building the site.

Is there a command that makes the text size constant?

to post a comment
Full-stack Developer

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@AdamGundryMar 01.2005 — Only in broken "web browsers" (Internet Explorer comes to mind). You should not try to interfere with the user's preferences for text size, but instead design your site to cope with a range of sizes.

Perhaps you might find [url=http://www.alistapart.com/articles/slidingdoors/]this article[/url] helpful.

Adam
Copy linkTweet thisAlerts:
@CausticauthorMar 01.2005 — The reason I ask this is I have seen it done before on many sites, where you can change the text size in your browser and certain texts on the page are not affected.

On these forums, for example. I can change the text size all I want, but the "Recent Articles" links and the "Go to first unread post" link are unaffected. Yet... the text size of the posts are affected.

I'm just wondering if there is code where you can make the text size not alterable using browser settings.
Copy linkTweet thisAlerts:
@spufiMar 01.2005 — If you set the font size with a unit of "px," it is harder/not possible to change that font size in IE. Any real browser will allow the user to change the font size, no matter how it is defined(as it should). If you are using "px" to force the user to have a certain sized font, you are doing something wrong in your design in the first place. In this case you may need to rethink the design of the image button so you can make it work when the font size is changed.
Copy linkTweet thisAlerts:
@CausticauthorMar 02.2005 — Thanks for your help.

The alternative to this idea is to make several separate images to use as buttons, but this makes it so anyone visiting the website must download each and everyone of them, making load time unnecessarily long. Having only one image makes it so the visitor only has to download the one image, which is used several times on the page for different buttons that lead to different sites.

My goal was to have professional looking buttons that change color when the mouse goes over, but not having 2 images for each button I want to make. Naturally, if I did that, I would be making any visitor download 20+ images to view the site. Using the same two images over and over and simply putting text over it cuts load time significantly and has the same effect... if the text size is proper.

So the general outlook is that if someone is using Netscape or another non-IE browser... I'm screwed?
Copy linkTweet thisAlerts:
@toicontienMar 02.2005 — [i]Originally posted by AdamGundry [/i]

[B]Only in broken "web browsers" (Internet Explorer comes to mind). You should not try to interfere with the user's preferences for text size, but instead design your site to cope with a range of sizes.



Perhaps you might find [url=http://www.alistapart.com/articles/slidingdoors/]this article[/url] helpful.



Adam [/B][/QUOTE]
Just as Adam said. The article he linked-to will give you an answer.
×

Success!

Help @Caustic 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 6.18,
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: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

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