An IE8 horizontal stretching issue.

@DragonkaiJun 26.2010

I’ve got a double column with one of the columns having another two columns in it.

The design works in all major browsers including ie6 and ie7. The ie8 is the problem.

When I load it into ie8, the site is stretched horizontally with a horizontal scrolling bar.

There are no images atm.

I have attached the html and css file. (It’s a php file but it has no php atm so you don’t need a server, just rename it to .html)

Thanks for any help.

~~[upl-file uuid=8963fb1d-0849-44d7-a7ed-415a9613c8d1 size=2kB]~~website.zip[/upl-file]

to post a comment

CSS

6 Comments(s) _↴

@DragonkaiauthorJun 26.2010 — #I tried to directly input the html and css but the site didn't allow me because there was too much content. So I stripped it down.

HTML:

[code=html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 
 <head>
 <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
 <title>Australia National University Aiesec</title>
 <link href='style.css' rel='stylesheet' type='text/css' />
 <!--[if !IE 7]>
 <style type="text/css">
 #not_footer {display:table;height:100&#37;}
 </style>
 <![endif]-->
 </head>
 
 <body>
 <div id='not_footer'>
 <div id='header'>
 <div id='top'>
 <p>Top</p>
 </div>
 <div id='middle_slider'>
 <p>Middle Slider</p>
 </div>
 </div>
 <div id='main'>
 <div id='content'>
 <div id='pages'>
 <div id='recent_page' class='page'>
 <div id='recent_post' class='post'>
 <p>These are pages Lorem ipsum dolor sit amet, consectetur adip dolor, a imperdiet nulla. Morbi interdum elit id dolor pretium vitae gravida enim faucibus convallis.
 
  Etiam ac ante ipsum. Proin vestibulum quam sed elit mollis pellentesque. Curabitur aliquam metus non diam lobortis ut convallis lorem vulputate. Nulla ut quam feugiat dolor mnas adipiscing aliquet libero. Praesent vehicula odio sit amet mi rutrum tincidunt. Morbi ultricies, mauris vitae porttitor dignissim, dui ante dapibus orci, quis suscipit mi nisi eu eros.
 nulla at fermentum tincidunt, massa ipsum tincidunt enim, at pulvinar mi erat sed felis. Ut nunc nulla, gravida ut viverra eu, porttitor non augue. Quisque ut quam venenatis dolor scelerisque cursus. Vestibulum imperdiet dignissim ullamcorper. 
 </p>
 </div>
 <div class='date_area'><p>18</p></div>
 </div>
 <div class='page'>
 <div class='post'>
 <p>These are pages Lorem ipsum dolor sit amet, consectetur adipiscat sem. Cras eget arcu ut sem semper porta at a quam. Maecenas eget massa dolor, a imperdiet nulla. Morbi interdum elit id 
 Etiam ac ante ipsum. ipiscing aliquet libero. Praesent vehicula odio sit amet mi rutrum tincidunt. Morbi ultricies, mauris vitae porttitor dignissim, dui ante dapibus orci, quis suscipit mi nisi eu eros.
 
  Se dolor scelerisque cursus. Vestibulum imperdiet dignissim ullamcorper. 
   </p>
   </div>
   <div class='date_area'><p>19</p></div>
   </div>
   <div id='old_page' class='page'>
   <div id='old_post' class='post'>
   <p>These are pages Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras consequat, tortor id ornare ultrices, purus risus pellentesque arcu, nec viverra dolor velit vitae est. Nunc feugiat, metus eget dictum elementum, urna leo varius lorem, sit amet placerat ligula lacus sit amet nulla. Morbi in mauris ac odio egamet ullamcorper massa. Suspendisse non enim urna, eget lobortis lectus. Ut elementum faucibus convallis.
 
  Etiam ac ante ipsum. Proin vestibulum quam sed elit mollis pellentesque. Curabitur aliquam metus non diam lobortis ut convallis lorem vulputate. Nulla ut quam feugiat dolor molestie gravida. Pellentesque tempor, nibh a iaculis aliquam, turpis leo posuere nulla, quis dignissim dolor est vitae libero. Morbi varius luctus cursus. Morbi adipiscing velit ult
 
  Sed risus ipsum, rhoncus at adipiscing vel, hendrerit sit amet nibh. Cras fringilla porta velit quis hendrerit. Cras quis accumsan ligula. In non nunc lacus, bibendum rutrum tellus. Cras tristique quam id orci posuere ullamcorper. Nunc egestas justo eget felis ve
   </p>
   </div>
   <div class='date_area'><p>20</p></div>
   </div>
   </div>
   </div>
   <div id='sidebar'>
   <div id='inner_sidebar'>
   <p>This is a sidebar WOOPEY Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras consequat, tortor id ornare ultrices, purus risus pellentesque arcu, nec viverra dolor velit vitae est. Nunc feugiat, metus eget dictum Suspendisse non enim urna, eget lobortis lectus. Ut elementum faucibus convallis. </p>
   </div>
   </div>
   </div>
  </div>
  <div id='footer'>
   <div id='left_footer'>
   <p>This is a left footer</p>
   </div>
   <div id='right_footer'>
   <p>This is a right footer</p>
   </div>
  </div>
 </body>
 </html>[/code]

CSS:

[CODE]html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
 del, dfn, em, font, img, ins, kbd, q, s, samp,
 small, strike, strong, sub, sup, tt, var,
 b, u, i, center,
 dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend,
 table, caption, tbody, tfoot, thead, tr, th, td {
 margin: 0;
 padding: 0;
 border: 0;
 vertical-align: baseline;
 background: transparent;
 }
 
 html, body{
 height: 100%;
 background: #0073b5;
 }
 
 #not_footer{
 position:relative;
 min-height: 100%;
 }
 
 /*CSS for the Header*/
 #header{
 height: 278px;
 margin: 0 auto;
 background: #0073b5;
 width: 100%;
 }
 
 #top{
 height: 141px;
 
 }
 
 #middle_slider{
 height: 137px;
 }
 
 /*CSS for the Main*/
 #main{
 overflow: auto;
 padding-bottom: 358px;
 float: left;
 width: 100%;
 }
 
 #content{
 float:left;
 width:75.78%;
 background: #12489e;
 }
 
 #pages{
 width:92.4%;
 margin-left: 7.6%;
 }
 
 .page{
 float:left;
 margin-top:20px;
 }
 
 #recent_page{
 margin-top:0;
 }
 
 .post{
 float:left;
 width:90.65%;
 background: #ffffff;
 border-left:3px solid red;
 border-right:3px solid red;
 }
 
 .post p{
 margin-left:20px;
 margin-right:20px;
 }
 
 .date_area{
 margin-left:10px;
 float:left;
 }
 
 #sidebar{
 float:left;
 width:24.22%;
 background: #0073b5;
 }
 
 #inner_sidebar{
 width: 56.21%;
 }
 
 /*CSS for the Footer*/
 #footer{
 float:left;
 position: relative;
 margin-top: -358px;
 height: 358px;
 clear: both;
 background: #0073b5;
 width: 100%;
 }
 
 /*Opera Fix*/
 body:before {
 content:"";
 height:100%;
 float:left;
 width:0;
 margin-top:-32767px;
 }[/CODE]

