IE8/IE9 differences in showing <div>

[MK-2]

Right, this is a bit weird (for me anyway). I have a div layout which (from a previous thread) lays out with the boxes side by side (example below). On my machine with IE9 it shows fine, on a machine with the same res running IE8 it shows the boxes stacked up above each other (ignoring the inline-block/text-align and floats).

Is there any way to fix this as I've built this page and tested it with IE9 and it now looks stupid on IE8!

 

CSS

.staff-container {
width: 90%;
margin-left:auto;
margin-right:auto;
text-align:center;
}

.staff-box {
width:23%;
text-align:center;
display: inline-block;
margin-left:5px;
margin-right:5px;
background: [url=http://www.edugeek.net/misc.php?do=dbtech_usertag_hash&hash=e2ebe8]#e2ebe8[/url]
padding-top: 5px;
padding-bottom: 10px;
border:#000 1px solid;
}

 

HTML

Online Booking
Online Helpdesk

 

As I said, the above code in IE9 is fine, it lays out just how I want. But when viewed in IE8 it goes pear shaped!

Edited July 13, 2011 by MK-2

[comedydave]

Try using "float:left;" instead of "display:inline-block;"

 

Also, prempting the next issue - place

after your 2 boxes in your markup. And creat a class with the same name and the property "clear:both;" in your CSS

[paul_1989]

They both layout fine for me. IE8 left, IE9 right.

 

[MK-2]

They both layout fine for me. IE8 left, IE9 right.

 

 

not sure what else it can be then. IE8-XP and IE9-Win7 but both on 1024x768 res and 32bit colour!

[paul_1989]

If I change to IE8 running in IE7 compatibility mode it puts them on top of each other, but IE8 itself seems to work fine. Have you tried what @comedydave sugessted?

[MK-2]

Have you tried what @comedydave sugessted?

 

the problem is, if i do float left, it then stacks them up side by side by from the left of the screen, whereas i need them to be central. i had another thread (replacing table with div in this forum) that someone suggested inline-block instead and that worked, so i dont want to be redesigning it again

[paul_1989]

That's because you have a 90% container and they're set to 'margin-left:5px' so they will float 5px from the left. If you try creating another smaller centred container inside the main one, then you may have better luck.

 

CSS:

.staff-container {
width: 90%;
margin-left:auto;
margin-right:auto;
text-align:center;
}

.box-container{
width:50%;
margin-left:auto;
margin-right:auto;
}

.staff-box {
width:45%;
text-align:center;
float:left;
margin-left:2%;
margin-right:2%;
background: url('http://www.edugeek.net/misc.php?do=dbtech_usertag_hash&hash=e2ebe8');
padding-top: 5px;
padding-bottom: 10px;
border:#000 1px solid;
cursor:pointer;
cursor:hand;
}

.staff-box:hover {
background:	[url=http://www.edugeek.net/misc.php?do=dbtech_usertag_hash&hash=6f9387]#6f9387[/url]
}

 

HTML:

Online Bookingimages/bookingsystem.png
Online Helpdeskimages/helpdesk.png

[MK-2]

This is what I get, all tested at the same res of 1024x768

 

in Firefox

 

in IE8

 

in IE9

[MK-2]

That's because you have a 90% container and they're set to 'margin-left:5px' so they will float 5px from the left. If you try creating another smaller centred container inside the main one, then you may have better luck.

 

 

I don't think kissing is allowed on this forum, so I'll just say thank you instead

I really need to get my head around css. I'm using it and picking it up as I go (much the same with php), but I get these errors where something works or doesn't and I don't know why.

[comedydave]

CSS is easy, you just have to dive right in.

I learned the basics for my job interview for this job on w3 schools. Then when I got the job I spent the first 3 months pulling my hair out. Now 12 months in, it is like a second language to me.

Need any help in the future PM me

 

A little tip. Build in Firefox (the most standards compliant browser out there), validate your code through The W3C Markup Validation Service then test it in Chrome, Safari, Opera and finally IE. As IE upto version 8 doesn't support w3c standards, because MS thought they were superior. So then fix for IE with a separate stylesheet.

So the general rule is - Build to Standards, fix for IE.