centered div doesnt work in IE8

StackOverflow https://stackoverflow.com/questions/22088797

Question

I made tumblr theme and it works perfectly in chrome, but when I turn IE my align (when hovering over images and after opening images (permalink page)) is messed up. IE [enter link description here][1]move eberything too the right. I tried almost everything, but it still not working ...

here is tumblr page:

http://nolnspiration.tumblr.com/

and here is code:

    <!DOCTYPE html>

<head>

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<title>{Title}</title>

<meta name="description" content="{block:IndexPage}{block:Description}{MetaDescription}{/block:Description}{/block:IndexPage}{block:PermalinkPage}{block:PostSummary}{PostSummary}{/block:PostSummary}{/block:PermalinkPage}" />

<link rel="shortcut icon" href="{Favicon}" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}" />

<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>

<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />


<!-- Icon Awesome -->
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

<!-- jQuery --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

<script src="http://masonry.desandro.com/masonry.pkgd.min.js" type="text/javascript"></script>

<script src="https://raw.github.com/desandro/imagesloaded/master/jquery.imagesloaded.min.js" type="text/javascript"></script>
<script src="http://masonry.desandro.com/js/jquery.infinitescroll.min.js" type="text/javascript"></script>


<!--MENU SLIDE -->
<script type="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>

<style type="text/css">
/*RESET*/    
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}


body {
    background-color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10pt; 
    vertical-align: baseline;
    color: #3e4347;
    }
a:link {color:#349bc8;}      /* unvisited link */
a:visited {color:#349bc8;}  /* visited link */
a:hover {color:#349bc8;}  /* mouse over link */
a:active {color:#349bc8;}  /* selected link */ 

a {
    text-decoration: none;
    outline: none;
}

a img {
    border: none;
}

#entirety {
    margin: 0 auto;
    width: 100%; }
#menu{
    position:relative;
    width:100% !important;
    height: 340px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-transition:  height 0.4s ease-in-out;
    -moz-transition:  height 0.4s ease-in-out;
    -ms-transition:  height 0.4s ease-in-out;
    -o-transition:  height 0.4s ease-in-out;
    transition:  height 0.4s ease-in-out;
    }
#headerBg{
    position: absolute;
    z-index: 1;
    width:100%;
    height: 300px;
    background-image:url("http://static.tumblr.com/2e5jfgm/ngMn1jpzk/bacground__1_.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

}
#whiteMask{
    width:40%;
    float: right;
    height:300px;
    background-color: white;

}
.menuStripe{
    position: absolute;
    z-index: 0;
    top: 90px;
    width: 100%;
    height: 250px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-transition:  top 0.4s ease-in-out;
    -moz-transition:  top 0.4s ease-in-out;
    -ms-transition:  top 0.4s ease-in-out;
    -o-transition:  top 0.4s ease-in-out;
    transition:  top 0.4s ease-in-out;
    background-color: #141d1d;
}
.menuContentContainer{
    height: 210px;
    width: 100%;
    display: block;
    position:relative;
}
.menuContentContainer ul{
    float: left;
    padding: 12px 10px 10px 50px;
    color: white;
    list-style-type:square;
}
.menuContentContainer ul li{
    padding: 8px 0px 0px 0px;
    list-style-type:square;
}
.menuContentContainer ul li a{
    font-family: SourceSansProRegular;
    font-size: 11pt;
    -webkit-font-smoothing: antialiased !important;
    list-style-type:square;
    color: white;
}
.menuContentContainer ul li a:hover {opacity: 0.8}  /* mouse over link */

.Description{
    font-family: SourceSansProLight;
    font-size: 11pt;
    line-height: 14pt;
    color: white;
    opacity: 0.7;
    width: 50%;
    float: right;
}

.menuButton{
    position:relative;
    float: left;
    cursor: pointer;
    cursor: hand;
}
.menuButton i{
    padding: 10px 10px 10px 10px;
    color: white;
    font-size: 14pt;
}

#container{
    vertical-align: center;
    position: relative;
    padding: 10px;
    }
.blogtitle, .blogtitle a {
    font-size: 20pt;
    color: #d7ceb2;
    text-shadow: 3px 3px 0px #2c2e38, 5px 5px 0px #5c5f72;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 10px; }

.post{
    float: left;
    display: block;
    margin: 10px;
    overflow: hidden;
    position: relative;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}


.pic{
    overflow: hidden;
    float: left;
    width: 300px;
    }


.photoset{
    float: left;
    width: 300px; }
.vid{
    float: left;
    padding: 0px;
    width: 400px; }
.text{
    float: left;
    width: 300px; }
.audio{
    float: left;
    width: 300px; }   
.post img {
    max-width: 300px;
    }
#caption{
    display: inline-block;
    position: relative;
    margin: 20px;
    }
#bottomnav{
    width: 100%;
    line-height:19px;
    margin: 10px 0px 20px 10px;
    display: table-cell;
    vertical-align: middle;
    }
#bottomnav a{
    color: white;
    text-decoration: none;
    }
