Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ Vertical positioning error under Chrome

Posted by: NitroPress Oct 12 2011, 10:14 AM

I have a simple XHTML/CSS site that uses an absolutely positioned div within another to highlight the current page menu selection (represented by graphic text blocks). I've gone over the code several times and validated it, and I am still seeing a cumulative positioning error under Chrome.

Under FF and IE, the marker box positions correctly all the way down. Under Chrome, there is a cumulative error of about 2% so that by the time the marker is on the bottom menu item, it's a dozen pixels off center. I've run into many positioning errors and know the usual fixes, but those usually involve a fixed offset or a top-item only offset.

Here is the relevant code:

CODE
#navbar {
    float: left;
    min-width: 200px;
    max-width: 200px;
    position: relative;
    padding: 9px 0 0 0;
    line-height: 1.25;
}

    #navbar img {
        margin: 0 0 20px 0;
        padding: 0;
        border: none;
    }

    #navbar .markbox {
        position: absolute;    
        min-width: 200px;
        max-width: 200px;
        height: 30px;
        border-top: 2px solid #c99;
        border-bottom: 2px solid #c99;
        z-index: -5;
    }


And the page, still under development and please ignore all ragged edges, is temporarily here:
http://www.nitropress.com/CLIENT_TEST/MalamaPono/index.php

I've gone through several iterations trying to suppress border widths and other rendering variables, and none of them has changed the basic strange cumulative error. Any pointers or thoughts appreciated - I don't really want to go to browser-specific hacks on such a simple page if I can avoid it.

Posted by: NitroPress Oct 13 2011, 08:37 AM

Solved with a browser-selector snippet, no root-cause fix found.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)