Question

we’ve got an issue that only effects Chrome, Firefox and IE are fine.

the only page affected in Chrome is the home page, index.html… all other pages use the exact same header html and CSS. If we click a link on the home page to go to an interior page, the page works fine, then we click back to the home page and it looks fine… but if we refresh the home page, its messed up again.

here’s the url

http://www.logilityconnectionseurope.com

the element that gets pushed down is a big div that holds an image and some text on the right side, the div CSS is as follows

.dateLogoTopDiv  {
float:right;
text-align:right;
margin-top: 15px;
}

HTML:

<div class="header">

    <img src="images/connections-europe-2013-logo-web.jpg" width="410" height="242" alt="connections europe 2013 logo" />

    <div class="dateLogoTopDiv">
        <img src="images/logility-logo.jpg" width="105" height="108" alt="logility logo" />
        <p>14-15 May 2013</p>
        <p>Hotel Le Plaza </p>
        <p>Brussels, Belgium</p>
     </div>

</div>

as I said, works fine in Firefox and IE and works in Chrome on every page except the index

any help would be appreciated

Answer 1

Run your page through the HTML Validator and fix all errors. Without valid HTML, browsers don’t know for sure what you intended to display and you’ll have cross-browser rendering inconsistency. In this case, Webkit browsers (Chrome & Safari).

http://validator.w3.org/

EDIT:

OP’s site previously contained malformed HTML including open tags and misplaced tags. OP’s site has since been fixed, rendering the code at the URL posted in the question obsolete.

EDIT 2:

I’m seeing the OP’s issues in Chrome. I cannot explain why the issue was occurring or why it was intermittent. However, I fixed it by adding the following…

Additional CSS:

.header {
    overflow: auto;
}

.header > img {
    float: left;
}

Existing HTML:

<div class="header">

    <img src="images/connections-europe-2013-logo-web.jpg" width="410" height="242" alt="connections europe 2013 logo" />

    <div class="dateLogoTopDiv">
        <img src="images/logility-logo.jpg" width="105" height="108" alt="logility logo" />
        <p>14-15 May 2013</p>
        <p>Hotel Le Plaza </p>
        <p>Brussels, Belgium</p>
     </div>

</div>

This takes the two main header elements and floats them left & right respectively. The right one was already floating to the right. overflow: auto; is a trick to force the header to expand to contain it’s floated elements. Since both are floated, they are outside the regular content flow and would not normally cause the header to expand.