Question

I’m working on designing a v3 platform for a website. We’re almost done, and now were just doing the finishing touches with cross-browser texting. Everything works fine, except for IE.

I’m testing in IE 9, and when the page loads, there is supposed to be a slider at the top of the page. The slider is set up as one long block of images/desrciption text, which jQuery slides on and off the page.

The slider divs work fine, but the content of the divs is oddly block displayed on the side. So basically the content of my divs are not showing up inside my divs.

So is there any dort of bug/quirk with IE that causes this.

Example code:

<div id="cont">
  <div
    <img src="bar" />
    <a href="foo"></a>
  </div>
  <div>
    <img src="bar" />
    <a href="foo"></a>
  </div>
</div>

CSS:

.cont {
position: relative;
display: block;
overflow: hidden;
}

.cont div{
display: block;
position: absolute;
left: 0px;
top: 0px;
width: 980px;
opacity: 1;
z-index: 5;
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}

Answer 1

So it turns out that this, among many of the problems I recently asked about, were simply caused by Internet Explorer’s inability to compute more than 31 stylesheets.

So if you have more than 31 stylesheets, beware.