Margin problems IE vs FF 1

[jwigal]

Hi--

I'm trying to get some boxes to appear in the same place on both IE and FF, and am having some difficulty doing so:

http://test.referee-assistant.com/index_css2.php

Take a look at the gray box on the left, and the green box on the right. I basically wanted the edges of both boxes to line up with the interior edge of the simulated drop-shadow graphic on their respective side of the page.

Any idea what I might be able to do to get consistent results? Or is this something I'll just need to live with?

Thanks in advance--

----------
Jeff Wigal
Referee Assistant for MS Access

http://www.referee-assistant.com

 

[BillyRayPreachersSon]

As a guess, I'd say that you can edit the margin style in the "div#more" rule from this:

margin: 0 20px 0 0;

to this:

margin: 0 20px 0 0;
_margin-right: 0px;

If that works, and you want your CSS to validate, then you can include the _margin property in an IE-only CSS linked in with conditional comments, etc.

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[jwigal]

Thanks, that should do it. I found references on another website to an under-documented bug of IE6 ( a "double margin" bug:

whenever an element is floated so that it "touches" the edge of it's containing element.. then the float is given a double margin on that side IE.. it's not very well documented that I can see, but it definitely exists.

This was referenced here.

Thanks!

----------
Jeff Wigal
Referee Assistant for MS Access

http://www.referee-assistant.com

 

[BillyRayPreachersSon]

Ah yes - it could be that. To find out, change the "_margin: 0px" to "_display:inline".

If it fixes it, run with it. If not, revert to the original fix.

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]