[Yokohama]

I've long had a problem with some Web sites because the text overlaps in some sections making them difficult to read. For instance:http://www.alarmsystemreviews.com/hi...m-keypads.html is hardly readable.
Any suggestions to overcome this will be most welcome.
Thanks.

[Big Mac]

Renders fine for me in Safari 4, Yokohama.

[Yokohama]

I'm using Safari 4.0.4 and have had this problem since the first version of Safari and with versions of FireFox. I use a newish iMac, though the problem existed on my previous iMac.

[Thorzdad]

Renders fine for me, too. Weird.
The first thing I would look at is in Preferences>Advanced. See if "Never use font sizes smaller than:" is checked and what the minimum font size is set to. A high number will cause fonts to overlap. Though, this will also cause the fonts to be much larger, too.

You aren't using a custom stylesheet, are you?

A screenshot of what, exactly, you're seeing would be helpful

[Oisín]

I have occasionally seen overlapping if the default font is ‘taken over’ by one of the fonts intended for CJK text. The spacing and sizing of the Latin letters in those fonts are completely useless.

Yokohama, do you have OS X set up in Japanese? I have no idea if it’s actually possible, but I’m guessing Safari (and Firefox?) might possibly then use the default Japanese font (Hiragino?) even for Latin text where it should just be using Helvetica/Arial/whatever. That would definitely cause incorrect spacing, and it might even cause overlapping.

As Thorzdad said, a screenshot would be very helpful.

[Yokohama]

Thanks, everyone, for the replies.
I am using a Japanese keyboard but use the English Mac OS 10.5.8 and mostly input in English.
I tried making the fonts smaller, but the text still doubles up on some sites.
I don't have a webpage that will enable me to send an example of what I'm talking about. If this changes or I figure out another way of sending an example, I will post again in the future.

[reader50]

Yokohama, there are assorted websites that will host photos for free. example: flickr

[Yokohama]

Here is the example I talked about above:

[TETENAL]

I get the same if I increase the text size once (text zoom only). That is a layout issue with this particular site. A web page should be able to cope with non standard text sizes.

Maybe you have a custom style sheet that causes the text zoom all the time for you.

[Yokohama]

Tetenal, thanks for the reply. What is a custom style sheet? And how can I change it should this be the problem? I have the same problem when using FireFox too!

[Love Calm Quiet]

Yokahama: For me, too, your page looks *fine* in Safari 4.0.4 (OS X 10.6).

Perhaps you could try temporarily putting different colored borders around your divs/paragraphs in the main content section so that you can see *which* divs/paragraphs are overlapping.

As for the "custom style sheeet" - I think Tetenal means the option in Safari (Preferences/Advanced) to select a style sheet that you create and have put in your *local* Safari folder (~user/Library/Safari). HOWEVER: Since you are having problems in FireFox as well, I don't see how anything you do with a Safari custom style sheet could be relevant.

I'm art a loss what's happening on your system.

I did, however, glance at your html code and see that you've got a lot of *position:absolute* attributes - and with a lot of the positions specified in pixels. I wonder if this gives you problems.

What happens when you enlarge/shrink sizes in your testing browser (with ⌘- and ⌘+) - which works in both Safari & FF.
Does that change the overlap?

[Yokohama]

LCQ--I tried enlarge/shrink using Safari's A-A in the menu bar. It clears up if I enlarge it several times! So this is quite an easy workround. Thanks very much. I'd tried SHRINKING font sizes before and changing fonts; it never occurred to me to enlarge the font. So until a better solution comes along, I'll use the workround.

[TETENAL]

Try turning on "Zoom text only" and then shrink the text in Safari. Otherwise it will also shrink/enlarge the layout which preserves the problem.

Also check Safari->Preferences->Advanced->Style Sheet and see whether you have a custom style sheet installed. That's the only thing I can think of why you have a different font size than us.

[Yokohama]

I checked Style Sheet, but there is nothing chosen, so that's not the problem. Maybe it has something to do with the Japanese keyboard, even though I'm using the English OS and US key input? Anyway, it is a simple task now to use enlarge when I come across this problem. I appreciate all your suggestions.

[reader50]

Create a new account on the same Mac. From there, browse your link. See if it renders right the first time.

I'm thinking someone set a minimum font size on Safari and Firefox in your account a long time ago. Then you migrated the same account across OS and Mac upgrades.

[Yokohama]

Yes! The Admin's advice worked. No overlapping of text in new test account.
Now, can I use this knowledge to fix the problem in my old account or is there an easy way to simply transfer the entire setup over to the new account? I'm the only user and therefore the admin.
Sorry to be turning this into a saga.

[reader50]

Firefox -> Preferences -> Content (tab) -> Fonts & Colors (section) -> Advanced (button) -> Minimum font size (popup) -> set to "none"

Safari -> Preferences -> Advanced -> Universal Access (checkbox) / Never use font sizes smaller than (popup).
Set the popup to 9, then uncheck the box.

If it doesn't work in one or both browsers, quit the browser and delete its preference file.
org.mozilla.firefox.plist
com.apple.Safari.plist

You'll have to reset a few settings afterwards if you toss a prefs file.

[Yokohama]

Admin--Your instructions were spot on and everything is working as a Mac should.
But now there is a new problem--my eyes! The text is now a little too small for comfortable reading at the new setting. I guess that's why I played around with it some years ago and had it set at Minimum Size of 14, not realising it had caused text to overlap on some sites. If I change it back, presumable I'm back to where I started? If so, then I would prefer to have the larger text for reading most web sites and just use Enlarge when I get overlap on the few problem pages. Zoom is not really an option for general reading because it blurs the text slightly, or at least the text is less sharp. Unless there is a way to prevent overlapping text while using a larger font, I will just have to go back to my previous setting and live with it. And apologise for taking up everyone's time.

[AKcrab]

Find a font size that works all the time without causing wrapping, and then use cmd + and cmd - for your font size adjustments on a page-by-page basis.

[TETENAL]

Originally Posted by Yokohama 

But now there is a new problem--my eyes! The text is now a little too small for comfortable reading at the new setting.

You can use a custom style sheet to change the default zoom.

Paste the following into TextEdit:

body {
zoom: 150%;
}

Then do Format->Convert to raw text. Save the file as "custom.css" (uncheck the "Use .txt suffix" checkbox). Select this custom style sheet in Safari->Preferences->Advanced.

Since zoom changes the layout together with the text size, you avoid any layout distortion problems like the overlaying text.

Obviously you can change the zoom level to your vision.

[reader50]

As a more long-term solution, you could select a lower-dpi monitor the next time you upgrade... oh wait, iMac. Though you could use a big external monitor as the primary.

There is the Resolution Independence function Apple has been fooling with forever. Install the Developer Tools. Then go to:
/Developer/Applications/Performance Tools/Quartz Debug.app

In the menu, go to Tools -> Show User Interface Resolution

Changes only apply to apps launched after the change. And the changes don't hold through reboots our logout/login. Also, a lot of apps are buggy in supporting varying render resolutions. But it may do what you want.