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 & 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>© 2012 AMBER GOODWIN | Creative & 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
I bet there is just one thing I'm missing that will fix this eh? Any advice and help is, as always appreciated. Thanks!
No comments:
Post a Comment