Help with positioning input field in navigation

Hi guys,
I was hoping someone could help me position the input field of my site-search inline with my navigation properly. It is already placed proeprly, but in chrome the input-field is shifted more to the right, which overlaps the blog button
and in firefox, it is positioned fine.
Here is a live example
http://dl.dropbox.com/u/270523/team1504/navigation.html

I hope that someone can help me position the input field so that it is inline with the navigation and not overlapping the other <li>'s in all modern-browsers.

Thanks in Advance & Best Regards,
Team 1504

margin:0 auto for the nav element is translated differently: for FF it means 1000 x 36 box model for nav, for Ch is 982 x 36, with 9px left and right margins. So, your margin-right on input id field1 is translated differently also.

You can easily notice that by comparing the right ends: The desperate penguins doesn’t line up below in FF.

Put the nav background image on the <nav> then give #navigation an explicit width, float it left and then float the search right.

Hi,

I’d include the input in the same list instead of creating a new element for it.

e.g.


<div id="header" >
    <nav>
        <ul id="navigation">
            <li id="dpn-home"><a href="http://apple.com/">Home</a></li>
            <li id="dpn-about"><a href="http://store.apple.com">About</a></li>
            <li id="dpn-groups"><a href="http://apple.com/mac/">Groups</a></li>
            <li id="dpn-media"><a href="http://apple.com/ipod/">Media</a></li>
            <li id="dpn-outreach"><a href="http://apple.com/iphone/">Outreach</a></li>
            <li id="dpn-resources"><a href="http://apple.com/ipad/">Resources</a></li>
            <li id="dpn-sponsors"><a href="http://apple.com/itunes/">Sponsors</a></li>
            <li id="dpn-blog"><a href="http://apple.com/support/">Blog</a></li>
           [B] <li id="dpn-search"><span><input type="text" id="field1" value="" style="width:140px; background-color:#fff" /></span></li>[/B]
        </ul>
        <script src="http://dl.dropbox.com/u/270523/team1504/assets/scripts/js/hoverCode.js"></script>
        <div id="subNavContent"></div>
        <div id="subNavContainer"></div>
    </nav>
</div>


And then just create these rules for it.


nav ul li#dpn-search input {
    float:right;
    margin:8px 7px 0 0;
    display:inline;
}
nav ul li#dpn-search span {
    background-position: -824px 0;
    width:158px;
    float:left;
    height:36px;
    background-image: url(http://dl.dropbox.com/u/270523/team1504/assets/media/images/navigation/globalnavbg.png);
    _background-image: url(http://dl.dropbox.com/u/270523/team1504/assets/media/images/navigation/globalnavbg.gif);
    background-repeat: no-repeat;
}

That looks much the same in Firefox and Chrome to me.

If you are going to use html5 elements then you need to add support for IE and you need to declare whether the elements are block because most browsers don’t know about them and will treat them as inline elements.

Thank you for all your help, I really appreciate it.

Sometime I look over the simplest solutions…

I do not know how I missed that. I think at one point I was planning on doing something like it that is why I put the #dpn-search as the last <li>, but gave it no content.

Thanks again,
Team 1504