CODEWITHSUNDEEP
csszooming
baarkerlounger
baarkerlounger

Reputation: 1226

Zoom breaks CSS

I the following javascript which creates a rectangle of 125 divs by 75 divs. As follows:

function createFlag() {
var flag;
var counter = 1;
var rowCounter = 1;
var divs = 10000;
flag = '<table cellspacing="0" cellpadding="0"><tr>';
for (var i = 0; i < divs; i++) {
    if (i % 125 === 0) {
        flag += '</ tr><tr>';
        rowCounter++;
        counter = rowCounter;
    } else flag += '<td id="pixel_' + counter + '" class="pixel"></td>';
    counter += 80;
}
flag += '</tr></table>';
$('#flag').append(flag);
}

And I have some CSS which works fine while no zoom is applied. The CSS uses % and em for sizes which I thought should mean that relative proportions would be kept. The problem is as soon as you zoom in or out the rectangle of divs distorts shape.

To see what I mean the url in question is here: link here

How can I keep the proportions when zooming? All help appreciated of course.

Upvotes: 2

Views: 412

Answers (1)

flyingjamus
flyingjamus

Reputation: 4023

Your table can't expand any more because the #flag div's width is 45% of the #container div width, which itself is 50% of the <body>. The width of the <body> doesn't change when you zoom, so the width of your table can't.

So you can either change the layout so that the form and the flag won't be float side by side, or just change #container's width to em's or px's.

Upvotes: 1

Related Questions