Forums

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.

  <style>
/*
   CSS-Tricks Example
   by Chris Coyier
   http://css-tricks.com
*/

* { margin: 0; padding: 0; }
body { font: 14px Calibri; }

article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }

#page-wrap { width: 370px; margin: 60px auto; }

h1 { font: 32px Helvetica, Arial, Sans-Serif; margin: 0 0 20px 0; }
p { margin: 0 0 20px 0; }
a { text-decoration: none; }
</style>

<style>
    .slide-up-boxes a { 
      display: block; 
      height: 130px; 
                        width: 350px; 
      margin: 0 0 20px 0; 
      background: rgba(215, 215, 215, 0.5); 
      border: 1px solid #ccc; 
      height: 85px; 
      overflow: hidden; 
    }

    .slide-up-boxes h5 { 
      color: #333; 
      text-align: center;
      height: 85px;
      font: italic 18px/85px Calibri;    /* Vertically center text by making line height equal to height */
       opacity: 1;
       -webkit-transition: all 0.2s linear; 
       -moz-transition: all 0.2s linear; 
       -o-transition: all 0.2s linear;
    }

    .slide-up-boxes a:hover h5 { 
      margin-top: -85px; 
      opacity: 0; 
    }

    .slide-up-boxes div { 
      position: relative; 
      color: ; 
      font: 12px/15px Calibri;
      height: 65px; 
      padding: 10px; 
      opacity: 0; 
      -webkit-transform: rotate(6deg); 
      -webkit-transition: all 0.4s linear; 
      -moz-transform: rotate(6deg); 
      -moz-transition: all 0.4s linear; 
      -o-transform: rotate(6deg); 
      -o-transition: all 0.4s linear; 
    }
    .slide-up-boxes a:hover div { 
      opacity: 1; 
      -webkit-transform: rotate(0); 
      -moz-transform: rotate(0); 
      -o-transform: rotate(0); 
    }
    .slide-up-boxes a:nth-child(1) div { background: #c73b1b url(http://imagehost.vendio.com/a/35153648/view/59ldodgecummins.jpg) no-repeat; padding-left: 120px; }
    .slide-up-boxes a:nth-child(2) div { background: #367db2 url(http://imagehost.vendio.com/a/35153648/view/67ldodgecummins.jpg) no-repeat; padding-left: 90px; }
    .slide-up-boxes a:nth-child(3) div { background: #393838 url(http://imagehost.vendio.com/a/35153648/view/67ldodgecumminscc.jpg) no-repeat; padding-left: 133px; }


</style>

  <section class="slide-up-boxes">
  <center><table><tr><td>
        <a href="#">
          <h5>2006-2007 5.9L Cummins</h5>
          <div style="background: #c73b1b url(http://imagehost.vendio.com/a/35153648/view/59ldodgecummins.jpg) no-repeat; padding-left: 120px;"></div>        
        </a>
        </td><td>&nbsp;</td><td>  
        <a href="#">
          <h5>2007.5-2009 6.7L Cummins</h5>
          <div style="background: #367db2 url(http://imagehost.vendio.com/a/35153648/view/67ldodgecummins.jpg) no-repeat; padding-left: 90px;"></div>       
        </a>
                          </td><td>&nbsp;</td><td>
        <a href="#">
          <h5>2010-2012 6.7L Cummins</h5>
          <div style="background: #393838 url(http://imagehost.vendio.com/a/35153648/view/67ldodgecumminscc.jpg) no-repeat; padding-left: 133px;"></div>        
        </a>

  </td></tr>
  <tr><td style="margin-top:-5px;">
        <a href="#">
          <h5>2003-2007 6.0L Powerstroke</h5>
          <div style="background: #c73b1b url(http://imagehost.vendio.com/a/35153648/view/60lpowerstroke.jpg) no-repeat; padding-left: 120px;"></div>       
        </a>
        </td><td>&nbsp;</td><td>  
        <a href="#">
          <h5>2008-2010 6.4L Powerstroke</h5>
          <div style="background: #367db2 url(http://imagehost.vendio.com/a/35153648/view/60lpowerstroke.jpg) no-repeat; padding-left: 90px;"></div>        
        </a>
                          </td><td>&nbsp;</td><td>
        <a href="#">
          <h5>2011-2012 6.7L Powerstroke</h5>
          <div style="background: #393838 url(http://imagehost.vendio.com/a/35153648/view/60lpowerstroke.jpg) no-repeat; padding-left: 133px;"></div>       
        </a>

  </td></tr></table>
  <table>
  <tr><td>  
        <a href="#">
          <h5>2008-2010 6.6L Duramax LMM</h5>
          <div style="background: #367db2 url(http://imagehost.vendio.com/a/35153648/view/66lduramax.jpg) no-repeat; padding-left: 90px;"></div>        
        </a>
                          </td><td>&nbsp;</td><td>
        <a href="#">
          <h5>2011-2013 6.6L Duramax LML/LGH</h5>
          <div style="background: #393838 url(http://imagehost.vendio.com/a/35153648/view/66gmduramaxlgh.jpg) no-repeat; padding-left: 133px;"></div>       
        </a>

  </td></tr></table></center>
      </section>

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 [center] 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!

treehouse : what would you like to learn today?

Forums

[Solved] CSS3 Slide Up Boxes Broken In IE?