Question

I have a table embedded in a div, with an image floated to the left of it. I use padding-left to add some space between the image and the table. It works as I want in most browsers, but in IE7, the table is touching the image. When I inspect the element, the padding is overlapping the table instead of going to the left of it.

I tried replicating this in a minimal fiddle, but my attempt ran into this misbehavior in all browsers, so I’m not sure what’s different on the real page.

The real page is:

http://dev.bridgebase.com/barmar_test/lessons/index-so.php?cat_id=3

The spacing I’m concerned with is to the left of “Title:”.

The attempted fiddle is:

http://jsfiddle.net/barmar/HaCgF/4/

How can I get this spacing consistently in all browsers?

Answer 1

Instead of padding-left on the table, try adding a margin-right on the image. See the very minor change I made to your JSFiddle.