CODEWITHSUNDEEP
htmlcss
schenker
schenker

Reputation: 953

Text runs out when zoom level set to 25%

When i zoom-in my website to 25%, the text runs out oddly. How can i fix this? Pls have a look at the below link, where you can see the result of a mock-up. Thanks.

http://jsfiddle.net/schenker76/YqX9r/embedded/result/

Upvotes: 0

Views: 439

Answers (2)

Brilliand
Brilliand

Reputation: 13714

First, this problem only occurs in Chrome, and so is probably resulting mainly from rounding errors (Chrome tends to truncate decimals in element positions). Firefox is only showing nigh-insignificant variations in text wrapping, and IE is keeping the text exactly to scale with the rest of the document.

The simplest solution is probably to stop absolute-positioning everything, if that can work with your design. If the text were allowed to follow the normal flow, then it would look OK in every browser, though Chrome would still do some minor jumping around like you see in Firefox (and the "wel_txt" element might get very large, relatively speaking, due to the text not shrinking fast enough).

To clear up the problem with fewer design adjustments, you could position the "wel_hdr" element using top instead of bottom, and... perhaps give "wel_txt" overflow: auto so that it gets a scrollbar rather than hiding the text completely.

Upvotes: 1

doptrois
doptrois

Reputation: 1570

Setting the width from #wel_txt in % than in pixels, will fix the problem.

#wel_txt {
    position: absolute;
    width: 70%;
    height: 92px;
    top: 50px;
    margin-left: 100px;
    text-align: left;
    overflow: hidden;
}

Hope this helps.

Upvotes: 0

Related Questions