CODEWITHSUNDEEP
htmlcssimagetwitter-bootstrap
Turtle
Turtle

Reputation: 1389

Faulty Image Positioning in IE

My cat image on my website is very far below all the other images when viewed on Internet Explorer (v11). It looks perfect when viewed in Chrome. For the development of this website, I used predefined bootstrap css classes, and a few of my own. Unfortunately, I have no idea why this image is so far below the rest in IE.

Here is my own css style sheet:

html,
body {
    width: 100%;
    height: 100%;

}

body {
    font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif;

}

.text-vertical-center {
    display: table-cell;
    text-align: center;

}

.text-vertical-center h1 {
    margin: 0;
    padding: 0;
    font-size: 3.3em;
    font-weight: 500;
    vertical-align: middle;
    padding-top: 2%;
}

/* Custom Button Styles */

.btn-dark {
    border-radius: 0;
    color: #fff;
    background-color: rgba(0,0,0,0.4);
}

.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active {
    color: #fff;
    background-color: rgba(0,0,0,0.7);
}

.btn-light {
    border-radius: 0;
    color: #333;
    background-color: rgb(255,255,255);
}

.btn-light:hover,
.btn-light:focus,
.btn-light:active {
    color: #333;
    background-color: rgba(255,255,255,0.8);
}

/* Custom Horizontal Rule */

hr.small {
    max-width: 100px;
}

/* Side Menu */

#sidebar-wrapper {
    z-index: 1000;
    position: fixed;
    right: 0;
    width: 250px;
    height: 100%;
    margin-right: -250px;
    overflow-y: auto;
    background: #222;
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
}

.sidebar-nav {
    position: absolute;
    top: 0;
    width: 250px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar-nav li {
    text-indent: 20px;
    line-height: 40px;
}

.sidebar-nav li a {
    display: block;
    text-decoration: none;
    color: #999;
}

.sidebar-nav li a:hover {
    text-decoration: none;
    color: #fff;
    background: rgba(255,255,255,0.2);
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
    text-decoration: none;
}

.sidebar-nav > .sidebar-brand {
    height: 55px;
    font-size: 18px;
    line-height: 55px;
}

.sidebar-nav > .sidebar-brand a {
    color: #999;
}

.sidebar-nav > .sidebar-brand a:hover {
    color: #fff;
    background: none;
}

#menu-toggle {
    z-index: 1;
    position: fixed;
    top: 0;
    right: 0;
}

#sidebar-wrapper.active {
    right: 250px;
    width: 250px;
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
}

.toggle {
    margin: 5px 5px 0 0;
}

/* Header */

