Grow your CSS skills. Land your dream job.

CSS3 Slide Up Boxes Broken In IE?

  • # March 4, 2013 at 9:50 am

    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

    # March 4, 2013 at 9:55 am

    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.
    # March 4, 2013 at 10:12 am

    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?

    # March 4, 2013 at 10:25 am

    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.

    # March 4, 2013 at 10:33 am

    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

    # March 4, 2013 at 10:50 am

    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

    # March 4, 2013 at 11:16 am

    Looks good, thanks!

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

    # March 4, 2013 at 1:44 pm

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

    # March 4, 2013 at 1:57 pm

    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.

    # March 4, 2013 at 2:49 pm

    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.

    # March 4, 2013 at 3:21 pm

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

    IE will require those.

    # March 4, 2013 at 3:37 pm

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

    # March 4, 2013 at 3:45 pm

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

    # March 4, 2013 at 4:09 pm

    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!

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".