CODEWITHSUNDEEP
cssinternet-explorer-7
LoveAndCoding
LoveAndCoding

Reputation: 7947

How can I stop IE 7 from ignoring my width value and treating element as block when I set a padding?

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

Viewing this page in IE 7 is causing my width value to be ignored. If you remove the padding value, the width is properly applied, but when you add in the padding, it causes the entire page to grow, and it treats the padding almost as margin. The larger the width of the page, the larger the blank area to the right of the element. I've been unable to find which bug this is, and, more importantly, how to fix it. Has anyone seen this and does anyone know a solution?

Things I've tried so far:

Screenshot of the issue:

This div should span the entire width of the page, and no more, but you'll notice the scrollbar here: IE 7 issue pre-scroll And the result of scrolling to the right: IE 7 issue post-scroll This should not be there.

Examining the element in the browser tools shows the width to be incorrectly the full width of the page, instead of the full width minus the padding.

Upvotes: 4

Views: 729

Answers (6)

BalusC
BalusC

Reputation: 1108672

Disclaimer: I'll ignore the functional requirement and your comments on the other answers and just concentrate on the concrete problem.

This IE7 specific problem is caused by using an offset (e.g. top, right, bottom or left) on a relatively positioned element. If you offsets a relatively positioned element, then it will basically still retain the whole space of its original position. Note that this doesn't happen when offsetting absolutely positioned element.

Before the left offset is been applied, the relatively positioned element is due to its width and and the right padding completely out of the viewport and hence a horizontal scollbar will be generated. After the left offset is applied on the relatively positioned element, you're basically leaving a space of the same size as the offset on the other side of the offset, still outside the viewport.

A bit sane webbrowser will during redrawing however discover that there's nothing visible outside the viewport and hence hide the scrollbar again. IE7, however, isn't that smart enough and retains the scrollbar.

After all, using left offset was technically been the wrong solution. You should in first place have used margin-left instead of left. Unlike the offset, the margin doesn't leave an empty space on the original position, but really pushes the whole element to the desired position.

So, here's how your script is been fixed:

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

By the way, I wonder how that float: left; makes sense in this construct wherein you apparently want to simulate a 100% width. It'll probably be for other purposes not visible in the concrete example.

Upvotes: 3

Ravi_Parmar
Ravi_Parmar

Reputation: 12329

i found solution for similar problem here. see if it can helps you too.

Upvotes: 0

Hazard in Code
Hazard in Code

Reputation: 169

Fixed the original post as it was off by miles.

edit:

Tested in a sandboxed IE7 and it works. (what can i say, i go out of my way to get something perfect, also am new around here so that bounty would really help to be very honest) to also note that it works natively in IE7, IE8 and IE9, FF3.6, Opera 10 and should work in Safari with no problem, Chrome didn't get mentioned as it's my default browser and it works, no doubt about it.

Here is the JS:

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

and the 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;
}

Upvotes: 1

joequincy
joequincy

Reputation: 1395

Since you seem to be fine with using Javascript, adjust your resize() function:

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

Upvotes: 1

Dawson
Dawson

Reputation: 7597

I was having this problem with a skeleton.css implementation. Specifically, my #header was taking the width of body, which took the width of html. The remaining content had a set-width of 978px. So when the window was smaller than 978, the background of the header would only render to the width of the viewport. i.e. - if you started the render at 500 wide, that's all the wider #header would get. Dragging a wider width of the viewport had no problems, but right scroll cut the header to the size of initial viewport.

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

Upvotes: 1

Caelea
Caelea

Reputation: 2348

You can solve this without using javascript for calculating width, and no padding, instead use position: absolute. Here's an 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/

Upvotes: 1

Related Questions