Member Avatar for smantscheff
smantscheff 265 Veteran Poster

Have a look at this HTML code. In IE7 it displays two rows of a table-like form, much the same as in Firefox 3.x, 4 and Chrome. Now uncomment the "<!--div>abc</div-->" and look again. Now the row spacing has become much larger, about 1em. I don't have a clue where this comes from and how I could possibly avoid it. I need the <div> above the table to display some text. The effect stays the same if you replace the <div> by a <p>.

<!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" xml:lang="en" lang="en"><head>
<title></title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
<style type="text/css">

body {
}
body, table, div {
	font-family: Arial, Helvetica, Swiss, Sans-Serif;
	font-size: 10pt;
	padding: 0;
	margin: 0;
}
div#body {
	position: relative;
	margin: auto;
	height:670px;
	width:1000px;
	margin-bottom: 10px;
	padding-bottom: 10px;

	background-color:white;
	overflow: hidden;

}

div.table {
	margin: 0;
	display: table;
}
div.tr {
	margin: 0;
	display: table-row;
	clear: both;
}
div.td {
	margin: 0;
	display: table-cell;
	float:left;  
}
div.left {
	width:150px;
}
div.right {
	width: 180px;
}

input, select {
	border: 0;
	border-right: 1px solid green; 
	border-bottom: 1px solid green; 
	background-color: #CAEBC9;
}
input.submit {
	border-top: 1px solid green; 
	border-left: 1px solid green; 
	border-right: 1px solid green; 
	border-bottom: 1px solid green; 
	background-color: #CAEBC9;
}
div#content {
	font-size: 10pt;
}
div#contentbody, div#prevnext {
	position: absolute;
	left:180px;
	width: 460px;
	padding-left: 30px;
	padding-right: 20px;
}
div#contentbody {
	top:95px;
	height:500px;
	padding-top: 0px;
	overflow: auto;
}


</style></head>
<body>
	<div id="body" style="">
		<div id="contentbody">
			
			<!--div>
				abc
			</div-->
<form id="form1" method="post" action="">
<div class="tr">
  <div class="td left">Datum</div>
  <div class="td right">
	<input id="input_date" name="date" value="-- date --" type="text"/>
  </div>
</div>
<div class="tr">
<div class="td left">Anzahl der Stühle</div>
<div class="td right">
<select name="anzahl_stuehle">
<option selected="selected" value="1">weniger als 2</option><option value="2">2 bis 4</option><option value="3">5 bis 6</option><option value="4">mehr als 6</option></select>
</div>
</div></form>
			</div>
	</div>

</body></html>
  • 1 Contributor
  • 0 Replies
  • 112 Views

Dani AI

Generated

This is a classic IE7 layout quirk: mixing the CSS table-display model with floats/inline content (and older IE "hasLayout" behavior) can make IE7 insert an extra line-box or baseline gap. In the minimal case shown by the extra block above the pseudo-table changes how IE7 composes line boxes, so the visual row spacing suddenly jumps by about 1em.

Fixes (in order of least surprise):

  • Use the CSS table model cleanly (no floats on the cells). Make the wrapper display: table, rows display: table-row and cells display: table-cell; vertical-align: top;. That removes conflicting float behaviour and usually eliminates the gap.
/* Option A: keep table-like CSS but don't float cells */
.wrapper { display: table; }
.row     { display: table-row; }
.cell    { display: table-cell; vertical-align: top; }
  • If you intended a float-based layout, switch fully to floats (no table display). Float the columns and clear the row with a clearfix or overflow:hidden on the row container.
/* Option B: float-based layout */
.row  { overflow: hidden; }         /* clearfix */
.col  { float: left; width: 150px; vertical-align: top; }
  • Quick IE7 patch: if changing the whole approach is not possible, force IE’s layout and alignment on the problem elements (in an IE7-only stylesheet or conditional comment). vertical-align: top; zoom: 1; often fixes the extra gap.

Troubleshooting tips: create a tiny test page that isolates the pseudo-table and the block you toggle above it. Remove floats, remove the positioned/overflowed ancestor, and reintroduce pieces one-by-one to see which property exposes the bug. If the content is semantically tabular (labels + inputs), using a real <table> avoids these legacy bugs and is perfectly acceptable.

Short recommendation for : try removing the float from the cell elements first and add vertical-align: top; (or apply zoom:1; in an IE7-only rule). If IE7 support is required long-term, prefer a float layout or an actual table to avoid fragile browser-specific fixes.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.