#Arrow
{   
    float: left;
    font-size: 14px;
    font-weight:bold;
    vertical-align: middle;
    display: inline-block;
    opacity: 0.5;
    vertical-align: middle;
    background-color: #9e9e9e;
    width: 100px;
    height: 22px;
    padding:10px 10px 5px 10px;
    margin:0px 0px 20px 0px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;

}
#Arrow:hover
{
    opacity: 0.6;
}

#page_count{
    color: #3e4347;
    float: left;
    display:inline-block;
    vertical-align: middle;     
    line-height:19px;
    font-weight: bold;
    font-family: Arial;
    font-size: 14px;
    padding:10px 20px 5px 20px;
}


.caption-4 {
    overflow: hidden;
    background: rgba(0,0,0,0.2);
    -webkit-transition: background 0.3s ease-in-out;
    -moz-transition: background 0.3s ease-in-out;
    transition: background 0.3s ease-in-out;
}

.caption-4:hover {
    background: rgba(0,0,0,0);
}

.caption-4 img {
    -webkit-transition: -webkit-transform 0.3s ease-in-out;
    -moz-transition: -moz-transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
}

.caption-4:hover img {
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    transform: translateX(0%);
}

.PostCaption {
    overflow: hidden;
    width: 300px;
    height: 100%;
    z-index: 1;
    position: absolute;
    background: #000000;
    opacity: 0.9;
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-transition: -webkit-transform 0.3s ease-in-out;
    -moz-transition: -moz-transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
        -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}


.pic:hover .PostCaption{
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    transform: translateX(0%);
}
.tableAlign{
  height:100%;
  width:100%;
  display:table;  
}

