Divs showing differently in IE and Firefox

[ziggy]

Hi All,

Could you please have a look at this code snippet and see why its displaying differently in IE and Firefox.
It is showing "correctly" in IE but it comes up messed up in Firefox.

<style type="text/css">
* {
margin:0;
padding:0
}
.body_container{
  width: 97%;
  height:100%;
  min-width:700px;
  margin-top:15px;
margin-bottom:0px;
margin-left:0px;
margin-right:0px;
text-align:left;
 } 
.right_colbox_container{
  width: 25%;
  border:1px solid #efd7f0;
  float:right;  
  margin-top:5px;
  height:30px
 } 
 
 .left_colbox_container{
  width: 74%;
  border:1px solid #efd7f0;
  float:left; 
diplay:inline; 
margin-top:5px;
height:30px
 } 
.box_header{
  width: 100%;
  height:23px;
  background:#efd7ff;  
 } 
 
 .box_content{
   height:100%;   
 } 
.box_content th{
   background:#efd7ff; 
   height:40px;
   padding:3; 
   text-align:center; 
 }
 
 .right_colbox_container th{
  background:#efd7ff; 
   height:18px;
   padding:2;
   text-align:center; 
 } 
  
</style>
<div class="body_container">
<div class="left_colbox_container">
<div class="box_header">
<table width="100%" border="0" cellpadding="3">
<thead>
<tr>
<th><bean:message key="gen.Flight"/></th>
</tr>
</thead> 
</table>
</div>
<div class="box_content">
<html:form action="searchConsignmentByFlightResult" onsubmit="return validateConsignmentSearchForm(this);">
<table width="100%" border="0" cellpadding="3" cellspacing="2">
 <tr>
<td width="5%"><bean:message key="gen.Flight"/></td>
<td width="3%"><html:text property="carrierCode" size="3" maxlength="3"/></td>
<td width="4%"><html:text property="flightNumber" size="3" maxlength="3"/></td>
<td width="4%"><html:text property="flightDate" size="2" maxlength="2"/>
 </td>
<td width="10%">
<html:select property="flightMonth">
<html:option value="">Select</html:option>
         <html:option value="January">January</html:option>
<html:option value="February">February</html:option>
<html:option value="March">March</html:option>
</html:select>
</td>
<td width="4%">&nbsp;&nbsp;<html:submit value="Find"/></td>
 <td width="3%">&nbsp;</td>
 <td width="5%"><bean:message key="SearchConsignmentsByFlight.origin"/></td>
 <td width="6%">&nbsp;</td>
 <td width="5%"><bean:message key="SearchConsignmentsByFlight.Destination"/></td>
 <td width="8%">&nbsp;</td>
 <td width="17%"><bean:message key="SearchConsignmentsByFlight.portoffirstentry"/></td>
 <td width="10%">&nbsp;</td>
 <td width="5%"><bean:message key="SearchConsignmentsByFlight.sta"/></td>
 <td width="11%">&nbsp;</td>
 </tr>
</table>
</html:form>
</div>
</div>
<div class="right_colbox_container">
<div class="box_header">
<table width="100%" border="0" cellpadding="3">
<thead>
<tr>
<th><bean:message key="text.EntrySummaryDeclaration"/></th>
</tr>
</thead> 
</table>
</div>
<div class="box_content">
<table width="100%" border="0" cellpadding="3">
 <tr>
 <td><bean:message key="text.LocalReference"/></td>
 </tr>
</table> 
</div>
</div>
<div class="left_colbox_container">
<div class="box_content">
<table width="100%" border="0" cellpadding="3">
<thead>
 <tr>
<th width="10%"><bean:message key="text.selectall"/></th>
<th width="15%"><bean:message key="text.awb"/></th>
<th width="10%"><bean:message key="text.hwb"/></th>
<th width="22%"><bean:message key="text.airportofloading"/>
<table width="100%" border="0" cellspacing="2" cellpadding="0">
 <tr>
 <td><bean:message key="text.loading"/></td>
 <td><bean:message key="text.unloading"/></td>
 </tr>
</table>
 </th>
<th width="8%"><bean:message key="text.pieces"/></th>
<th width="35%"><bean:message key="text.goodsdescription"/> </th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;e</td>
 <td>&nbsp;e</td>
 <td>&nbsp;e</td>
 <td>&nbsp;e</td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;e</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;e</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 </tbody>
</table>
</div>
</div>
<div class="right_colbox_container">
<div class="box_content">
<table width="100%" border="0" cellspacing="2" cellpadding="0">
<thead>
 <tr>
 <th><bean:message key="SearchConsignmentsByFlight.consignmentindeclaration"/></th>
 </tr>
</thead>
</table>
<table width="100%" border="0" cellspacing="2" cellpadding="0">
<thead>
 <tr>
 <th><bean:message key="text.awb"/></th>
<th><bean:message key="text.hwb"/></th>
 </tr>
</thead>
 <tbody>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td> 
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td> 
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td> 
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td> 
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td> 
 </tr>
<tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td> 
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td> 
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td> 
 </tr>
<tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td> 
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td> 
 </tr>
 </tbody>
</table>
</div>
</div>
</div>

Thanks

[ziggy]

Hi,

Just to clarify, the weird tags are just tags that are used within the struts framework. This are java references which only affect the display on the server side.
When the webserver has returned the page it is returned as shown below for the browser to render it. The browser does not see those tags.

Here is a different version without the struts tags.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>CCS21</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="pragma" content="no-cache">
</head>
<body onLoad="pageinit()"><center>
<style type="text/css">
* {
margin:0;
padding:0
}
.body_container{
    width: 97%;
    height:100%;
    min-width:700px;
    margin-top:15px;
margin-bottom:0px;
margin-left:0px;
margin-right:0px;
text-align:left;
  }  
.right_colbox_container{
    width: 25%;
    border:1px solid #efd7f0;
    float:right;   
    margin-top:5px;
    height:30px
  } 
  
  .left_colbox_container{
    width: 74%;
    border:1px solid #efd7f0;
    float:left; 
diplay:inline; 
margin-top:5px;
height:30px
  }  
.box_header{
    width: 100%;
    height:23px;
    background:#efd7ff;   
  } 
  
  .box_content{
     height:100%;     
  } 
.box_content th{
     background:#efd7ff;  
     height:40px;
     padding:3; 
     text-align:center; 
  }
  
  .right_colbox_container th{
    background:#efd7ff;  
     height:18px;
     padding:2;
     text-align:center;  
  } 
   
</style>
<div class="body_container">
<div class="left_colbox_container">
<div class="box_header">
<table width="100%" border="0" cellpadding="3">
<thead>
<tr>
<th>Flight</th>
</tr>
</thead> 
</table>
</div>
<div class="box_content">
<form name="consignmentSearchForm" method="post" action="/ccs21/main/searchConsignmentByFlightResult" onsubmit="return validateConsignmentSearchForm(this);">
<table width="100%" border="0" cellpadding="3" cellspacing="2">
  <tr>
<td width="5%">Flight</td>
<td width="3%"><input type="text" name="carrierCode" maxlength="3" size="3" value=""></td>
<td width="4%"><input type="text" name="flightNumber" maxlength="3" size="3" value=""></td>
<td width="4%"><input type="text" name="flightDate" maxlength="2" size="2" value="">
  </td>
<td width="10%">
<select name="flightMonth"><option value="" selected="selected">Select</option>
                  <option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option></select>
</td>
<td width="4%">&nbsp;&nbsp;<input type="submit" value="Find"></td>
  <td width="3%">&nbsp;</td>
  <td width="5%">Origin:</td>
  <td width="6%">&nbsp;</td>
  <td width="5%">Dest:</td>
  <td width="8%">&nbsp;</td>
  <td width="17%">Post of first entry:</td>
  <td width="10%">&nbsp;</td>
  <td width="5%">STA:</td>
  <td width="11%">&nbsp;</td>
  </tr>
</table>
</form>
</div>
</div>
<div class="right_colbox_container">
<div class="box_header">
<table width="100%" border="0" cellpadding="3">
<thead>
<tr>
<th>Entry Summary Declaration</th>
</tr>
</thead> 
</table>
</div>
<div class="box_content">
<table width="100%" border="0" cellpadding="3">
 <tr>
  <td>Local Reference:</td>
 </tr>
</table> 
</div>
</div>
<div class="left_colbox_container">
<div class="box_content">
<table width="100%" border="0" cellpadding="3">
<thead>
 <tr>
<th width="10%">Select All</th>
<th width="15%">AWB</th>
<th width="10%">HWB</th>
<th width="22%">Airport of Loading
<table width="100%" border="0" cellspacing="2" cellpadding="0">
 <tr>
  <td>Loading</td>
  <td>Unloading</td>
 </tr>
</table>
 </th>
<th width="8%">Pieces</th>
<th width="35%">Goods Description </th>
 </tr>
 </thead>
 <tbody>
 <tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
 </tr>
 <tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
 </tr>
 <tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
 </tr>
 </tbody>
</table>
</div>
</div>
<div class="right_colbox_container">
<div class="box_content">
<table width="100%" border="0" cellspacing="2" cellpadding="0">
<thead>
 <tr>
  <th>Consignments In Declaration</th>
 </tr>
</thead>
</table>
<table width="100%" border="0" cellspacing="2" cellpadding="0">
<thead>
 <tr>
  <th>AWB</th>
<th>HWB</th>
 </tr>
</thead>
 <tbody> 
 <tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>  
 </tr>
<tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>  
 </tr>
 <tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>  
 </tr>
 </tbody>
</table>
</div>
</div>
</div>
</body>
</html>

ps. I used the [code] tag but the code is not being formatted on forum. Does anyone know why?

[swa66]

Could you please have a look at this code snippet and see why its displaying differently in IE and Firefox.
It is showing "correctly" in IE but it comes up messed up in Firefox.

You might want it to show how it shows in IE, but it's extremely unlikely IE would get any CSS right when it doesn't render it like other browsers such as Firefox. The thing is IE got a truckload of bugs (or "features" as the bugs very unlikely to get fixed before people roll out IE8, *IF* it'll be fixed there) in CSS that are just plainly a pain to deal with.
The easiest way to deal with it is to not use IE till you get it working in any other browser (firefox, safari, opera, ...). Once it works there, still hold off of IE, test it in the others, once all of those agree, your CSS is as good as done. Except for some conditional comments for the different versions of IE (unfortunately IE6 and IE7 don't even have the same set of bugs).
The conditional comments prevent you from having to redo the testing in the standards compliant browsers, saving you a lot of time.
The not looking at it in IE till the end helps a lot in not setting you on the wrong foot (it's _very_ good at that).

[code] tags don't work very well.
try
[pre][code]
code
[/code][/pre]
instead and:

• do not leave blank lines, add spaces.
  
• leading spaces are halved in number, so use extra to compensate for it (use 4 spaces per level, leaves the mod one edit without messing up the indentation).
  
• preview also halves the spaces, so copy it in a cut and paste buffer before you preview, and paste it back before correcting things.
  

As to your question itself, it's like driving backwards for me it'll take some time to spot what you want to happen.

[alt131]

ziggy,

Start by validating [validator.w3.org]. While that won't resolve the display problem, it will point you to things like the <body> element opening in the <head>, the tables that open but don't close, duplications, and other errors. These things won't fix the display/layout issues, but they are directly relevant because part of the the display issue is caused by each browser displaying the "broken" code differently.

After that, I suggest simplify your markup. This looks like tabular data that could easily be displayed in one or two very simple tables (with a dash of css for style).

However, the provided code seems to use the table elements to create a visual "look". For eg, those tables with just a table head look like they've been put in to use <th> to produce the visual display of a "heading". That's very redundant and complicated - and that immediately creates potential display issues - which just means more unecessary code to resolve them.

I know my response doesn't fix your display differences - so post back once you've validated.

[ziggy]

Thanks guys for your help. I have actually decided to use table for everything and use css just for formating the data.

I decided to forget about CSS as it was just taking too much time to try and solve something that would have taken me 2 minutes to do using tables.

I really think that CSS is worthless as long as browsers support it differently. I think for now i will forget about css and use tables. I might change my mind when all browsers decide to work the same way.

Given the limitation of time and the workload that people usually have, it just doesnt make sense to spend hours and hours to try and get css to work.

Thanks all that tried to help. I will try and see if i can resolve it if i get some spare time at home just to get some exprerience with it.