.header {
    display: table;
    position: relative;
    width: 100%;
    height: 100%;
    background: url(http://www.jpdirollphotography.com/Galleries/Pittsburgh/Skyline/i-t2BmHTp/1/XL/Black%20and%20Gold%20Fog%20Pittsburgh%20Clemente%20Bridge-XL.jpg) no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    color: #404040   ;


}

/* About */
.bg-primary{
    background-color: #FF9900;
}
.callout{
 vertical-align: middle;

}
.about {
    padding: 50px 0;
}

.fa-linkedin{
    color: #404040  ;
}
.fa-github{
    color: #404040  ;
}
.fa-facebook{
    color: #404040  ;
}
/* Services */
.fa-gear{
    color: #404040 ;
}
.fa-compass{
    color: #404040 ;
}
.fa-flask{
 color: #404040 ;
}
.fa-key{
 color: #404040 ;
}
.fa-cloud{
 color: #404040 ;
}
.fa-shield{
    color: #404040 ;
}
.services {
    padding: 50px 0;
}

.service-item {
    margin-bottom: 30px;
}

/* Callout */

.callout {
    display: table;
    width: 100%;
    height: 400px;
    vertical-align: middle;
    background: url(http://img03.deviantart.net/d652/i/2013/002/5/3/turtle_by_sweetlittlesmiles-d5q7bm5.png) no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    color: white;
    background-color: #404040;
    padding-top: 7%;
}

/* Portfolio */

.portfolio {
    padding: 50px 0;
}

.portfolio-item {
    margin-bottom: 30px;
}

.img-portfolio {
    margin: 0 auto;
}

.img-portfolio:hover {
    opacity: 0.8;

}

/* Call to Action */

.call-to-action {
    padding: 50px 0;
}

.call-to-action .btn {
    margin: 10px;
}

/* Map */

/* Footer */

footer {
    padding: 100px 0;
}



Here is my html:

<!DOCTYPE html>
<html lang="en">

  <head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <!--- Why are you looking down here? -->
    <title>
      Christopher Diehl Portfolio
    </title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/stylish-portfolio.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

    <!-- FAvicon code -->
    <link rel="icon" 
    type="favicon/png" 
    href="http://example.com/myicon.png">

  </head>

  <body>

    <!-- Navigation -->
    <a id="menu-toggle" href="#" class="btn btn-dark btn-lg toggle">
      <i class="fa fa-bars">
      </i>
    </a>
    <nav id="sidebar-wrapper">
      <ul class="sidebar-nav">
        <a id="menu-close" href="#" class="btn btn-light btn-lg pull-right toggle">
          <i class="fa fa-times">
          </i>
        </a>
        <li class="sidebar-brand">
          <a href="#top"  onclick = $("#menu-close").click(); >
            Home
          </a>
        </li>
        <li>
          <a href="#services" onclick = $("#menu-close").click(); >
            Languages
          </a>
        </li>
        <li>
          <a href="#interests" onclick = $("#menu-close").click(); >
            Interests
          </a>
        </li>
        <li>
          <a href="#about" onclick = $("#menu-close").click(); >
            About
          </a>
        </li>
        <li>
          <a href="#contact" onclick = $("#menu-close").click(); >
            Contact
          </a>
        </li>
      </ul>
    </nav>

    <!-- Header -->
    <header id="top" class="header">
      <div class="text-vertical-center">
        <h1>
          Christopher Diehl
        </h1>
        <h3>
          Software Developer &amp; Student
        </h3>
      </div>
    </header>

    <!-- About -->
    <section  class="about">
      <div class="container">
        <div class="row">
          <div class="col-lg-12 text-center">
            <h2>
              Bill Gates
            </h2>
            <p class="lead">
              Software is a great combination between artistry and engineering.
            </p>
          </div>
        </div>
        <!-- /.row -->
      </div>
      <!-- /.container -->
    </section>

    <!-- Services -->
    <!-- The circle icons use Font Awesome's stacked icon classes. For more information, visit http://fontawesome.io/examples/ -->
    <section id="services" class="services bg-primary">
      <div class="container">
        <div class="row text-center">
          <div class="col-lg-10 col-lg-offset-1">
            <h2>
              Favorite Languages
            </h2>
            <hr class="small">
            <div class="row">
              <div class="col-md-3 col-sm-6">
                <div class="service-item">
                  <span class="fa-stack fa-4x">
                    <i class="fa fa-circle fa-stack-2x">
                    </i>
                    <i class="fa fa-key fa-stack-1x text-primary">
                    </i>
                  </span>
                  <h4>
                    <strong>
                      Java
                    </strong>
                  </h4>
                  <p>
                    Experience using Java for:
                    <br>
                    Encryption, Servlet Creation, Data Manipulation, Database Management.
                  </p>
                  <a href="#" class="btn btn-light">
                    Learn More
                  </a>
                </div>
              </div>
              <div class="col-md-3 col-sm-6">
                <div class="service-item">
                  <span class="fa-stack fa-4x">
                    <i class="fa fa-circle fa-stack-2x">
                    </i>
                    <i class="fa fa-cloud fa-stack-1x text-primary">
                    </i>
                  </span>
                  <h4>
                    <strong>
                      HTML
                    </strong>
                  </h4>
                  <p>
                    Knowledge of Website Development..
                  </p>
                  <a href="#" class="btn btn-light">
                    Learn More
                  </a>
                </div>
              </div>
              <div class="col-md-3 col-sm-6">
                <div class="service-item">
                  <span class="fa-stack fa-4x">
                    <i class="fa fa-circle fa-stack-2x">
                    </i>
                    <i class="fa fa-gear fa-stack-1x text-primary">
                    </i>
                  </span>
                  <h4>
                    <strong>
                      Assembly
                    </strong>
                  </h4>
                  <p>
                    Programmed Simon Says game, calculator, and more in Mips 
                    <br>
                    Mips CPU design in Logisim
                  </p>
                  <a href="#" class="btn btn-light">
                    Learn more
                  </a>
                </div>
              </div>
              <div class="col-md-3 col-sm-6">
                <div class="service-item">
                  <span class="fa-stack fa-4x">
                    <i class="fa fa-circle fa-stack-2x">
                    </i>
                    <i class="fa fa-shield fa-stack-1x text-primary">
                    </i>
                  </span>
                  <h4>
                    <strong>
                      Willigness To Learn
                    </strong>
                  </h4>
                  <p>
                    Always excited to learn and am currently delving into C and Python
                  </p>
                  <a href="#" class="btn btn-light">
                    Learn More
                  </a>
                </div>
              </div>
            </div>
            <!-- /.row (nested) -->
          </div>
          <!-- /.col-lg-10 -->
        </div>
        <!-- /.row -->
      </div>
      <!-- /.container -->
    </section>

    <!-- Callout -->
    <aside class="callout">
      <div class="text-vertical-center" >

        <h1 class= "orange-text" >
          Studying Comp Sci at Rutgers
          <br>
          Employer: Dulles Technology Partners &copy
        </h1>
      </div>
    </aside>

    <!-- Portfolio -->
    <section id="portfolio" class="portfolio">
      <div class="container">
        <div class="row">
          <div class="col-lg-10 col-lg-offset-1 text-center">
            <h2 id="interests" >
              Interests
            </h2>
            <hr class="small">
            <div class="row">
              <div class="col-md-6">
                <div class="portfolio-item" style ="vertical-align: middle">
                  <img class="img-portfolio img-responsive img-rounded" id="car-picture" src="http://orig12.deviantart.net/e419/f/2009/101/9/6/honda_s2000_wallpaper_by_speedx07.jpg" >
                </div>
              </div>
              <div class="col-md-6">
                <div class="portfolio-item">
                  <img class="img-portfolio img-responsive img-rounded picture" src="http://www.blogcdn.com/massively.joystiq.com/media/2012/02/blizz-1330538518.jpg">
                </div>
              </div>
              <div class="col-md-6">
                <div class="portfolio-item">

                  <img class="img-portfolio img-responsive img-rounded picture" src="https://sitespex.com/wp-content/uploads/2015/05/ubuntu.jpeg">

                </div>
              </div>
              <div class="col-md-6">
                <div class="portfolio-item">
                  <img class="img-portfolio img-responsive img-rounded picture" src="http://people.ucsc.edu/~jlolonis/snow_cat.jpg">
                </div>
              </div>
            </div>
            <!-- /.row (nested) -->

          </div>
          <!-- /.col-lg-10 -->
        </div>
        <!-- /.row -->
      </div>
      <!-- /.container -->
    </section>

    <!-- Call to Action -->
    <aside class="call-to-action bg-primary">
      <div class="container">
        <div class="row">
          <div class="col-lg-12 text-center">
            <h1>
              About
            </h1>
            <h4 id ="about">
              Christopher is currently studying Computer Science at Rutgers- New Brunswick with the intent of fulfilling a concentration in Computer Security. 
              <br>
              He is currently employed by Dulles Technology Corporation as a Software Developer in New Jersey. 
              <br>
              For more information on his skills and samples of his work follow the links below. 
            </h4>
          </div>
        </div>
      </div>
    </aside>



    <!-- Footer -->
    <footer>
      <div class="container">
        <div class="row">
          <div class="col-lg-10 col-lg-offset-1 text-center">
            <h4>
              <strong>
                Christopher Diehl
              </strong>
            </h4>
            <p id = "contact">
              Flemington
              <br>
              New Jersey
            </p>
            <ul class="list-unstyled">
              <li>
                <i class="fa fa-phone fa-fw">
                </i>
                (570) 421-2638
              </li>
              <li>
                <i class="fa fa-envelope-o fa-fw">
                </i>

                <a href="[email protected]">
                  [email protected]
                </a>
              </li>
            </ul>
            <br>
            <ul class="list-inline">
              <li>
                <a href="https://www.linkedin.com/profile/view?id=338507614&trk=nav_responsive_tab_profile">
                  <i class="fa fa-linkedin fa-fw fa-3x">
                  </i>
                </a>
              </li>
              <li>
                <a href="https://github.com/ChristopherDiehl">
                  <i class="fa fa-github fa-fw fa-3x">
                  </i>
                </a>
              </li>
              <li>
                <a href="https://www.facebook.com/chris.diehl.35">
                  <i class="fa fa-facebook fa-fw fa-3x">
                  </i>
                </a>
              </li>
            </ul>
            <hr class="small">
            <p class="text-muted">
              Copyright &copy; Christopher S. Diehl 2015
            </p>
          </div>
        </div>
      </div>
    </footer>

    <!-- jQuery -->
    <script src="js/jquery.js">
    </script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js">
    </script>

    <!-- Custom Theme JavaScript -->
    <script>
      // Closes the sidebar menu
      $("#menu-close").click(function(e) {
        e.preventDefault();
        $("#sidebar-wrapper").toggleClass("active");
      }
                            );

    // Opens the sidebar menu
    $("#menu-toggle").click(function(e) {
      e.preventDefault();
      $("#sidebar-wrapper").toggleClass("active");
      }
                             );

    // Scrolls to the selected menu item on the page
    $(function() {
      $('a[href*=#]:not([href=#])').click(function() {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {

          var target = $(this.hash);
          target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
          if (target.length) {
            $('html,body').animate({
              scrollTop: target.offset().top
            }
                                   , 1000);
            return false;
          }
        }
      }
                                         );
    }
       );
    </script>
    <!-- Makes Interest pictures same hight-->
    <script>
      $(window).load(function() {
        var pictureHeight = $("#car-picture").height();
        $(".picture").css('height', pictureHeight+ "px");
        //$("#menu-bar").css("padding-top", BannerpadSpace);
      }
                    )
        $(window).resize(function(){
          pictureHeight = $("#car-picture").height();
          $(".picture").css('height', pictureHeight+ "px");
        }
                        )
    </script>
  </body>

</html>

Thank You

Upvotes: 0

Views: 154

Answers (1)

Jona
Jona

Reputation: 2147

You include images that are way much larger then the size you display them in. The browser has to scale them down, IE seems to have some problems with rounding the height of the image. When you look into the IE dev tools you can see that the first image is actually 343.11px in height. So the third image "edges" against those 0.11px and goes into the next column, which leads to the cat image be in the third row.

Prepare all the images in the same size you intent to show them.

Also check the W3C validator. You have a few errors in your markup.

Upvotes: 1

Related Questions