Home/ Questions/Q 7933691
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T21:24:28+00:00

I’m still learning HTML5 so I understand I need the shim in there, so

  • 0

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:info@ambergoodwin.com" 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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0