IE8 offset problem

HTML & CSS
1

Hi

The #container has width: 1000px, and the #header max-width:1000px, yet for the #footer to line up I had to give it max-width:960px. It works but I don’t understand why…

Now, I looked at it in IE8 and the footer is offset to the right. I introduced a conditional max-width:1000px. This lines up the left of the fotter with the #left sidebar but it is too wide going beyond the limits of the #right sidebar. I can solve that with overflow:hidden, but lose the rounded corner on the right.

One way out, I think, is to introduce another div like

 #offset{
margin-left:-20px;
}

<div id="offset">
   <div id="footer" style="margin: auto;">...</div>
</div>

but, apart from not knowing if this would work I am at a loss as to where to put it: html conditional?

I know IE8 is not in much use but I would like to solve the problem, please.

The page is http://pintotours.net/Asia/India/India.php

2

This isn’t just IE8. If I set the footer to 1000px max width and it’s overflowing on the left and right. The footer is getting 20px left and right padding which equals 1040px.

So you are finding yourself having to set 960 to allow the 40px padding.

I would say you could use box-sizing:border-box; which will make it so you can just set 1000px width, although IE8 ignores that if you have a max-width in use. I’d add in box-sizing:border-box; though, change the max-width to 1000px;, and then make an IE8 conditional stylesheet which sets it to 960px. This will allow getting rid of IE8 support easy since you can remove that stylesheet later on :slight_smile: .

3

Hi Ryan

I don’t understand. I get correct display in all browsers EXCEPT IE8. Are you saying that you can see the same problem in other browsers?

Regards

4

If I understand the problem, yes. What is your display when you make the footer a max-width:1000px in Chrome? I’m seeing it be wider than the rest of the page.

5

Thta’s strange1 In all my browsers the display of the #footer is perfect after I changed the width to 960px.

6

Yes, that’s perfect. That’s what I mean. It’s when you change it to 1000px that’s when it breaks, which is due to the padding. I thought that was the IE8 issue. Apologies.

You can once again blame your Javascript curvy corners. This make issue # 23423425 with this plugin? For a user base that is abysmal?

7

Hi Ryan

I understand, but to be honest I hardly have any users… It is just a hobby for me,

What I needed now was advice on whether I could inplement some code similar to the one I posted above, as a conditional, and where Should I place it.

TO CLARIFY

I am happy with the rendering of the page in all major modern browsers. What I need is to patch up IE8 only.

8

RESOLVED (I think…)

I enclosed the #footer in a #offset, which does not seem to interfere with the main css and used a negative margin in a conditional. It starts ugly but settles into the proper place.

I f anayone has a better answer…

9

You have a typo here and the comments are showing on screen.

</div>>!-- close offset>

It should be:

</div><!-- close offset -->
10

Corrected.

Thanks Paul

11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.