.LikeReblogButton{
    webkit-transform: translateX(50%);
    -moz-transform: translateX(50%);
    transform: translateX(50%);
    vertical-align:middle;
    width: 300px;
    height:100%;
    display:table-cell;
}
.innerButtonsContainer{
    display: table;
    margin: 0 auto;
}
.singlebutton{
    float:left;
    margin: 10px 20px 10px 20px;
}
.FullSize{
    color: #cccccc;
    width:100;
    opacity: 0.5;
    margin: 0px 0px 20px 0px;
    text-align: center;
}
.FullSize a:link {color:#cccccc;}      /* unvisited link */
.FullSize a:visited {color:#cccccc;}  /* visited link */
.FullSize a:hover {color:#cccccc;}  /* mouse over link */
.FullSize a:active {color:#cccccc;}  /* selected link */

.ReblogCounts
{
    color: #cccccc;
    width:100%;
    text-align: center;
    font-family: Arial;
    font-size: 18pt;
}
@font-face
{
    font-family: CodeFont;
    src: url(http://static.tumblr.com/2e5jfgm/hUPn1lp5t/code_bold.otf);
}

@font-face
{
    font-family: SourceSansProRegular;
    src: url(http://static.tumblr.com/2e5jfgm/ww1n1nn1x/sourcesanspro-regular.otf);
}
@font-face
{
    font-family: SourceSansProLight;
    src: url(http://static.tumblr.com/2e5jfgm/oIAn1np9n/sourcesanspro-light.otf);
    -webkit-font-smoothing: always;
    font-weight: normal;
    font-style: normal;
}

.permaimage{
    width: 100%
    margin: 0 auto;
    float:center;
    text-align: center;
    webkit-transform: translateX(50%);
    -moz-transform: translateX(50%);
    transform: translateX(50%);
}
.permaimage img{
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.PermalinkinnerButtonsContainer{
    display: table;
    padding: 10px 0px 0px 0px;
    margin: 0 auto;
}
.PermalinkReblogCounts
{
    color: #cccccc;
    float:left;
    margin: 12px 20px 10px 20px;
    text-align: left;
    font-family: Arial;
    font-size: 12pt;
}



{CustomCSS}

</style>

</head>


<body>

<div id="entirety">
<div id="menu">
    <div id="headerBg">
        <div id="whiteMask"></div>
    </div>
    <div class="menuStripe">
        <div class="menuContentContainer">
            <ul>
                <li><a href="{BlogURL}">HOME</a></li>
                <li><a href="{BlogURL}tagged/technology">Technology</a></li>
                <li><a href="{BlogURL}tagged/menswear">Menswear</a></li>
                <li><a href="{BlogURL}tagged/archytecture">Archytecture</a></li>
                <li><a href="{BlogURL}tagged/interiour">Interiour design</a></li>
                <li><a href="{BlogURL}tagged/inspirative">Inspirative</a></li>
                <li><a href="{BlogURL}tagged/girls">Girls</a></li>
                <li><a href="{BlogURL}tagged/cars">Cars</a></li>

            </ul>
            <div class="Description">{description}</div>
        </div>
        <div class="menuButton">
            <i class="fa fa-align-justify fa-fw"></i>
        </div>
    </div>
</div><!--END menu -->

<div id="container">

{block:Posts}    



{block:Text}
<div class="post text">
{block:Title}<span class="title">{Title}</span>{/block:Title}
{Body}
</div><!--post-->
{/block:Text}

{block:Photo}
{block:IndexPage}
<div class="post pic">

    <div class="PostCaption">
        <div class="tableAlign">
        <div class="LikeReblogButton">
            <div class="innerButtonsContainer">
                <div class="FullSize">
                    <a href="{permalink}" id="single_image" >
                        <i class="fa fa-arrows-alt fa-5x"></i>
                    </a>
                </div>
                <div class="singlebutton">
                    {LikeButton size="40"}
                </div>
                <div class="singlebutton">
                    {ReblogButton size="40"}
                </div>
            </div>
            <div class="ReblogCounts">
                {NoteCount}
            </div>
        </div>
        </div>
    </div>
    <img src="{PhotoURL-400}" alt="Illustration of Viking">
{/block:IndexPage}
{block:PermalinkPage}
    <center>
    <div class="permaimage">
        <img src="{PhotoURL-400}" alt="Illustration of Viking">
    </div>
    <div class="LikeReblogButton">
        <div class="PermalinkinnerButtonsContainer">
            <div class="singlebutton">
                {LikeButton size="20"}
            </div>
            <div class="singlebutton">
                {ReblogButton size="20"}
            </div>
            <div class="PermalinkReblogCounts">
                 {NoteCountWithLabel}
            </div>
        </div>
    </div>
    </center>
{/block:PermalinkPage}
</div>
<!--post-->
{/block:Photo}

{block:Photoset}
<div class="post photoset">
<center>{Photoset-400}</center>
<div id="caption">
{block:Caption}{Caption}{/block:Caption}
</div><!--END caption-->
</div><!--post-->
{/block:Photoset}

{block:Quote}
<div class="post text">
<span class="quote">&ldquo;{Quote}&rdquo;</span>
{block:Source}{Source}{/block:Source}
</div><!--post-->
{/block:Quote}

{block:Link}
<div class="post text">
<a title="" href="{URL}" class="postlink" {Target}>{Name}</a>
{block:Description}{Description}{/block:Description}
</div><!--post-->
{/block:Link}

{block:Audio}
<div class="post audio">
{AudioPlayerGrey}
{block:Caption}{Caption}{/block:Caption}
</div><!--post-->
{/block:Audio}

{block:Chat}
<div class="post text">
{block:Title}<span class="title">{Title}</span>{/block:Title}
<ul class="chat">
    {block:Lines}
        <li>
            {block:Label}<span class="label">{Label}</span>{/block:Label}{Line}
        </li>
    {/block:Lines}            
</ul>
</div><!--post-->
{/block:Chat}

{block:Video}
<div class="post vid">
<center>{Video-400}</center>
<div id="caption">
{block:Caption}{Caption}{/block:Caption}
</div><!--END caption-->
</div><!--post-->
{/block:Video}

{block:Answer}
<div class="post text">
<b>{Asker} asked:</b> {Question}
<p>{Answer}
</div><!--post-->
{/block:Answer}   

{/block:Posts}


</div><!--END container-->

<br/>

{block:IndexPage}
<center>
<div id="bottomnav">
    {block:PreviousPage}  
        <a href="{PreviousPage}"><div id="Arrow"><i class="fa fa-arrow-left"></i>&nbsp;&nbsp;NEWER</div></a>
    {/block:PreviousPage}

    <div id="page_count">
        <font color="#9e9e9e">
        Page </font><font color="#3e3e3e">{CurrentPage}</font><font color="#9e9e9e"> of </font><font color        ="#3e3e3e">{TotalPages}</font>
    </div>


    {block:NextPage}
    <a href="{NextPage}"><div id="Arrow" >OLDER&nbsp;&nbsp;<i class="fa fa-arrow-right"></i></div></a>
    {/block:NextPage}


</div>

</center>
{/block:IndexPage}

</div><!--END entirety-->


<script type="text/javascript">

 var $container = $('#container');
 $container.masonry({
            itemSelector : '.post',
            columnWidth : 1,
            isAnimated: true
          });
          //menuStripe
 $(document).ready(function() {
     var toggle = false;
     console.log('start');
    $(".menuButton i").click(function() {
           if(toggle == false){
               console.log('toggle on');
               $(".menuStripe").css( "top", "300px" );
               $("#menu").css( "height", "540px" ); 
               toggle = true;
               return;
           }
           if(toggle == true){
               $(".menuStripe").css( "top", "90px" ); 
               $("#menu").css( "height", "340px" ); 
               toggle = false;
               console.log('toggle off');
               return;
           }
        });
    });


</script>

</body>
Was it helpful?

Solution

try IE9 -ms-transform:translateX(100deg); /* IE9 */

.LikeReblogButton{
    webkit-transform: translateX(50%);
    -moz-transform: translateX(50%);
    -ms-transform:translateX(100deg); /* IE9 */

    transform: translateX(50%);
    vertical-align:middle;
    width: 300px;
    height:100%;
    display:table-cell;
}

OTHER TIPS

This script jquery_backbone_lodash-modern.js doesn't work in ie8.

I'm getting that document.addEventListener isn't supported in browsers prior to ie9.

Usually the solution is: You have to use attachEvent in IE versions prior to IE9. Detect whether addEventListener is defined and use attachEvent if it isn't.

from addEventListener not working in IE8

EDIT:

whops seems that you are already ok. But this is what i got from ie:

big mess

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top