ansaurus

Question

Answer 1

+1 A:

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

Orion Edwards 2008-08-18 23:09:59

Answer 2

+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 2008-08-18 23:10:00

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 2010-03-25 08:54:14

Answer 3

+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 2008-08-18 23:12:10

Answer 4

A:

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

<br style="clear:both;" />

Kevin 2008-08-19 00:07:23

Never use breaks (`<br />`) for clearing. Use a `div` - it's more semantically accurate.

cottsak 2009-11-29 09:18:19

Arguable, since <br> means "line-break" and <div> is just meaningless.

Kevin 2009-11-29 19:19:24

Answer 5

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 2008-08-19 01:04:03

Answer 6

+1 A:

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

Jeremy Kratz 2008-08-21 03:01:45

Answer 7

A:

use padding-bottom

syam 2010-03-23 06:21:02

ansaurus

tags:

views:

answers:

IE7 HTML/CSS margin-bottom bug.

related questions