Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › Back End › I See a Flash of the horizontal computer scroll bar on every page load?

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • September 24, 2013 at 12:16 pm #151118
    iizag
    Participant

    I see a flash of the horizontal computer scroll bar on the bottom of my WordPress page every single time the homepage loads or any other page of my site loads or I refresh the page. It is as if something is expanding and then fitting into position as the grey bar disappears in 2 seconds? Please visit my site so you can see the horizontal bar on page load/ page refresh, and let me know what you think. I have been trying to figure this out for about 4 weeks on my own with no luck :-( …. My website is (http://iamdentistry.com/)

    Someone told me they think the issue is that I have styles at the end of my document, like this:

    ` div.maxbutton-10-container { display: inline-block; } a.maxbutton-10 { text-decoration: none; color: #ffffff; } a.maxbutton-10 .maxbutton { width: 135px; height: 40px; background-color: #a33c3c; background: linear-gradient(#a33c3c 45%, #a33c3c); background: -moz-linear-gradient(#a33c3c 45%, #a33c3c); background: -o-linear-gradient(#a33c3c 45%, #a33c3c); background: -webkit-gradient(linear, left top, left bottom, color-stop(.45, #a33c3c), color-stop(1, #a33c3c)); border-style: solid; border-width: 1px; border-color: #a33c3c; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; text-shadow: -1px -1px 0px #8f5959; box-shadow: 0px 0px 2px #a33c3c; -pie-background: linear-gradient(#a33c3c 45%, #a33c3c); position: relative; behavior: url(“http://pantryliquors2.com/wp-content/plugins/maxbuttons-pro/pie/PIE.htc”); } a.maxbutton-10 .maxbutton .mb-text { color: #ffffff; font-family: PT Sans Narrow; font-size: 12px; font-style: normal; font-weight: normal; text-align: center; padding-top: 15px; padding-right: 20px; padding-bottom: 5px; padding-left: 0px; line-height: 1.0em; width: 100%; } a.maxbutton-10 .maxbutton .mb-text2 { color: #ffffff; font-family: PT Sans Narrow; font-size: 16px; font-style: normal; font-weight: normal; text-align: center; padding-top: 0px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; line-height: 1.0em; width: 100%; } a.maxbutton-10:visited { text-decoration: none; color: #ffffff; } a.maxbutton-10:hover { text-decoration: none; color: #fab9b9; } a.maxbutton-10:hover .maxbutton { background-color: #a33c3c; background: linear-gradient(#a33c3c 45%, #a33c3c); background: -moz-linear-gradient(#a33c3c 45%, #a33c3c); background: -o-linear-gradient(#a33c3c 45%, #a33c3c); background: -webkit-gradient(linear, left top, left bottom, color-stop(.45, #a33c3c), color-stop(1, #a33c3c)); border-color: #a33c3c; text-shadow: -1px -1px 0px #8f5959; box-shadow: 0px 0px 2px #a33c3c; -pie-background: linear-gradient(#a33c3c 45%, #a33c3c); position: relative; behavior: url(“http://pantryliquors2.com/wp-content/plugins/maxbuttons-pro/pie/PIE.htc”); } a.maxbutton-10:hover .maxbutton .mb-text { color: #fab9b9; } a.maxbutton-10:hover .maxbutton .mb-text2 { color: #fab9b9; }

    `

    They said they think this issue might be caused because they think that some code is being loaded from the footer instead of the header? How can I fix this if this is the case? What do you think it could be?

    Thank you for any help

    September 24, 2013 at 12:19 pm #151119
    Paulie_D
    Member

    They said they think this issue might be caused because they think that some code is being loaded from the footer instead of the header? How can I fix this if this is the case? What do you think it could be?

    Loading code in the head or after the footer is generally a bad idea. There is absolutely no reason for it to be there, especially on a WP site.

    Extract it all to your CSS Stylesheet (or a separate one) and load it as normal in your <head>.

    September 24, 2013 at 5:11 pm #151138
    iizag
    Participant

    1.) So do you think this is the problem causing this grey flash of the horizontal bar ?

    2.) The code they refer to is actually a plugin so naturally it is already like that since plugins naturally come with there css style sheets just located under the plugin wordpress editor instead of the area where my child css sheet is , …right or am I confused?

    Thanks for helping me

    September 25, 2013 at 2:03 am #151153
    Paulie_D
    Member

    The problem is that the CSS being linked in the head is that it tells the browser how to style each element as it loads.

    By putting the CSS in the bottom of the page the elements render with the initial settings and are then changed once the newer CSS finally loads.

    As for WP functionality that’s a different subject so I’ll pass you over to the WP section.

    September 25, 2013 at 7:13 am #151185
    iizag
    Participant

    Thank you, I hope discover what I need to do to fix this issue

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘Back End’ is closed to new topics and replies.