@letmehaveagoJun 27.2010 — #Removing your !IE 7 conditional style will fix the problem.

Removing the width: 92.4% for #pages also fixes the problem.

It doesn't make sense why it is happening though.

@DragonkaiauthorJun 27.2010 — #I haven't tested it yet, but why would an ie7 conditional statement affect ie8...?

@letmehaveagoJun 27.2010 — #Notice I said !IE 7 see the bang mark! So it will affect ie8.

Again the root problem is a mystery to me it doesn't seem to be any miss usage of css.

I hope someone else can shed some light.

@letmehaveagoJun 27.2010 — #The trigger is:

1. too much text

2. increasing margin-left or width on #pages (this makes sense)

w3school suggests ie8 does not support display:table but doctype does:

- http://www.w3schools.com/css/pr_class_display.asp

- http://code.google.com/p/doctype/wiki/DisplayCSSProperty

I would suggest you don't use display:table in your code.

It even fails for something like this:

[CODE]
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 
 <head>
 <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
 <title>Australia National University Aiesec</title>
 <style type="text/css">
 #not_footer {
 display: table;
 }
 
  #pages {
   width:92.4&#37;;
   margin-left: 7.6%;
  }
 </style>
 </head>
 
 <body>
 <div id='not_footer'>
 <div id='pages'>
 Sed risus ipsum, rhoncus at adipiscing vel, hendrerit sit amet nibh. Cras fringilla porta velit quis
 hendrerit. Cras quis accumsan ligula. In non nunc lacus, bibendum rutrum tellus. Cras tristique quam id orci
 posuere ullamcorper. Nunc egestas justo eget felis vehicula convallis. Suspendisse potenti. Suspendisse pote
 nti. Proin quam augue, ultrices non gravida sit amet, mollis quis nisl. Duis aliquam, nulla at fermentum
 tincidunt, massa ipsum tincidunt enim, at pulvinar mi erat sed felis. Ut nunc nulla, gravida ut viverra eu,
 porttitor non augue. Quisque ut quam venenatis dolor scelerisque cursus. Vestibulum imperdiet dignissim ullamcorper.
 Sed risus ipsum, rhoncus at adipiscing vel, hendrerit sit amet nibh. Cras fringilla porta velit quis hendrerit.
 Cras quis accumsan ligula. In non nunc lacus, bibendum rutrum tellus. Cras tristique quam id orci
 posuere ullamcorper. Nunc egestas justo eget felis vehicula convallis. Suspendisse potenti. Suspendisse 
 potenti. Proin quam augue, ultrices non gravida sit amet, mollis quis nisl. Duis aliquam, nulla at ferme
 ntum tincidunt,
 massa ipsum tincidunt enim, at pulvinar mi erat sed felis. Ut nunc nulla, gravida ut viverra eu,
 porttitor non augue. Quisque ut quam venenatis dolor scelerisque cursus. Vestibulum imperdiet dignissim ullamcorper.
 Sed risus ipsum, rhoncus at adipiscing vel, hendrerit sit amet nibh. Cras fringilla porta velit quis hendrerit.
 Cras quis accumsan ligula. In non nunc lacus, bibendum rutrum tellus. Cras tristique quam id orci
 posuere ullamcorper. Nunc egestas justo eget felis vehicula convallis. Suspendisse potenti. 
 Suspendisse potenti. Proin quam augue, ultrices non gravida sit amet, mollis quis nisl. Duis aliquam, nulla
 at fermentum tincidunt,
 massa ipsum tincidunt enim, at pulvinar mi erat sed felis. Ut nunc nulla, gravida ut viverra eu, porttitor
 non augue. Quisque ut quam venenatis dolor scelerisque cursus. Vestibulum imperdiet dignissim ullamcorper.
 Sed risus ipsum, rhoncus at adipiscing vel, hendrerit sit amet nibh. Cras fringilla porta velit quis hendr
 erit. Cras quis accumsan ligula. In non nunc lacus, bibendum rutrum tellus. Cras tristique quam id orci
 posuere ullamcorper. Nunc egestas justo eget felis vehicula convallis. Suspendisse potenti. Suspendisse 
 potenti. Proin quam augue, ultrices non gravida sit amet, mollis quis nisl. Duis aliquam, nulla at ferm
 entum tincidunt, massa ipsum tincidunt enim, at pulvinar mi erat sed felis. Ut nunc nulla, gravida ut
 viverra eu, porttitor non augue. Quisque ut quam venenatis dolor scelerisque cursus. Vestibulum imper
 diet dignissim ullamcorper.
 hendrerit. Cras quis accumsan ligula. In non nunc lacus, bibendum rutrum tellus. Cras tristique quam
 , nulla at fermentum tincidunt, massa ipsum tincidunt enim, at pulvinar mi erat sed felis. Ut nunc
 hendrerit. Cras quis accumsan ligula. In non nunc lacus, bibendum rutrum tellus. Cras tristique quam
 , nulla at fermentum tincidunt, massa ipsum tincidunt enim, at pulvinar mi erat sed felis. Ut nunc
 hendrerit. Cras quis accumsan ligula. In non nunc lacus, bibendum rutrum tellus. Cras tristique quam
 hendrerit. Cras quis accumsan ligula. In non nunc lacus, bibendum rutrum tellus. Cras tristique quam
 , nulla at fermentum tincidunt, massa ipsum tincidunt enim, at pulvinar mi erat sed felis. Ut nunc
 , nulla at fermentum tincidunt, massa ipsum tincidunt enim, at pulvinar mi erat sed felis. Ut nunc
 </div>
 </div>
 </body>
 </html>
 [/CODE]

@DragonkaiauthorJun 27.2010 — #Thanks for all your work.

I removed display:table and ie8 is back to normal. The reason I had that in the first place is because when I trying to implement a sticky footer, a footer that would stick to the bottom of the page regardless of content. This tutorial told me to put the conditional statement into it.

http://www.cssstickyfooter.com/using-sticky-footer-code.html

I think its now not important considering that the footer will be pushed down due to the content.

In this case I'm going to remove the complete ie conditional statement as it is redundant.

However I still notice that ie8 shifts the entire website a few pixels to the left. This is barely noticeable so it's all good.

Also in #CSS _↴

CSS, SSI, Tables Issue with NS7.x & Mozilla Making pseudo elements work in IE Please help.. How to limit words in box appear on links...?

Success!

Help @Dragonkai spread the word by sharing this article on Twitter...

Tweet This

An IE8 horizontal stretching issue.

6 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

An IE8 horizontal stretching issue.

6 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #CSS _↴