0

I've got an issue at the moment where the text on my webside seems to align to the left when a user first loads the page. After they refresh or go back to that same page (in the same tab) then it works fine.

At the moment i've got a div with the website logo in it and a div with the text in text to it. I think the problem is related to the logo not loading quick enough, causing the text div to essentially ignore the div with the logo in it.

Is there any solution available that will prevent this by either ensuring the image is loaded before the CSS is rendered or a solution that will ensure that the divs remain in the exact same place even if they don't have any content in?

(CSS Sample)

div.topbar div.logo{
    margin-left: 15%;
    margin-top: 1px;
    margin-bottom: 1px;
    background-image: url("logo.png");
    background-repeat: no-repeat;
    height: 100%;
}

div.topbar div.navigation{
    display: inline-block;
    position: absolute;
    top: 0;
    margin-left: 25%;
    font-family: 'Open Sans Light', sans-serif;
    font-size: 15px;
    margin-top: 10px;
}
Ryan
  • 957
  • 5
  • 16
  • 34

2 Answers2

0

This is the main reason why it is advised to specify the dimensions of the image in HTML itself.

<img width="..." height="..." src="...">

The above code will keep your layout intact even if there is a delay in loading the images and/or the CSS files.

More info:

Should I specify height and width attributes for my IMGs in HTML?

Community
  • 1
  • 1
techfoobar
  • 65,616
  • 14
  • 114
  • 135
0

Specify width and height of your logo container.

div.topbar div.logo {
    /* other stuff */
    width: 400px;
    height: 100px;
}
dersvenhesse
  • 6,276
  • 2
  • 32
  • 53