IE7 HTML/CSS margin-bottom bug

By : mk.
Source: Stackoverflow.com
Question!

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.


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.

By : mk.


Answers

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">
<html xmlns="http://www.w3.org/1999/xhtml">
    <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>
By : eplawless


Replace margin-bottom: 19px; with <div/> with height: 19px.

Remove CSS style for margin-bottom and insert <div/> with height: 19px between <table/> and <form/>

It solved this problem in my case.

<table id="mytable">
    <tr>
        <th>Col 1</th>
        <th>Col 3</th>
        <th>Col 2</th>
    </tr>
    <tr>
        <td>Val 1</td>
        <td>Val 2</td>
        <td>Val 3</td>
    </tr>
</table>
<div style="height:19px;"></div>
<form method="post" action="test.html" id="myform">
By : user64bit


if you have floated and unfloated elements, the only surefire way to ensure vertical space between them cross-browser is padding-top on the subsequent element.

By : mongo296


This video can help you solving your question :)
By: admin