The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Text Size Increase problem in Safari

  • # October 25, 2009 at 1:49 pm

    Hello Friends,
    I coded this site sometime back and someone pointed out this problem to me now. After I increase the text size, the whole layout get’s messy. It only happens in safari. When I do it in IE, Chrome or Firefox, the whole layout/site increases gracefully. But in safari, all the divs remain the same size and only the text size increases :| Is there any solution for fixing this on safari?

    Thank you,

    ~Sumeet Chawla

    # October 25, 2009 at 6:27 pm

    That is exactly how it should be working.

    There are two different zoom options. One is a text-resize, and the other literally just zooms into the page. Some browsers default to different things. If you’re seeing the divs change size too, it means it’s on "page zoom". If only the text changes, it’s on "text-only zoom".

    # October 25, 2009 at 9:17 pm

    Thanks doc for that info. So basically, Safari only supports text increase? The thing is that if I increase the text size in Safari the text gets overlapped and goes out of the div.. Is that normal for a website using DIV layouts or did I miss out on something?

    # October 26, 2009 at 1:31 am

    No, Safari supports both types of zoom.

    Generally, you should be able to increase the text size twice without breaking a layout of a site. If you can only go once, that’s not too bad, but you should really aim for two.

    If your text is going outside of the div, I assume the div has a fixed width/height, so there’s really no way of getting around that. Do you have an example?

    # October 26, 2009 at 5:17 am

    Ah, I see.. Yea, I knew that with fixed height and width the layout will break.. But I didn’t know that there are two kinds of zoom :P
    Here is a preview of the site I was talking about. It has a fixed width height because of the design. Its a static, brochure site.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed