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.