views:

6569

answers:

7

Here is the scenario:

I have a table with a margin-bottom of 19px. Below that I have a form that contains some fieldsets. One of them is floated right. The problem is that the margin-bottom is not getting the full 19px in IE7. I've gone through all of the IE7 css/margin/float bugs that I can think of and have tried remedies but have been unsuccessful. I have been googling for a while now and cannot find anything that is helping out.

Here is what I have tried.

  1. Wrapping the form or fieldset in an unstyled div. No apparent change.
  2. Nixing the margin-bottom on the table and instead wrapping that with a div and giving it a padding-bottom of 19px. No apparent change.
  3. Nixing the margin-bottom on the table and adding a div with a fixed height of 19px. No apparent change.
  4. Putting a clear between the table and the fieldset.

I know there are some others that I am forgetting, but those are the things I have tried out recently. This happens to each fieldset.

+1  A: 

Have you got a valid doctype? Otherwise IE7 renders in quirks mode which is basically IE5.5

Orion Edwards
+2  A: 

I put together what you described there, and it's rendering properly for me. It's likely you have another style somewhere that's having an effect on your form, or your table. If you aren't doing so already, using a reset.css file is extremely useful. If you want to see which styles are affecting a particular element, the Web Developer Toolbar for firefox has a handy Style Information command for seeing which styles (from which files/style blocks/inline styles) are being applied to it. You can activate it by pressing Ctrl+Shift+Y, or hitting CSS -> View Style Information

Here's the code that worked for me in IE7:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style>
#mytable {
    margin-bottom: 19px;
    border: solid green 1px;
}

#myform {
    border: solid red 1px; 
    overflow: hidden;
}
#floaty {
 float: right; 
 border: solid blue 1px;
}
</style>
</head>
<body>
<table id="mytable">
<th>Col 1</th>
<th>Col 3</th>
<th>Col 2</th>
<tr>
<td>Val 1</td>
<td>Val 2</td>
<td>Val 3</td>
</tr>
</table>
<form method="post" action="test.html" id="myform">
<fieldset id="floaty">
<label for="myinput">Caption:</label> <input id="myinput" type="text" />
</fieldset>
<fieldset>
<p>Some example content</p>
<input type="checkbox" id="mycheckbox" /><label for="mycheckbox">Click MEEEEE</label>
</fieldset>
</form>
</body>
</html>
eplawless
Voted down, because experiencing the same issue with floating element and it's margin-bottom in IE7 (but it works well on any other browser), so I suggest that problem is legitimate, contrarily to your conclusion. See bug #119 on this bug list:http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/
Arturas
+1  A: 

I am using a reset style sheet and have a xhtml transitional doctype.

Edit: I also have the IE7 web developer toolbar and Firebug. The style information for both browsers says that it has a margin-bottom: 19px; but it clearly is not for IE7.

mk
A: 

I wouldn't know for sure without testing but try placing this between the table and the fieldset:

<br style="clear:both;" />
Kevin
Never use breaks (`<br />`) for clearing. Use a `div` - it's more semantically accurate.
cottsak
Arguable, since <br> means "line-break" and <div> is just meaningless.
Kevin
A: 

@Kevin I've tried a clear between as well. Tomorrow when I have the code available I will look into seeing if there is any style info that I am missing. That is likely the culprit. More to come. Stay tuned.

mk
+1  A: 

If you remove the float from the element below the table, does the margin appear?

Jeremy Kratz
A: 

use padding-bottom

syam