ie8 Layout Issues

HTML & CSS
1

Site is badly broken in ie8.

user: ogs
pw:4321

Can someone please explain to me the major things that ie does not render correctly. Is there a “main” culprit? I use a lot of floats, are they rendered differently in ie? Is it simple padding/margins that are different?

I do use some CSS3 properties but those are for gradients/rounded corners. Not so much for layout.

In the meantime doing some research, thanks guys!

2

Ok - I think it was mostly an HTML5 issues, this is my first HTML5 I’ve done, so I included this…

<!–[if lt IE 9]>
<script src=“http://html5shim.googlecode.com/svn/trunk/html5.js”></script>
<![endif]–>

A few things are still messed up though.

3

Yes you must include the shiv if you are using the new html5 elements as Ie8 and under don’t understand them. You would also need to set the elements to block but it is already handled in your reset sheet.

A few things are still messed up though.

You will need to be specific :slight_smile: Which things exactly?

4

Specifically, section id=“bottomContent” > section id=“col4” …there should be 4 'boxes all lined up in a row.

You can check in Chrome or Firefox to see what it should look like.

Thanks!

5

Hi,

You are using :last-child to target the last div at the bottom but ie8 doesn’t understand last-child so gets no styling. You will have to add a class to that div in the html for ie8 and then target it directly with css.

e.g.


#col4 div[B].lastone[/B] {
  background: none repeat scroll 0 0 transparent;
  border: medium none;
  float: right;
  margin: 0;
  width: 225px;
}

Don’t comma separate that rule with the :last-child rule block because browsers are required to drop the whole rule block (including all comma separated selectors) when they encounter something they don’t understand.

6

ah! Interesting, thanks Paul!