CODEWITHSUNDEEP
csshtmlinternet-explorergoogle-chrome
user2426889
user2426889

Reputation: 39

Positioning problems with internet explorer (basic CSS)

I'm attempting to create a website like this http://www.spookycraft.net/ and whenever I run my site in IE it looks terrible everything is pushed to the left and all of the images are separated, Tho in Chrome and firefox they look perfect (as in all centered and the transition is there) here's the fiddle http://jsfiddle.net/EuRJE/

Here's the testing site: http://www.wandernetwork.com/ and here's the code: also keep in mind i'm somewhat novice so if you have any pointers for me or additional tips they would be greatly appreciated. 

<head>
    <meta charset='UTF-8'>
    <title>Wandercraft Network</title>
    <style media="screen" type="text/css">
        #page-wrap {
            width:620px;
            margin:0px auto;
        }
        .slide-up-boxes a {
            display:block;
            width:300px;
            height:300px;
            background: #eee;
            overflow:hidden;
        }
        .slide-up-boxes h5 {
            height:300px;
            width:300px;
            text-align:center;
            line-height:150px;
            -webkit-transition: margin-top 0.3s linear;
            background-color:#white;
        }
        .slide-up-boxes a:hover h5 {
            margin-top:-300px;
        }
        .slide-up-boxes div {
            text-align:center;
            height:300px;
            width:300px;
            opacity:0;
            background-color:orange;
            -webkit-transform: rotate(6deg);
            -webkit-transition: all 0.2s linear;
        }
        .slide-up-boxes a:hover div {
            -webkit-transform: rotate(0);
            opacity:1;
        }
        .slide-up-boxes {
            margin:5px;
            width:300px;
            float:left;
        }
        .banner {
            margin:0px auto;
            display:block;
            padding:15px;
            width:1000px;
            height:300px;
        }
        /* Limit the width of the tray to 30px to make it stack vertically*/
        #enjin-tray {
            max-width: 30px;
            margin: 0;
            bottom: 175px;
        }
        #enjin-tray li#notificationpanel {
            border-radius: 3px;
        }
        #enjin-tray ul li.tray-item {
            border-style: solid;
            border-width: 1px;
        }
        #notificationpanel .notification-icon.apps {
            background-position: -84px 3px;
        }
        #notificationpanel .notification-icon.general {
            background-position: -54px 3px;
        }
        #notificationpanel .notification-icon.messages {
            background-position: -25px 3px;
        }
        #notificationpanel .notification-icon.dashboard {
            display: none;
        }
        #enjin-tray li#notificationpanel .subpanel {
            width: 380px;
            bottom: 0;
        }
        #enjin-tray #notificationpanel .subpanel.general {
            right: 40px;
        }
        #enjin-tray #notificationpanel .subpanel.messages {
            right: 40px;
        }
        #enjin-tray .subpanel {
            right: 40px;
        }
        #enjin-tray #notificationpanel .subpanel.apps .faux-icon {
            display: none;
        }
        #enjin-tray #notificationpanel .subpanel.general .faux-icon {
            display: none;
        }
        #enjin-tray #notificationpanel .subpanel.messages .faux-icon {
            display: none;
        }
        #messages-notification-tip {
            bottom: 231px !important;
            right: 35px !important;
        }
        #general-notification-tip {
            bottom: 205px !important;
            right: 35px !important;
        }
        #apps-notification-tip {
            bottom: 180px !important;
            right: 35px !important;
        }
        .triangle {
            display: none;
        }
        #enjin-tray-messaging {
            display: none;
        }
    </style>
</head>

<body>
    <img src="https://dl.dropboxusercontent.com/u/85261154/WN_Banner.png" border="0px" class="banner">
    <div id="page-wrap">
        <section class="slide-up-boxes"> <a href="www.reddit.com">
    <img src="https://dl.dropboxusercontent.com/u/85261154/PVP.png">
    <div> 
    <h5> <img src="http://www.backbonetechnology.com/media/blog-html5-logo.png"> </h5>
     </div>
    </a>

        </section>
        <section class="slide-up-boxes"> <a href="www.reddit.com">
    <img src="https://dl.dropboxusercontent.com/u/85261154/Kingdoms.png">
    <div> 
    <h5> <img src="http://www.backbonetechnology.com/media/blog-html5-logo.png"> </h5>
     </div>
    </a>

        </section>
        <section class="slide-up-boxes"> <a href="www.reddit.com">
    <img src="https://dl.dropboxusercontent.com/u/85261154/Survival.png">
    <div> 
    <h5> <img src="http://www.backbonetechnology.com/media/blog-html5-logo.png"> </h5>
     </div>
    </a>

        </section>
        <section class="slide-up-boxes"> <a href="www.reddit.com">
        <img src="https://dl.dropboxusercontent.com/u/85261154/Factions.png">
        <div> 
        <h5> <img src="http://www.backbonetechnology.com/media/blog-html5-logo.png"> </h5>
         </div>
        </a>

        </section>
        <div style="clear:both;"></div>
    </div>
</body>

Any help would be appreciated if I find the answer I'll be sure to update this post, Thank you for reading.

Upvotes: 1

Views: 183

Answers (1)

Pascamel
Pascamel

Reputation: 953

What version of IE are you using? Your page looks fine on IE10. I can't help you if you are running an older version, but have a look at this : Imitate CSS3 transition in IE?

-webkit-transition won't work on IE.

Upvotes: 1

Related Questions