We help IT Professionals succeed at work.

how to fix Internet Explorer box model bug

aman0711
aman0711 asked
on
Medium Priority
1,326 Views
Last Modified: 2013-12-08
Hi Experts,

               I have a page which has a small toolbar and an Iframe. Somehow I am getting a weird white space between the header and the rendered Iframe (Chart in the snap shot).
              An expert here on EE told me about box model bug and that it can be be fixed by DOCTYPE declaration. Luckily It got fixed but only on IE7, I want it to work on IE6.
         
               Can you please suggest me a way to get rid of this white space? I have attached my code, snapshot and stylesheets used in this page
<%@page  language="java" import="java.sql.*" errorPage=""%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
 "http://www.w3.org/TR/html4/loose.dtd">
 
<html>
<head>
<title>View Detail</title>
 
<script type="text/javascript" src="/analytics/static/zoom/jquery.js"></script>
<script type="text/javascript" src="/analytics/static/zoom/thickbox.js"></script>
<link rel="stylesheet" href="/analytics/static/zoom/thickbox.css" type="text/css" media="screen" />
 
<style type="text/css">
        @import url("/analytics/static/styles/intranet.css");             /* main stylesheet */
        @import url("/analytics/static/styles/intranet-2col.css");        /* column stylesheet */
        @import url("/analytics/static/styles/intranet-2col-1024.css");   /* 1024px stylesheet */
</style>
<link rel="shortcut icon" href="../jsp/favicon.icon" />
</head>
 
<body>
<div id="page-wrapper"><%@include file="Header.jsp"%>
<div id="column-wrapper"><!-- begin columns --> 
<%@include file="NEW_TOOLBAR.jsp"%>
 
<div id="content"><!-- begin content column -->
<div class="inner">
 
<iframe src="chart.html?chartType=${detailForm.chartType}&chartGroup=${detailForm.chartGroup}&chartSubgroup=${detailForm.chartSubgroup}&liabilityCode=IRU&timeline=${detailForm.timeline}&width=600&height=400" frameborder="0" scrolling="no" width="700" height="430" align="top"></iframe>
 
 
<!-- end content column, then column wrapper --></div>
</div>
<%@include file="Footer.jsp"%></div>
 
</body>
</html>

Open in new window

intranet.txt
intranet-2col.txt
intranet-2col-1024.txt
whitespace.JPG
Comment
Watch Question

NerdsOfTechTechnology Scientist
CERTIFIED EXPERT

Commented:
post NEW_TOOLBAR.jsp also thanks
NerdsOfTechTechnology Scientist
CERTIFIED EXPERT

Commented:
post OUTPUT page source too.

Author

Commented:
Hi NerdsofTech..

                 Here is the NEW_TOOLBAR.jsp


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<html>
<head>
<style type="text/css">
		     @import url("/analytics/static/calendar/mystyle.css");
.tofrom {
        height:18px;
        float:left;
        width:40px;
        padding-top:3px;
}
.calimg {
        margin:1px 0 0 0;
        float:left;
        width:28px;
}
</style>
<script type="text/javascript" src="/analytics/static/calendar/ashscript1.js"></script>
<!--[if IE]>
<style type="text/css"> 
.tofrom { padding-top:4px; }
.calimg { margin:3px 0 0 0; }
</style>
<![endif]-->
 <style type="text/css" media="screen">   
  	@import url("<c:url value="/resources/dojo/resources/dojo.css"/>");
  	@import url("<c:url value="/resources/dijit/themes/tundra/tundra.css"/>");
    @import url("<c:url value="/static/styles/roo.css"/>");
  </style>     
  
  <script djconfig="parseOnLoad: true" src="<c:url value="/resources/dojo/dojo.js"/>" type="text/javascript"></script>
  <script type="text/javascript" src="<c:url value="/resources/spring/Spring.js" />"> </script>
  <script type="text/javascript" src="<c:url value="/resources/spring/Spring-Dojo.js" />"> </script>	 
	<script type="text/javascript">
	dojo.require("dojo.parser");
  </script>
 
<script type="text/javascript" src="/analytics/static/zoom/jquery.js"></script>
<script type="text/javascript" src="/analytics/static/js/jquery.selectboxes.js"></script>
 
