Resizing the screen in the browser causes problems in our application

Question

I have an MVC web application without razor code, i.e. views are created using only HTML and javascript code. Below is a screenshot of my screen.

Now in IE8 the following problems occur:

Screenshot of my screen: http://www.freeimagehosting.net/ixio1

1. Lowering the zoom level of the browser distorts the elements on the screen, which is the left and right panel, one after the other vertically, where increasing the zoom level works fine.

2. And I have a heading with two sections. The top section will always be displayed on the screen, even when the user scrolls down. Now the buttons at the bottom of the title bar are hidden behind the top of the title bar when I set the zoom level to 100%, this also happens when I view the bottom of the screen, and then the vertical scroll bar disappears in any scenario.

Screenshot with hidden title buttons: http://www.freeimagehosting.net/2eq68

Answer 1

Using browser scaling often interrupts your site depending on what CSS and HTML you used. Using certain pixel values ​​and even% sometimes for sizes will cause problems, font sizes and weights will also cause problems (browsers do not have the same fine-grained control on fonts that Desktop Applications usually execute).

Depending on the design of the site, your best bet is to try to design a site to be flexible.

Answer 2

Hard to see, especially from the screen. It is much better to refer to an example if you want full help.

I would say that this is a problem with CSS, and you should check if you are using pixels, not%.

You can put the sample on a JS script so that people can debug, it’s quite difficult, if not impossible, with this screenshot.

Answer 3

Basically, the width of several areas should be fixed in pixels. This is a custom solution where to apply what. If a fluid arrangement is used, most areas are fixed in%. However, you will find that very little content is displayed in this layout. While with a fixed layout, the areas are fixed in pixels, which are independent of resolution.

Hope this clears your ideas.