Home/ Questions/Q 7798495
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T00:01:30+00:00

I am working on a WordPress theme using the WordPress Boilerplate as a base

  • 0

I am working on a WordPress theme using the WordPress Boilerplate as a base (HTML5 Boilerplate + another WordPress base theme). Can be seen here:

JaredSartin.com (Theme is in progress, don’t mind some of the other mess :P)

It looks just fine in Chrome, but the top image gets messed up in all other browsers. I am layering 2 images to overlap so I can have a responsive design, removing the back image and leaving just the title when the browser gets to a certain width.

The images are absolutely positioned with a percentage margin-top and margin-left on the top one to properly position it. they are both set to scale with the page via

height:auto;
width:100%;

OR

width:85%;

in the top image’s case. Now, I was working in Chrome to produce the current look, the left-margin is fine in all browsers I have tested (FF and IE7/IE8 on Windows) but the top is off. In FF’s inspector, I see that the adjusted top-margin needs to be 7.5% (makes more sense than the one I set in chrome – 24.5%).

Any ideas to a cross browser fix? I don’t want to have to use specific browser detection (like Chrome vs Other). I already have some reset styles in place.

EDIT

I have a fix/hack, but if you have a better one (not so hacky, but just plain Cross Browser CSS), let me know…

header img#titleimgfront{
    width: 85%;
    margin-top: 7.5%; /* For non-webkit browsers */
    margin-left: 8.5%;
}

/* unfortunate hack since Webkit has an issue with Margin-top */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  header img#titleimgfront{
    margin-top: 24.6%;
  }
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There’s nothing wrong with what you’re doing — this is a bug in Webkit, that it calculates a percentage margin-top from the height of an absolutely-positioned element, where other browsers (and the spec) calculate it from the width. (see: https://lists.webkit.org/pipermail/webkit-unassigned/2011-February/293573.html)

    It does seem counter-intuitive to base margin-top and margin-bottom values on the element’s width, but that’s the way it is.

    But you’ve found an effective workaround, so you’re sorted. Don’t feel that your layout is causing this problem, because it isn’t, it’s just Webkit.

    • 0