0

I set up a splash page on my Wordpress site which seems to be displaying correctly in Chrome, Firefox and Safari although it's completely wrong in Internet Explorer. There is a white border around the large image and the clickable logo and social media boxes have been pushed beneath the large image and have blue borders around them.

http://www.emma-saunders.net/

I used the following code to set it up:

<img id="bg-im" src="http://www.emma-saunders.net/wp-content/uploads/2013/06/splash-1.png">

            <nav id="nav-social">

                <ul>

                    <li><a href="https://www.facebook.com/esaundersphotography" target="_blank"><img src="http://www.emma-saunders.net/wp-content/uploads/2013/06/facebook.png" alt="Follow Emma Saunders on Facebook" width="55" height="55"></a></li>
                    <li><a href="https://twitter.com/ESaundersphoto" target="_blank"><img src="http://www.emma-saunders.net/wp-content/uploads/2013/06/twitter.png" alt="Follow Emma Saunders on Twitter" width="55" height="55"></a></li>
                    <li><a href="mailto:info@emma-saunders.net"><img src="http://www.emma-saunders.net/wp-content/uploads/2013/06/email.png" alt="Email us" width="55" height="55"></a></li>

                </ul>

            </nav>

<a href="http://www.emma-saunders.net/latest-works/"><img id="logo" src="http://www.emma-saunders.net/wp-content/uploads/2013/06/emma-saunders-logo.png"></a>

<style type="text/css">
#bg-im {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;

  /* Set up proportionate scaling */
  width: 100%;
  height: auto;

  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;

  z-index: -1;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
#bg-im {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}

ul {
    list-style: none;
}

#nav-social {
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 100;
}

#nav-social li {
    float: left;
    border-right: 1px solid #000000;
    background-color: #333333;
    -webkit-transition: background-color .4;
}

#nav-social li a {
    display: block;
    overflow: hidden;
    width: 55px;
    height: 55px;
}

#nav-social li:hover {
    background-color: #1aff94;
}

#logo {
    display: block;
    width: 900px;
    height: 506px;
    margin: auto;
}

</style>

1 Answers1

0

First IMG element has no "/" so it's not closed.

The borders problem can by fixed like in this solution:

How can I remove the outline around hyperlinks images?

The most dificult part is the support on IE 7 and 8 because these old browsers can't handle this kind of elements and therefore can't comply the css layout rules. The best solution posible is to enable them to use HTML 5 as they suggest in this post:

html5 new elements (header, nav, footer, ..) not working in IE

Add the following rule to fix the white margins on those browsers:

BODY {
    margin: 0px;
}

Apply the element the same rules as for the so it gets positioned.

Hope this helps.

Community
  • 1
  • 1
Edorka
  • 1,781
  • 12
  • 24
  • I am still having the same problems in IE even after I add the "/" –  Jun 13 '13 at 10:25
  • I have noticed that you have a layout problem on IE 8 and 7. I'm trying another way to fit the controls – Edorka Jun 13 '13 at 10:36
  • I still seem to having the seem problem after including the HTML5 shiv script –  Jun 13 '13 at 11:41
  • yes, seems a problem positioning the center image and the "white borders" issue. – Edorka Jun 13 '13 at 11:52