<script type="text/javascript">	    
 
	// register listener on chartGroup select
    	
	$(document).ready(function() {
 
		// call loadSubGroups() when chartGroup value changes
		
		$("#chartGroup").bind('change', loadSubgroups);                   
	});   
 
	// Set up chartSubgroup select lists
	
	var map = ${chartSubgroups};
    			
	// When a make is selected, populate the models dropdown
 
	function loadSubgroups() {
 
		// empty the chartSubgroup
		
		$("#chartSubgroup").removeOption(/./);
 
		// get the selected chart group
		
		group = $("#chartGroup").selectedValues()[0];
 
		// And the coresponding subgroups
		
		subgroups = map[group];
 
		// And add the option to the subgroup select
		
		for(subgroupId in subgroups) {
			subgroup = subgroups[subgroupId];
			$("#chartSubgroup").addOption(subgroup, subgroup); // Value, Text
		}
	}		
   
    </script>
 
 
</head>
<body onload="loadSubgroups();">
 <div id="right-col">
<!-- begin right column -->
<div class="sidebar-panel" style="border:5px solid #99CCFF; width:145px; padding:2px; background:white;">
 
 <form:form commandName="detailForm" method="GET">
<div style="font-weight:bold; color:#000">Report Group:</div>
<div align="center" style="margin:0 0 5px 0; ">
<div style="margin:0 0 5px 0;"><form:select path="chartGroup" items="${chartGroups}" /></div>
</div>
 
<div style="font-weight:bold; color:#000">Report SubGroup:</div>
<div align="center" style="margin:0 0 5px 0; ">
<div style="margin:0 0 5px 0;"><form:select path="chartSubgroup" items="${chartSubgroups}" /></div>
</div>
 
<div style="font-weight:bold; color:#000">Chart Type:</div>
<div align="center" style="margin:0 0 5px 0; ">
<div style="margin:0 0 5px 0;"><form:select path="chartType" items="${chartTypes}" id="ct"/></div>
</div>
 
<div style="font-weight:bold; color:#000">Timeline</div>
<div align="center" style="margin:0 0 5px 0; ">
<div style="margin:0 0 5px 0;"><form:select path="timeline" items="${timelines}" id="tm"/></div>
</div>
 
<div style="color:black;">
<div class="tofrom">From:</div>
<div class="calimg"><img src="/analytics/static/images/CAL.PNG" name="Calendar" width="18" height="18" id="Calendar" onClick="displayDatePicker('from_date');" /></div>
<form:input path="startDt" id="from_date" size="7" maxlength="8" />
</div>
<div style="color:black;">
<div class="tofrom">To:</div>
<div class="calimg"><img name="Calendar" src="/analytics/static/images/CAL.PNG" width="18" height="18" id="Calendarm" onClick="displayDatePicker('to_date');" /> </div>
<form:input path="endDt" id="to_date" size="7" maxlength="8" />
</div>
 
<div style="font-weight:bold; color:#000">Customer Type</div>
<div align="center" style="margin:0 0 5px 0; ">
<div style="margin:0 0 5px 0;"><form:select path="liabilityCode" items="${liabilityCodes}" id="tm"/></div>
</div>
 
 
 
<h5 style="padding:0 30px 10px 0; font-size:9px; font-wight:lighter; background:white; ">
<div style="width:40px; font-size:.8em; font-weight:lighter;">
<input type="submit" value="Update Chart" />
</div>
</h5>
 
<div style="clear:both;"></div>
</form:form>
<!-- end right column, then column-wrapper -->
</div>
</div>
</body>
</html>

Open in new window

Author

Commented:
and this is the HTML output

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html>
<head>
<title>View Detail</title>
 
<script type="text/javascript" src="/analytics/static/zoom/jquery.js"></script>
<script type="text/javascript" src="/analytics/static/zoom/thickbox.js"></script>
<link rel="stylesheet" href="/analytics/static/zoom/thickbox.css" type="text/css" media="screen" />
 
<style type="text/css">
        @import url("/analytics/static/styles/intranet.css");             /* main stylesheet */
        @import url("/analytics/static/styles/intranet-2col.css");        /* column stylesheet */
        @import url("/analytics/static/styles/intranet-2col-1024.css");   /* 1024px stylesheet */
    
  iframe { vertical-align:top; }
       
</style>
 
 
 
 
<link rel="shortcut icon" href="../jsp/favicon.icon" />
</head>
 
<body>
<div id="page-wrapper"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
<head>
 
 
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
 
<link rel="stylesheet" type="text/css" href="/analytics/static/styles/2leveltab.css" />
 
<script type="text/javascript" src="/analytics/static/js/2leveltab.js">
 
/***********************************************
* 2 level Horizontal Tab Menu- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code
***********************************************/
 
</script>
 
</head>
 
<body>
 
<div id="page-wrapper">
 
<div id="header"><!-- begin header -->
 
