Margin-Top difference from Chrome to Other Browsers

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 pa开发者_如何学编程ge 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%;
  }
}

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.

Place this code at the top of your style.css right below the theme information and it should solve the majority of cross browser issues:

/*------------------------------------------------*/
/*-----------------[RESET]------------------------*/
/*------------------------------------------------*/

/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,hr {margin:0; padding:0;}
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th {font-size:1em; font-weight:normal; font-style:normal;}
ul,ol {list-style:none;}
fieldset,img,hr {border:none;}
caption,th {text-align:left;}
table {border-collapse:collapse; border-spacing:0;}
td {vertical-align:top;}

Your using absolute positioning lose the margins and use top, right, bottom or left.

header img#titleimgfront{
top: 25%;

}

While this is not the answer to your question just advice.

Your overly complicating a simple header image. I don't get the point of overlapping and lining up 3 images.

Just use 1 transparent png and in your WordPress header.php

<header>
    <a href="<?php bloginfo('home'); ?>"><img src="http://path_to_image.png" width="800" height="240" class="logo" /></a>
</header>

css:

.logo {
    margin: 20% auto;
}

If your going to use HTML 5 drop all the extra divs and stuff. You don't need body or the extra wrapper.

Just use <section <?php body_class(); ?>> instead.

add top_margin class to fix top margin problem

$('.top_margin').each(function () {
            var $item = $(this),
                marginTop = 0,
                newMarginTop = 0,
                pageWidth = $item.parent().innerWidth();
            //hide to obtain percentage value instead of calculated px value
            $item.hide();
            marginTop = parseFloat($item.css('margin-top')) / 100;
            newMarginTop = Math.round(self.pageWidth * marginTop) + 'px';
            $item.css('margin-top', newMarginTop);
            console.log('old: ' + marginTop + ', new: ' + newMarginTop);
            $item.show();
        });