Home/ Questions/Q 7631511
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T06:22:20+00:00

I have an issue with a layout which only occurs with ie6 or 7

  • 0

I have an issue with a layout which only occurs with ie6 or 7 (or ie8 in compatibility view). The layout in question is here:

https://dustinhendricks.com/breastfest/public_html/

It’s a site for a non-profit supporting breast cancer so it is suitable for work.

The problem I am having is with the small ribbon image next to the Make a Donation button. It seems to have a double margin-top. The element is not floated, which is the typical cause of a bug like this. I have tried applying display: inline, but that has no effect. Any ideas as to which ie 6/7 bug may be causing this, and how to fix?

The css for the element is:

#main #upper #info .ribbon {
    margin-left: 1px;
    margin-top: 33px;
}

And the parent element:

#main #upper #info {
    width: 279px;
    position: absolute;
    right: 25px;
    top: 20px;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It appears the bug was that the img element used the top of the adjacent floating element as its top instead of the bottom of the img element above like it does in all other browsers.

    Fixed by wrapping both the adjacent floating element and the img element in a clear: all div, which forced the same top to be used across all browsers.

    • 0