How to deal with differing margin interpretations between browsers?

  • I have created a child theme of Merlin and have customized the header to display an image that fully fills the area by adjusting the various margin values. The problem is that if I adjust them so that the image is properly rendered in Chrome then it’s truncated in IE, specifically along the top and bottom margins. Left and Right margins for whatever reason are interpreted the same between IE and Chrome. If I set the margins for proper display in IE then there is a gap along the top and bottom of the image when displayed in Chrome.

    I have googled for a solution to this and haven’t found any clear way to deal with this. Anyone have experience with this and know what I need to change/modify to handle it?

    Thanks,

    -John

Viewing 4 replies - 1 through 4 (of 4 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Some tips:
    – Try to keep the elements in the same position as they are in their natural source order (don’t use crazy margins)
    – Keep your markup valid

    Thread Starter JWolfPDX

    (@jwolfpdx)

    “Try to keep the elements in the same position as they are in their natural source order” Do you mean to have my child css in the same order as it appears in the parent css? I am doing that.

    “Don’t use crazy margins” Not sure what you mean by that. I had to use negative values in the margins to get the layout that I wanted. Is that not the right approach? If not, how else can I achieve the result I want?

    “Keep your markup valid” I assume you mean the CSS? I am following the same format that I see in the parent CSS so I assume it’s valid.

    Anything else I can try?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Do you mean to have my child css in the same order as it appears in the parent css? I am doing that.

    No sorry I meant how they appear in the DOM.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    “Keep your markup valid” I assume you mean the CSS? I am following the same format that I see in the parent CSS so I assume it’s valid.

    Valid CSS helps, but my markup I mean your generated HTML

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How to deal with differing margin interpretations between browsers?’ is closed to new replies.