<h1 class="hidden">Intranet Site</h1>
<!-- hidden titles for accessibility and SEO -->
<h2 class="hidden">Intranet Site Homepage</h2>
 
<h1 id="title"><a href="index.html" title=" Intranet Home"><img
	alt="" src="/analytics/static/images/header-title.jpg" /></a></h1>
 
<ul id="maintab" class=" nav-bar">
	<li class="current"><a href="index.html" title="Home">SUMMARY</a></li>
	<li>KPI</li>
	<li>TRANSACTION</li>
	<li>ERRORS</li>
	<li>REVENUE</li>
	<li>CALL OFFLOAD</li>
	<li rel="admin"><a href="admin.html" title="Admin Console">ADMIN</a></li>
	<li><a href="mailto:g01151@att.com?subject=MyWorld Analytics Portal">CONTACT US</a></li>
</ul>
 
 
<script type="text/javascript">
//initialize tab menu, by passing in ID of UL
initalizetab("maintab");
</script>
 
<!-- end header --></div>
</div>
<div id="admin" class="submenustyle">
<a href="admin.html?page=admDefault" title="" style='text-decoration: none;'>Default Views</a>
<a href="adminEdit.html?page=editAdmSummary" title="" style='text-decoration: none;'>Add/Edit Defaults</a>
<a href="goal.html?page=goal" title="" style='text-decoration: none;'>Goals Summary</a>
<a href="goalEdit.html?page=editGoal" title="" style='text-decoration: none;'>Add/Edit Goal</a>
</div>
</body>
</html>
<div id="column-wrapper"><!-- begin columns --> 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
 
 
 
<html>
<head>
<style type="text/css">
		     @import url("/analytics/static/calendar/mystyle.css");
.tofrom {
        height:18px;
        float:left;
        width:40px;
        padding-top:3px;
}
.calimg {
        margin:1px 0 0 0;
        float:left;
        width:28px;
}
</style>
<script type="text/javascript" src="/analytics/static/calendar/ashscript1.js"></script>
<!--[if IE]>
<style type="text/css"> 
.tofrom { padding-top:4px; }
.calimg { margin:3px 0 0 0; }
</style>
<![endif]-->
 <style type="text/css" media="screen">   
  	@import url("/analytics/resources/dojo/resources/dojo.css");
  	@import url("/analytics/resources/dijit/themes/tundra/tundra.css");
    @import url("/analytics/static/styles/roo.css");
  </style>     
  
  <script djconfig="parseOnLoad: true" src="/analytics/resources/dojo/dojo.js" type="text/javascript"></script>
  <script type="text/javascript" src="/analytics/resources/spring/Spring.js"> </script>
  <script type="text/javascript" src="/analytics/resources/spring/Spring-Dojo.js"> </script>	 
	<script type="text/javascript">
	dojo.require("dojo.parser");
  </script>
 
<script type="text/javascript" src="/analytics/static/zoom/jquery.js"></script>
<script type="text/javascript" src="/analytics/static/js/jquery.selectboxes.js"></script>
 
<script type="text/javascript">	    
 
	// register listener on chartGroup select
    	
	$(document).ready(function() {
 
		// call loadSubGroups() when chartGroup value changes
		
		$("#chartGroup").bind('change', loadSubgroups);                   
	});   
 
	// Set up chartSubgroup select lists
	
	var map = {"Registration":["REGISTRATION"],"UpgradeChanges":["UPGRADE_CHANGE"],"Payment":["AUTOPAY","TXT2PAY"]};
    			
	// When a make is selected, populate the models dropdown
 
	function loadSubgroups() {
 
		// empty the chartSubgroup
		
		$("#chartSubgroup").removeOption(/./);
 
		// get the selected chart group
		
		group = $("#chartGroup").selectedValues()[0];
 
		// And the coresponding subgroups
		
		subgroups = map[group];
 
		// And add the option to the subgroup select
		
		for(subgroupId in subgroups) {
			subgroup = subgroups[subgroupId];
			$("#chartSubgroup").addOption(subgroup, subgroup); // Value, Text
		}
	}		
   
    </script>
 
 
</head>
<body onload="loadSubgroups();">
 <div id="right-col">
<!-- begin right column -->
<div class="sidebar-panel" style="border:5px solid #99CCFF; width:145px; padding:2px; background:white;">
 
 <form id="detailForm" action="/analytics/chartDetail.html?chartType=line&amp;chartGroup=View/Change%20Rate%20Plan&amp;chartSubgroup=CHANGE_RATE_PLAN_FIN_SUB&amp;liabilityCode=CRU&amp;timeline=Monthly&amp;width=750&amp;height=375" method="GET">
