Alignment problem in webpage on screen resolution change

[nataraj jaideep]

Hi,
I created a textsizer in css and jquery. The purpose of this is,
1. on webpage there is a link called "textsize", when you click a popup is shown and it contains 3 options (increase font, decrease font and reset font).

I had aligned my pop up box according to the screen resolution 1024 X 768, when i change the screen or system resolution to lower or higher the css alignment is not proper.

Please find the css, html and jquery code.

/* starting of textsize */
li a.textTool:hover, li a.textToolActive { 
    background:#0063be url('../Images/tools/text-on.gif') -1px 0px no-repeat;
    color:#ffffff;
    text-decoration:none;
    height:25px;
/*    width:55px; */
    margin-top:0px;
    background-color:#0063be;
}
 
 
.text-tool {
    position:absolute;
    left:704px;
    width:125px;
    top:228px;
    right:260px;
 
        -moz-box-shadow: 3px 3px 4px #000;    
    -webkit-box-shadow: 3px 3px 4px #000;     
    box-shadow: 3px 3px 4px #000;    
    /* For IE 8 */    
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";    
    /* For IE 5.5 - 7 */    
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}
 
.text-tool .header { 
    background:#0063be;
    width:125px;
    height:25px;
    position:relative;
} 
.text-tool .header h5 { 
    color:#fff;
    padding:5px 0 12px 2px;
    font-size:1.1em;
    font-weight:bold;
}
.text-tool .header .close {
    position:absolute;
    top:10px;
    right:10px;
    cursor:pointer; 
}
.text-tool .body { 
    background:#fff;
    border-bottom:#ccc solid 1px;
    border-right:#ccc solid 1px;
    border-left:#ccc solid 1px;
    padding:5px 15px 0 0px;
    height:25px;
    width:125px;
    position:relative;
} 
.text-tool .body .a1{
    display:inline;
 
}
/* End of textsize section */
 

Jquery code

 
        $(" a.textTool").click(function () {
            $('a.textTool').removeClass("textTool").addClass('textToolActive');
            $('.text-tool').removeClass("hide");
        });
 
        $(".text-tool li.email a").click(function () {
            $('.text-tool .body').animate({ height: "305px" }, 650, function () {
                $('.text-tool .body .text-tool-email').fadeIn(200);
            });
 
        });
 
            $(".text-tool .close").click(function () {
            $(' a.textToolActive').removeClass("textToolActive").addClass('textTool');
            $('.text-tool').addClass("hide");
            $('.text-tool .body .page-tools-email').css({ 'display': 'none' });
            $('.text-tool .body').css({ 'height': '25px' });
        });
 
 
//Font sizer starts here
$(" a.textTool").click(function () {
            $('a.textTool').removeClass("textTool").addClass('textToolActive');
            $('.text-tool').removeClass("hide");
        });
 
$(document).ready(function(){
                               //$(document).height(".page-tool .body"); // returns height of HTML document
    var MaximumFontSize = 15;
    var MinimumFontSize = 6;
    var $currentObject = $(".threecoloumlayout").children(".column-2");
 
  // Reset Font Size
  var originalFontSize = $currentObject.css('font-size');
  $("#resetFont").click(function(event){
    event.preventDefault();                             
    $currentObject.css('font-size', originalFontSize);
  });
  // Increase Font Size
  $("#increaseText").click(function(){
    var currentFontSize = $currentObject.css('font-size');     
    var currentFontSizeNum = parseFloat(currentFontSize, 10);
       var newFontSize = currentFontSizeNum+1;
    if (newFontSize < MaximumFontSize) {
        $currentObject.css('font-size', newFontSize);
    }    
    return false;
  });
  // Decrease Font Size
 
     $("#DecreaseText").click(function(){
      var currentFontSize = $currentObject.css('font-size');
     var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum-3;
    //alert('currentFontSizeNum');
    if (newFontSize > MinimumFontSize) {
        $currentObject.css('font-size', newFontSize);
    }
    return false;
  });
 
 
});
//Font sizer Ends here
 

HTML code

<div class="text-tool hide">
          <div class="header">
            <h5>Text sizer</h5>
            <div class="close"><img src="http://bytes.com/submit/images/tools/close.gif" width="10" height="10" alt="Close" title="Close" /></div>
          </div>
          <div class="body">
          <div class="a1">
          <a href="#" id="increaseText"><img src="http://bytes.com/submit/images/tools/BigA.jpg"/></a>
          <a href="#" id="resetFont"><img src="http://bytes.com/submit/images/tools/textreset.jpg"/></a>
             <a href="#" id="DecreaseText"><img src="http://bytes.com/submit/images/tools/smallA.jpg"/></a>
          </div>
 
          </div>
          </div>
          </div>
 

Please help out in solving this issue.

[JKing]

Try using percentage based values for your absolute positioning instead.

[nataraj jaideep]

Hi Jking,
Thanks for your reply. I tried with percentage but it's not working. Is there anything to do with the jquery code or something else can be done.