Given this HTML Code:

<div id="content">
            <div id="box1"></div>
        <table id="box2">
            <tr>
                <td>A1</td>
                <td>A2</td>
            </tr>
            <tr>
                <td>A1</td>
                <td>A2</td>
            </tr>
            <tr>
                <td>A1</td>
                <td>A2</td>
            </tr>
            <tr>
                <td>A1</td>
                <td>A2</td>
            </tr> 
        </table>
    </div>

and this CSS code:

#box1 {
            float:left;
            width:100px;
            height:200px;
            background:red;
        }

        #box2 {
            margin-left:120px;
            height:300px;
            background:green;
        }

Page can be seen here: http://ewolf.bplaced.de/misc/ffbug.htm

Normally, the tables margin-left should be taken from the border of #content, which works just fine in FF 3.5. But in FF 2 (2.0.0.17, to be precise), the margin is taken from the right border of #box1. Is this a known bug? And how can I fix it?

EDIT: Setting display:block; on #box2 fixes the margin problem, but then you can't set a width anymore: Only the border I set has the desired width, the rest of the table remains at the left side..

  • EDIT2: Wrapping #box2 in another div and setting the margin on that div fixes the problem. elektrowolf about 7 years ago

1 answer

Emily G 620
2
points

I've run into that problem too and I don't know why FF2 renders it differently. To get a consistent margin cross-browser, you can float #box2 to the left and then all browsers will take the margin from the right border of #box1.

#box2 {
            margin-left:20px;
            height:300px;
            background:green;
            float:left;
        }
Answered about 7 years ago by Emily G
  • But I want to take the margin from #content! ;-) Anyway, I found a solution now --> see edit2. elektrowolf about 7 years ago