CSS not loading initially

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.

Eric J. · Accepted Answer · 2012-08-03 17:08:13Z

1

Possibilities:

You don't emit the same CSS both times
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:

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

answered Aug 3, 2012 at 17:08

Eric J.

151k65 gold badges353 silver badges563 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

lessthanthree Over a year ago

That developer tools bit is a fantastic piece of advice. However, when I clicked on the items.. it shows that they're hitting the correct CSS and same ones both times. What I don't understand is that majority of the styles in the positioning are inline styles, so it should work. Thank you for the advice, though!

Matthew Cox Over a year ago

@lessthanthree Try chrome's debugger or firefox's (firebug). Wayyyyyy better developer tools that you'll like.

Eric J. Over a year ago

@MatthewCox: What makes Chrome and Firefox's debugger better?

Eric J. Over a year ago

Try creating a jsfiddle that reproduces the issue.

Matthew Cox Over a year ago

@EricJ. Are you really asking me to defend the statement? I only ask incredulously because ie8's debugger is the spawn of satan in contrast with chrome's or firebug. However, if you are thinking of ie9's ... well I haven't used that one yet =P

|

Collectives™ on Stack Overflow

CSS not loading initially

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related