Zoom In/out How Do I Keep The Aspect Ratio?

Working Example: http://jsfiddle.net/4jmY2/4/ If you Zoom in/out (ctrl +/-) you will see the elements move around, how can I keep the aspect ratio so the content will remain the sa

Solution 1:

Well, I finally had a go at doing this. I had to do it from scratch, and it took a while.

Live Demo

It looks like this for me:

• Tested in IE7/8 plus recent versions of Firefox, Chrome, Safari, Opera.
• You can zoom in!

If there's anything wrong or you have any questions, let me know.

HTML:

<divclass="check_box"><divclass="check"><spanclass="your_left"><em>Your Name</em><br />Your Address</span><spanclass="your_mid"><em>Your Bank Name</em><br />Bank Address</span><spanclass="your_right"><em>1001</em></span><spanclass="date">Date<span></span></span><spanclass="pay_to">Pay to the<br />Order of<span></span></span><spanclass="dollar"><br />$<span></span></span><spanclass="dollars"><span></span>Dollars</span><spanclass="extraline"><span></span></span><spanclass="numbers"><span>&#9288;<b>1001</b>&#9288;</span><span>&#9286;<b>123456789</b>&#9286;</span><span><b>987&nbsp;6543210</b>&nbsp;&#9288;</span></span></div></div>

CSS:

.check_box {
    font: 10px/1.3 Georgia, serif;

    border: 2px solid #1a1b1b;
    background-color: #dfe5e5;

    width: 292px;
    padding: 4px;
    margin: 0
}
.check {
    position: relative;
    height: 102px
}
.check > span {
    position: absolute
}
.checkem {
    font-size: 12px;
    font-style: normal
}
.datespan, .pay_tospan, .dollarspan, .dollarsspan, .extralinespan {
    border-bottom: 1px solid #000;
    zoom: 1/* fix ie7 */
}

.your_left {
    top: 0; left: 0
}
.your_mid {
    top: 0; left: 95px; text-align: center
}
.your_right {
    top: 0; right: 0
}

.date {
    top: 28px; right: 0
}
.datespan {
    padding-left: 50px;
    margin: 2px003px
}

.pay_to {
    top: 35px; left: 0
}
.pay_tospan {
    padding-left: 180px;
    margin-left: 3px
}

.dollar {
    top: 35px; right: 0; text-align: right
}
.dollarspan {
    padding-left: 50px;
    margin-left: 3px
}

.dollars {
    top: 62px; left: 0
}
.dollarsspan {
    padding-left: 250px;
    margin-right: 3px
}

.extraline {
    top: 76px; right: 0
}
.extralinespan {
    padding-left: 120px
}

.numbers {
    bottom: 0; left: 0
}
.numbersspan {
    margin: 010px00
}

Solution 2:

Not sure that I understand your question. But when I zoom in, the text components scale up while the background "check" style does not.

It sounds like you want the check to scale up as well. If so, you might need to create em-driven div styles, which will scale with the browsers font selection.

Here's a good article with several examples.