<div style="font-weight:bold; color:#000">Report Group:</div>
<div align="center" style="margin:0 0 5px 0; ">
<div style="margin:0 0 5px 0;"><select id="chartGroup" name="chartGroup"><option value="Registration">Registration</option><option value="UpgradeChanges">UpgradeChanges</option><option value="Payment">Payment</option></select></div>
</div>
 
<div style="font-weight:bold; color:#000">Report SubGroup:</div>
<div align="center" style="margin:0 0 5px 0; ">
<div style="margin:0 0 5px 0;"><select id="chartSubgroup" name="chartSubgroup"><option value="Registration">[&quot;REGISTRATION&quot;]</option><option value="UpgradeChanges">[&quot;UPGRADE_CHANGE&quot;]</option><option value="Payment">[&quot;AUTOPAY&quot;,&quot;TXT2PAY&quot;]</option></select></div>
</div>
 
<div style="font-weight:bold; color:#000">Chart Type:</div>
<div align="center" style="margin:0 0 5px 0; ">
<div style="margin:0 0 5px 0;"><select id="ct" name="chartType"><option value="bar">bar</option><option value="line" selected="selected">line</option></select></div>
</div>
 
<div style="font-weight:bold; color:#000">Timeline</div>
<div align="center" style="margin:0 0 5px 0; ">
<div style="margin:0 0 5px 0;"><select id="tm" name="timeline"><option value="Daily">Daily</option><option value="Weekly">Weekly</option><option value="Monthly" selected="selected">Monthly</option><option value="Quarterly">Quarterly</option><option value="Annual">Annual</option></select></div>
</div>
 
<div style="color:black;">
<div class="tofrom">From:</div>
<div class="calimg"><img src="/analytics/static/images/CAL.PNG" name="Calendar" width="18" height="18" id="Calendar" onClick="displayDatePicker('from_date');" /></div>
<input id="from_date" name="startDt" type="text" value="" size="7" maxlength="8"/>
</div>
<div style="color:black;">
<div class="tofrom">To:</div>
<div class="calimg"><img name="Calendar" src="/analytics/static/images/CAL.PNG" width="18" height="18" id="Calendarm" onClick="displayDatePicker('to_date');" /> </div>
<input id="to_date" name="endDt" type="text" value="" size="7" maxlength="8"/>
</div>
 
<div style="font-weight:bold; color:#000">Customer Type</div>
<div align="center" style="margin:0 0 5px 0; ">
<div style="margin:0 0 5px 0;"><select id="tm" name="liabilityCode"><option value="IRU">IRU</option><option value="CRU" selected="selected">CRU</option></select></div>
</div>
 
 
 
<h5 style="padding:0 30px 10px 0; font-size:9px; font-wight:lighter; background:white; ">
<div style="width:40px; font-size:.8em; font-weight:lighter;">
<input type="submit" value="Update Chart" />
</div>
</h5>
 
<div style="clear:both;"></div>
</form>
<!-- end right column, then column-wrapper -->
</div>
</div>
</body>
</html>
 
<div id="content"><!-- begin content column -->
<div class="inner">
 
<iframe src="chart.html?chartType=line&chartGroup=View/Change Rate Plan&chartSubgroup=CHANGE_RATE_PLAN_FIN_SUB&liabilityCode=IRU&timeline=Monthly&width=600&height=400" frameborder="0" scrolling="no" width="700" height="430" align="top"></iframe>
 
 
<table width="755" cellpadding="3" cellspacing="4" border="0">
<tr><td valign="top" style="text-align:left; padding-left:5px;">
<a href="chart.html?chartType=line&chartGroup=View/Change Rate Plan&chartSubgroup=CHANGE_RATE_PLAN_FIN_SUB&liabilityCode=IRU&timeline=Monthly&startDt=&endDt=&width=750&height=375&KeepThis=true&TB_iframe=true&height=450&width=745" style='text-decoration: none;' class="thickbox">
Zoom Chart</a>
</td>
 
<td valign="top" style="text-align:left; padding-left:5px;">
<a href="chartCaveat.html?chartId=0&KeepThis=true&height=350&width=450" class="thickbox"  style='text-decoration: none;'>
Chart Caveat</a>
</td>
<td> &nbsp;</td>
</tr>
 
<tr>
<td valign="top" style="text-align:left; padding-left:5px;">
From: 
</td>
<td>
To: 
</td>
<td valign="top" style="text-align:left; padding-left:5px;">
Data Source:eDM
</td>
</tr>
 
