CSS3 Slide Up Boxes Broken In IE?

[jrdnTRENDS]

Good morning,

I am attempting to use the CSS3 Slide Up Boxes and everything had been going well up until the part where I tested to see if they were working properly in IE…which is not the case. They display correctly when viewing the demo but for some reason when it comes down to me using them, it does not work & only displays the text.

2006-2007 5.9L Cummins		2007.5-2009 6.7L Cummins		2010-2012 6.7L Cummins
2003-2007 6.0L Powerstroke		2008-2010 6.4L Powerstroke		2011-2012 6.7L Powerstroke

2008-2010 6.6L Duramax LMM

2011-2013 6.6L Duramax LML/LGH

Hopefully someone can help! Thank you

[Paulie_D]

Please put this in a Codepen or give us a live link.

Oh…and which version of IE?

BTW…you really should move all that inline styling to a CSS stylesheet.

Oh…and I am **absolutely** certain that Chris Coyier did not use tables in his layout….seriously WTF!?

EDIT…and the

element…does not exist any more.

[jrdnTRENDS]

Sorry, not really sure what I’m doing..

http://codepen.io/anon/pen/sywcL

I am using IE9.

How else can I make them display the way I want them to without using tables? Probably a noob question..

EDIT: Also, for some reason it displays all fine in Codepen but not outside of that website?

[Paulie_D]

Did you not copy Chris Coyier’s code?

I’ve stripped out all of the table stuff because it’s a terribly old fashioned way of laying out pages/elements.

I’ve incorporated the #page-wrap div but I’m not sure what this is for. As a result, all of the boxes are vertically stacked.

http://codepen.io/Paulie-D/pen/EHtoq

If you want them in another configuration we can look at that.

[jrdnTRENDS]

I actually downloaded the ZIP file and copied the code from there.

I’m looking to have them on top of each other in a 3 – 3 – 2 format.

Any idea why it displays like this on that website as well as the other I’m using to preview?

http://oi46.tinypic.com/iyegpt.jpg

[Paulie_D]

Not sure but my guess is that it’s not picking up some of the CSS.

Here, I’ve implemented floats and margins to get the layout you wanted.

http://codepen.io/Paulie-D/pen/ByGlL

[jrdnTRENDS]

Looks good, thanks!

Now the only issue for me is to figure out how to have it work outside of CodePen =/

[jrdnTRENDS]

Not sure why it was marked as solved when I still have a problem?

[Paulie_D]

Because you have a solution that will work in IE, you just have to put it into your page.

If you have trouble implementing it we can help you over any specific issues in a new thread.

Of course, a live link is very helpful.

[jrdnTRENDS]

https://dl-web.dropbox.com/s/6hem0e8q2b00qxs/template.html

Are you able to view that?

A solution for my original problem has not been found.

[Paulie_D]

Ahhh, you don’t have a doctype set, html or body tags.

IE will require those.

[jrdnTRENDS]

Hmm…I’ve added those and it didn’t seem to do anything besides resize the text that it displays.

[Paulie_D]

Is there a new link….because I can’t see them in the old one?

[jrdnTRENDS]

I believe I have fixed it..if something else comes up I will be sure to open a new thread.

Thank you for all of your help, Paulie_D!

[Author]

Posts