How can I stop IE 7 from ignoring my width value and treating the element as a block when I install the add-on?

Question

Isolated test case (view in IE 7 or IE 8/9 in IE 7 mode)

Viewing this page in IE 7 ignores my width value. If you remove the padding value, the width will be correctly applied, but when you add in the add-on, it will cause the whole page to grow and treat the filling almost like a margin. The larger the page width, the greater the empty space to the right of the element. I could not find what it is, and, more importantly, how to fix it. Has anyone seen this and does anyone know the solution?

Things I've tried so far:

• zoom fix
• display: inline-block (recommended for double vertical laying problems)
• This is not line-height (this is a width issue ...)

Screenshot:

This div should cover the entire width of the page, and no more, but you will see a scroll bar here: And the result of scrolling to the right: It should not be.

Examining an element in browser tools shows a width that should be incorrectly with the full page width, and not the full width minus the fill.

Answer 1

Disclaimer: I will ignore the functional requirement and your comments on the other answers and just concentrate on the specific problem.

---

This particular IE7 problem is caused by using an offset (e.g. top , right , bottom or left ) on a relatively positioned element. If you are shifting a relatively positioned element, then it will basically retain the entire space of its original position. Please note that this does not happen if you compensate for an absolutely positioned element.

Before the left offset is applied, the relatively positioned element, due to its width and proper filling, completely leaves the viewport and, therefore, a horizontal scollbar will be generated. After the left offset is applied to the relatively positioned element, you basically leave the space the same size as the offset on the other side of the offset, still outside the viewport.

A damaged web browser during redrawing, however, detects that nothing is visible outside the viewport and, therefore, hides the scroll bar again. However, IE7 is not so smart and retains the scroll bar.

In the end, using left offset was technically the wrong decision. You should use margin-left instead of left in the first place. Unlike offset, the margin does not leave empty space in the initial position, but actually pushes the entire element to the desired position.

So here is how your script is fixed:

 $('#el').css({ 'width': document.body.scrollWidth - 200, 'padding-right': 200, 'margin-left': (-1 * (document.body.scrollWidth - 322) / 2) - 1 }); 

---

By the way, I am wondering how is float: left; makes sense in this design, in which you apparently want to simulate a 100% width. This will probably be for other purposes not visible in the specific example.

Answer 2

You can solve this problem without using javascript to calculate the width and without filling, use position: absolute instead. Here's the updated fiddle. It will work in any browser.

 #el { background-color: #FFFF00; min-height: 45px; width: 100%; position: absolute; left:0; right: 0; top: 0; } 

http://jsfiddle.net/LRpHq/7/

Answer 3

I had this problem with skeleton.css implementation. In particular, my #header took up the width of the body , which took up the width of the html . The remaining content had a set width of 978px. Therefore, when the window was smaller than 978, the title bar will only be displayed in the width of the viewport. those. - if you started rendering at a width of 500, you would get an increasingly wider #header . Dragging the wider width of the viewport did not have a problem, but right-scrolling reduced the title to the size of the original viewport.

My fix: html,body { min-width:978px } /* your width may vary */

Answer 4

Fixed original message when it was turned off by miles.

change

Tested in IE7 with a sandbox and it works. (what can I say, I'm moving away from my path to get something perfect, also new here, so generosity will really help to be very honest), to also note that it works initially in IE7, IE8 and IE9, FF3. 6, Opera 10 and should work in Safari without problems, Chrome was not mentioned as my default browser, and it works, I have no doubt.

Here is the JS:

 function resize () { $('#el').trigger('resize').width('100%'); } resize(); 

and CSS:

 #container { width: 320px; border: 1px solid #000000; min-height: 500px; margin: 0px auto; } #el { background-color: #FFFF00; min-height: 45px; width: 100%; position: absolute; left: 0; } 

Answer 5

Since it seems to you that you are using Javascript, configure the resize() function:

 function resize () { $('#el').css({'width':$(window).width(),'position':'absolute','left':'0px'}); } 

Answer 6

I found a solution for a similar problem here . see if it helps you.