Web site elements stretched and overlapped vertically on big monitors

[pwired]

Hi,

If I check a website on my laptop with a 17 inch screen and 1024 x 768 res, everything looks ok.

But, when I check the same website on a big monitor with a 25 inch screen but with also 1024 x 768 res,

things look vertically stretched ! Even some stretched pictures start to overlap things underneath them.

I tried to fiddle with css but without success.

Anyone knows a solution ?

[dragan]

If you would post a link, I'm sure we could find the culprit...

[pwired]

It's against policy here were I work. Lost a job in a team beginning of this year due to posting.

They never told me the reason.

[dragan]

Fair enough, but you could at least copy the HTML, CSS, JS, strip all sensitive data (replace content with lorem ipsum, replace logos, links etc.) and post a copy somewhere? The description you gave is just too minimal. It's probably a CSS issue, but without more infos, I'm afraid no one can help you.

[pwired]

_{If I can't do it fast enough, is it ok to private post the html, css, js ?}

[Peter Knight]

Hi,

If I check a website on my laptop with a 17 inch screen and 1024 x 768 res, everything looks ok.

But, when I check the same website on a big monitor with a 25 inch screen but with also 1024 x 768 res,

things look vertically stretched ! Even some stretched pictures start to overlap things underneath them.

I tried to fiddle with css but without success.

Anyone knows a solution ?

Is the issue on the 25" site exclusive to the site you're building?

[Philipp]

So Resolution is the same. What about Pixel Density, Browser and OS Versions? Maybe the monitor is just misscallibrated.

25" with 1024x768 sound a little bit strange too...

[PhotoWebMax]

Maybe an oddball setting on the actual display?

[pwired]

What about Pixel Density, Browser and OS Versions? Maybe the monitor is just misscallibrated.

Everybody is on win7, some have chrome, others firefox. Never checked pixel density though.

Had to look with google how, I checked and it's on 100 % on all monitors.

Is the issue on the 25" site exclusive to the site you're building?

Actually it seems to be only on the monitor of my Boss. He wanted to have christmas animations

on some webshops and that is how it showed up.

Is is possible to give a website a max-height ? Does something like max-height work on the body tag ?

I have seen that setting a fixed width on the body tag is working, what about a fixed height ?

Is it possible to keep an animated gif inside an area so that it will never overlap something underneath ?

I don't think this will solve the problem. It looks to me that the monitor is the cause and not the webshop.

Though it stays weird to me. If a site is stretched vertically due to a huge monitor, all elements should

become stretched and not that they start to overlap each other.

[Joss]

One thing you could try, just as a process of elimination, is with the containers where you are getting the overlap, set overflow to none. 

If they then are chopped off, then it is probably not the monitor, but the web browser - perhaps very old firefox or something.

If that is the case, then you will need to change the way the elements are positioned within the container to make sure they stretch the container down. Make sure they are not using position absolute, for instance.

[pwired]

That gives me something to work on, thanks.