</table>
 
<form id="detailForm" action="/analytics/chartDetail.html?chartType=line&amp;chartGroup=View/Change%20Rate%20Plan&amp;chartSubgroup=CHANGE_RATE_PLAN_FIN_SUB&amp;liabilityCode=CRU&amp;timeline=Monthly&amp;width=750&amp;height=375" method="post">
 <table>
 <tr>
   <td>&nbsp;</td><td>&nbsp;</td><td><input type="submit" value="Back" align="right"></td>
</tr>  
 </table>
 
   </form>
 
<hr />
 
<br />
 
<table class="table-style" border="1" cellspacing="1" bgcolor="#FFFFFF" width=93%><tr><th>Metrics</th><th>09-02</th><th>09-03</th><th>09-04</th><th>09-05</th><th>09-06</th></tr><tr><td>Change Rate Plan Final Submit</td><td>17</td><td>19</td><td>13</td><td>9</td><td>6</td></tr></Table>
 
<br />
 
 
<!-- end content column, then column wrapper --></div>
</div>
<div id="footer-wrapper"><!-- begin footer -->
 
<div id="footer">
 
<ul class="nav-bar">
	<li><a href="#" title="Intranet Home">Home</a></li>
	  <li><a href="http://siweb.it.att.com" title="MyIntranet Home">SIWEB Portal</a></li>    
</ul>
 
<p class="text">&copy; All Rights Reserved.</p>
 
<!-- end footer, then page-wrapper --></div>
</div>
</div>
</body>
</html>

Open in new window

NerdsOfTechTechnology Scientist
CERTIFIED EXPERT

Commented:
try css positioning
<%@page  language="java" import="java.sql.*" errorPage=""%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
 "http://www.w3.org/TR/html4/loose.dtd">
 
<html>
<head>
<title>View Detail</title>
 
<script type="text/javascript" src="/analytics/static/zoom/jquery.js"></script>
<script type="text/javascript" src="/analytics/static/zoom/thickbox.js"></script>
<link rel="stylesheet" href="/analytics/static/zoom/thickbox.css" type="text/css" media="screen" />
 
<style type="text/css">
        @import url("/analytics/static/styles/intranet.css");             /* main stylesheet */
        @import url("/analytics/static/styles/intranet-2col.css");        /* column stylesheet */
        @import url("/analytics/static/styles/intranet-2col-1024.css");   /* 1024px stylesheet */
</style>
<link rel="shortcut icon" href="../jsp/favicon.icon" />
</head>
 
<body>
<div id="page-wrapper"><%@include file="Header.jsp"%>
<div id="column-wrapper"><!-- begin columns --> 
<%@include file="NEW_TOOLBAR.jsp"%>
 
<div id="content"><!-- begin content column -->
<div class="inner" style="position:relative; top: 0px; left: 0px;">
 
<iframe src="chart.html?chartType=${detailForm.chartType}&chartGroup=${detailForm.chartGroup}&chartSubgroup=${detailForm.chartSubgroup}&liabilityCode=IRU&timeline=${detailForm.timeline}&width=600&height=400" frameborder="0" scrolling="no" width="700" height="430" align="top"></iframe>
 
 
<!-- end content column, then column wrapper --></div>
</div>
<%@include file="Footer.jsp"%></div>
 
</body>
</html>

Open in new window

NerdsOfTechTechnology Scientist
CERTIFIED EXPERT

Commented:
Thanks for the uploads.

It looks like your .js is posting new headers and <html> tags...
Is there a way to save that as a new file, link, and remove the html and body tags, etc.

This may be creating that gap.

Author

Commented:
Thanks for your Help :)

>> It looks like your .js is posting new headers and <html> tags...
Is there a way to save that as a new file, link, and remove the html and body tags, etc


I didnt get you, where exactly? :)

Author

Commented:
>> style="position:relative; top: 0px; left: 0px;"

Didnt work :(
Technology Scientist
CERTIFIED EXPERT
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION

Author

Commented:
Didnt work :(

Actually the multiple tags you are seeing is coming from Header and New tool bar.jsp...

I dont understand, why only this page is getting messed up :(
NerdsOfTechTechnology Scientist
CERTIFIED EXPERT
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION

Author

Commented:
Didnt work either :(
So strange... ..... it neevr happened to me before
Mick BarryJava Developer
CERTIFIED EXPERT
Top Expert 2010
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION

Author

Commented:
please replace the attached snapshot with the one attached below
and please delete the 3 files attached (Those are not required for the fix.)

whitespace.JPG
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.