Last month I had to find a way to place content in the IE based browser versions when the content’s width exceeds the clients viewable width, such as when you have a table exceeding the viewable width of the client and normally what should happen is it should adds the horizontal scroll bar where user can scroll to view the content, but with our system the IE shifted the whole content down leaving a blank space on the top. So I had to apply a small hack using Javascript to keep the content in its normal location by resizing it to match the width. And this acted differently with IE 6 and IE 7, so here is the code I used
function resize_wrapper_ie6(){
var result=document.getElementById('result');
var content=document.getElementById('content');
var wrapper=document.getElementById('wrapper');
if(result){
if(document.documentElement.clientWidth < document.body.clientWidth)
wrapper.style.width=(document.body.clientWidth+200)+"px";
}
if(content){
if(document.documentElement.clientWidth < document.body.clientWidth)
wrapper.style.width=(document.body.clientWidth+200)+"px";
}
}
function resize_wrapper_ie7(){
var map=document.getElementById('map');
var wrapper=document.getElementById('wrapper');
var table = document.getElementById('result').getElementsByTagName('table')[0];
if(table){
if((document.documentElement.clientWidth) > (document.body.clientWidth -205)){
wrapper.style.width=(document.documentElement.clientWidth+210)+"px";
}
}
if(map){
if((document.documentElement.clientWidth) > (document.body.clientWidth -205)){
wrapper.style.width=(document.documentElement.clientWidth+210)+"px";}
}
}
When trying to identify the exact browser version of IE I used the normal javascript method navigator.userAgent and it gave Mozilla/4.0 (compatible; MSIE 6.0; Windows NT; DigExt) so I used the following method to extract the exact version number by parsing the value passed from the navigator.userAgent
function getIEVersion(versionString){
return parseFloat(versionString.substr(30,3));
}
Here is the code I used to identify the specific versions of IE
function ie_hack_for_large_tables(){
var browser_name=navigator.appName;
var agent = navigator.userAgent;
if ((browser_name=="Microsoft Internet Explorer") && ( 7 == getIEVersion(agent))){
resize_wrapper_ie7();
}
if ((browser_name=="Microsoft Internet Explorer") && ( 6 == getIEVersion(agent) )){
resize_wrapper_ie6();
}
}
