Question

I actually previously had a much longer question but I figured this would be the easiest to get situated. When I initially load my page, some of the items in the navigationBanner get displaced. But after I enter an order number in the text box and it reloads… everything is where it should be. I’m assuming my CSS is not loading when it should be, but I’m not entirely sure because I am entirely noobish at html and css.

Could anyone explain this to me?

Here’s my html for the nav bar

<div id="background"><img src="images/blue%20background.jpg" alt="background" width="100%" height="100%" /></div>
    <div id="header">
        <div id="navigationContainerWrap">
            <div id="navigationBanner">
                <a href="">
                    <img src="images/facebook.png" alt="Facebook Link" border="0" style="margin: 4px 0 5px 44px;" /></a>

                <a href="">
                    <img src="images/twitter-2.png" alt="Twitter Link" border="0" style="margin: 4px 0 5px 2px;" /></a>

                <a href="">
                    <img src="images/pinterest-icon.png" alt="Pinterest Link" border="0" style="margin: 4px 0 5px 2px;" /></a>

                <img src="images/txtNewCustomers.png" alt="New Customers txt" style="margin: 0px 0 5px 50px;" />

                <img src="images/txtExistingCustomers.png" alt="Existing Customers txt" style="margin: 0 0 5px 50px;" />

                <a href="">
                    <img src="images/email.png" alt="Email Link" border="0" style="margin: 4px 10px 6px 0;
                        float: left;" /></a>

                <p style="float: left;">
                    1.800.BLAH.BLAH</p>

                <a href="">
                    <img src="images/btnOrder.png" alt="New Customers Button" border="0" style="float: left;
                        margin: 0 0 0 45px;" /></a>

                <a href="">
                <img src="images/btnLogIn.png" alt="Log in Button" border="0" style="float: left;
                                margin: 0 10px 0px 25px;" /></


            <!-- Order tracking Form input -->    
                 <div class="trackingInput">
                    Order Status<br />
                    BloopBloop Order Number:<br /> 
                    <input id="txtOrderID" type="text" onkeydown="if (event.keyCode == 13) document.getElementById('btnOrder').click()" />
                <input type="button" id="btnOrder" value="Submit" onclick="return btnOrder_onclick()" />             
                </div>

</div>

Annnnd what I believe is relevant CSS

.trackingInput
{
    float: right;
    /*padding: 0 5px 0px 0;*/
    z-index: 35;
    font-weight: normal;
    font-family: "Century Gothic";
    height: 85px;
    margin-top: -45px;
    position: relative;
    margin-left: -1px;
    width: 178px;
}

#navigationBanner
{
    background-color: black;
    background-repeat: no-repeat;
    height: 85px;
    width: 600px;
    float: right;
    color: White;
    font-weight: bold;
    font-size: small;
}
#navigationContainerWrap
{
    background-position: center;
}
#header
{
    background-color: White;
    background-image: url(../Images/GenericLogo.png);
    width: 960px;
    height: 140px;
    background-repeat: no-repeat;
    margin: 0 auto;
    position: relative;
    z-index: 10;
}

Thanks in advance! And sorry for the info overload.

Answer 1

Possibilities:

1. You don’t emit the same CSS both times
2. You don’t emit the same HTML both times (e.g. you use different tags and/or classes)

One method to track this down using Internet Explorer:

1. Load your first page (the one that is not working as you expect) in IE
2. Hit F12 to open developer tools
3. Click on the Arrow icon in Developer Tools to enter Select mode
4. Click on a a part of your web page that isn’t displaying correctly
5. Click on the Trace Styles tab (in Developer Tools)
6. Explore the style tree to see where each style is deriving from