CODEWITHSUNDEEP
internet-explorer
kia4567
kia4567

Reputation: 603

Footer not 100% in IE

I'm still learning HTML5 so I understand I need the shim in there, so it's there and I've testing my site out on many difference platforms & browsers, both on windows and mac and seems the only thing that's preventing me from launching my site is the footer script in IE. I have the shim, so shouldn't the work?

It's not spanning 100% when I'm telling it to. It works beautifully in all browsers but IE. It's also not spanning across on mobile devices. Are both of these cause by the lack of one snippet of code?

HTML

<footer>
<ul class="footer-widgets">
<li class="widget3"><h6>Testimonials</h6>
<p>When I first came to Amber about creating a website for my business I wasn't sure what to expect. After working with her I've found that the whole experience is easy and a lot less expensive then I was previously quoted by another company. She described each step that was required for my projects and worked hard to bring my vision to life.</p>

<p>Amber Goodwin is a very creative &amp; passionate individual with an appetite for design, I would recommend her for any and all your business branding needs!</p>
<a href="http://www.nuggetcity.com">WWW.NUGGETCITY.COM</a>
</li>

<li class="widget4"><h6>Contact</h6>
<p class="footer-title">Are you looking for a new website?</br>Need to update your existing one?</br>Or just need some information?</p>
<img src="img/title-footer-call.jpg" border="0" usemap="#Map">
<map name="Map">
  <area shape="rect" coords="-1,0,114,39" href="mailto:[email protected]" target="_blank">
</map>

</ul>

<div id="footer-bottom">
<p>&copy; 2012 AMBER GOODWIN | Creative &amp; Fresh Designs</p>
</div>
</footer>

CSS

footer { width: 100%; height: 500px; background: url(img/BG-footer.jpg) repeat-x; background-color: #211e1b; clear: both; color: #b1b1b1; }

.footer-widgets { width: 905px; margin: 0 auto; padding: 0px; padding-top: 70px; }
.footer-widgets p { width: 94%; }
.footer-widgets a { text-decoration: underline; color: #f8d54b; }
.footer-widgets a:hover { text-decoration: none; color: #f8d54b; }
.footer-widgets li { height: auto; list-style-image: none; list-style-type: none; float: left; color: #b1b1b1;}
.footer-widgets li ul li {color: #fff; margin-left: -50px; margin-top: -15px;}
.footer-widgets li h2 { font-size: 1.4em; font-weight: normal; letter-spacing: 1px; line-height: 30px; text-align: left; }

.widget1 { width: 289px; }
.widget2 { width: 608px; }
.widget3 { width: 580px; }
.widget4 { width: 316px; }
.widget4 p { width: 100%; }


#footer-bottom { width: 100%; height: 50px; padding-bottom: 20px; background-color: #1a1715; border-top: 2px solid #272322; color: #fff; display: block; margin-top: 400px; }
#footer-bottom p { width: 600px; margin-left: 370px; height: 30px; font-size: 1em; line-height: 25px; color: #eee; margin-top: 20px; /*margin-top: 60px;*/ position: absolute;left: 50%; margin-left: -450px;}

HEAD SECTION

<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>Amber Goodwin | Graphic & Web Designer based in the Okanagan Valley </title>
  <meta name="description" content="">
  <meta name="author" content="Amber Goodwin">

  <meta name="viewport" content="width=device-width,initial-scale=1">


  <link rel="stylesheet" href="style.css">
  <link href="lightbox.css" rel="stylesheet">

  <!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

You can view the working site here.

This is what it looks like in IE enter image description here

I bet there is just one thing I'm missing that will fix this eh? Any advice and help is, as always appreciated. Thanks!

Upvotes: 0

Views: 510

Answers (2)

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324620

You are missing two </div> tags after the slides, the one to end the slides_container, an the one to end the slides. There are already two there, which should end the example and the slide-container.

Mismatched tags are the number one cause of layout problems. That's why I use Notepad++, because it highlights matching tags - using it I saw right away that some elements weren't being closed, because of the missing </div> tags.

Upvotes: 2

Programming Guy
Programming Guy

Reputation: 7451

Your footer is set to 100% width. I'd say it's probably doing that. The question is 100% of what.

It will only be as big as it's container. Take a look at the page with the ie debugger and see how big the parent element is. When you discover it's the same size as the footer the next question is why.

Upvotes: 0

Related Questions