Content Shifting

Hello so when I refresh my website using IE the content seems to be shifting from some of my pages for instance this page: http://iogproducts.com/shock_fuse.aspx. I have no idea why it happens when I land on the page then refresh it…

Do all your pages have scroll bars? if not, the content will shift sideways to accommodate the difference between the scroll bar on the right and no scroll bar on the right.

1 Like

Yes most the pages have scroll bars…only a few dont have them.

So I need scroll bars?

Try setting overflow-y:scroll; on the <body> element and see if that helps.

ok ill try thanks.

It’s kind of the natural behavior of the web, so I wouldn’t worry about it, tbh.

but my company would like that happening the text goes over the line…

Hi,

What line ?

I think you may need to supply a screenshot as we may be talking at cross purposes here.:slight_smile:

As an aside those 2 small images on the page you linked to have a file size of 1200k and 500k which is more weight that I would use for the whole page of a large site. The image should be about a hundred times smaller in file size than that so optimize them down to about 20k - 40k. Don’t just supply a massive image and then resize it smaller in the browser.

Indeed this may be a reason you get issues on refresh because you incur that massive load each time.

Here is the screen shot

it does this when refresh the page in internet explorer browser…ok ill take a look at the images.

It looks like your <body> has a margin on it. Try overflow-y: scroll; on the html instead of body:

html {
    overflow-y: scroll;
}

what do you mean instead of body…I dont have a body tag in my css…

What do you call this then :slight_smile: ?

body 
{
     font-family: "open sans", sans-serif;
}

yeah but that is irrelevant to my current page situation that is not causing my text to shift over there is nothing in that tag causing the shifting… but regardless ill try this:

html {
    overflow-y: scroll;
}

Huh? Noone is saying that the rule I posted is causing hte issue. Where did we say that the font rule was causing it? I’m honestly confused.

I suggested you add the overflow to the body tag in your CSS. I don’t know what in the world you are talking about.

im just saying that my body tag is not causing the shifting even though there is a tag in my css…but yes ill put it that code in there and see if it works THANKS

Yes, I do 100% understand that it’s not causing the shifting.

Nothing in your code for your body tag would be causing hte issue. I agree

I was simply suggesting a fix by telling you to add a rule to the body tag (again, your original body tag CSS wasn’t causing hte issue.)

Either way, let us know what your results turn up.

ok Thanks.

What version of IE is that ?

I tried in IE11 and I couldn’t get it to go wrong at all which is why its hard to offer a solution.

Yeah I have IE11 and it does it to my browser…for instance this page: http://iogproducts.com/ShockLabels.aspx