This is my first time in here, so hello to all! I am creating a site and things are moving along nicely except for in IE6. I would like to get this sorted as Im sure someone will enter the site with this browser and I dont want them to leave because of a few important errors. I can see that certain divs are pushing others down and creating a gap, also the padding is a problem in the footer. There are a couple of screenshots taken in IE6. Also here is a link to the page. http://www.hmwebsolutions.co.uk/home.html If anyone can point me in the right direction as to how to fix this I would appreciate it greatly. I realise that these topics have been covered greatly but while I have done my best to research this I have come up with zero. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>HM Web Solutions - bla</title> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.cycle.all.min.js"></script> <script type="text/javascript" src="js/scripts.js"></script> <!--[if lt IE 7]> <script type="text/javascript" src="js/unitpngfix.js"></script> <![endif]--> </head> <body id="home"> <div id="header"> <div id="centered_header"> <div id="logo"> </div> <ul id="navbar"> <li><a class="contact" href="contact.html">Contact</a></li> <li><a class="projects" href="projects.html">Projects</a></li> <li><a class="services" href="services.html">Services</a></li> <li><a class="home" href="home.html">home.html</a></li> </ul> </div> </div> <!-- end header --> <div id="slideshow_bg"> <div id="laptop"> <div id="slideshow"> <ul id="nav_slide"> <li id="prev"><a href="#">Previous</a></li> <li id="next"><a href="#">Next</a></li> </ul> <ul id="slides"> <li><img src="images/ss_image1.jpg" alt="Slide 1" /></li> <li><img src="images/ss_image2.jpg" alt="Slide 2" /></li> <li><img src="images/ss_image3.jpg" alt="Slide 3" /></li> </ul> </div> </div> </div> <!-- Main Text Area --> <div id="index_text_bg"> <div id="text_container"> <div id="available"></div> <div id="bio"></div> <div id="text_intro"> <h2>I’m a British <span class="h2">Web Designer</span> based <br /> in Madrid, Spain. I build <span class="h2">beautiful, <br /> practical</span> websites for small businesses.</h2> <h3>Designed by hand, coded by hand...in short, <span>Hand Made.</span></h3> <p class="index"><img class="icon" src="images/icon_text.png" alt="HM Web Solutions Index page" /> Hello and welcome to HM Web Solutions. My name is Nathan Powell and I am a freelance web designer. I offer user friendly, creative online solutions world-wide with a specific emphasis on start up and small businesses in Great Britain. I offer a full consultancy service and will appraise your situation and needs no strings attached. <br /> I work with clients from all walks of life, from independent writers to interior designers to golfing companies. I offer free quotations on all work, so if you’re thinking about joining the World Wide Web, maybe for the first time, have no fear. I will always try my very best to speak in layman’s terms and ensure that we’re on the same page. <br /> As web-design is a diversification of graphic-design if desired I can design your entire corporate stationary pack to accompany your new website. This could include business cards, letterheads, envelopes and brochures. Feel free to ask for your free quote. <br /><br /></p> <p>I’m available on Tel: 0034 617 656 047, Skype:<a class="general_link" href="#"> hmwebsolutions,</a> Twitter: <a class="general_link" href="#">hmwebsolutions.</a> Or via my <a class="general_link" href="#">contact page.</a></p> </div> </div> </div> <!-- Main Text Area Ends--> <!-- Footer Area Begins--> <div id="footer_bg"> <div id="mainfooter_centered"> <div id="left"> <h4><img class="footer_icon" src="images/icon_contact.png" alt="Get in touch with HM Web Solutions" />drop me a line </h4> <p class="footer">All emails will be answered within 24hrs.</p> <div id="contact-area"> <form method="post" action="contactengine.php"> <label for="Name">Name:</label> <input type="text" name="Name" id="Name" /> <label for="Email">Email:</label> <input type="text" name="Email" id="Email" /> <label for="Message">Message:</label><br /> <textarea name="Message" rows="20" cols="20" id="Message"></textarea> <input type="submit" name="submit" value="Send" class="submit-button" /> </form> </div> </div> <div id="middle"> <h4><img class="footer_icon" src="images/icon_testimonial.png" alt="Client Testimonials" />testimonials </h4> <p class="footer">Some kind words from happy clients.</p> <div id="testimonial"> <p class="testimonial">“Working with Nathan has been a pleasure. A versatile guy with lots of talent. Nathan knows how to convert a simple idea into an aesthetic, practical design†<br /><br />* Nest Boutique </p> </div> </div> <div id="right"> <h4><img class="footer_icon" src="images/icon_twitter.png" alt="Latest twitter updates" />latest tweets</h4> <p class="footer">Thoughts and updates to HM.</p> <div id="twitter"> <ul id="twitter_update_list"> <li></li> </ul> <script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script> <script src="http://twitter.com/statuses/user_timeline/guirigales.json?callback=twitterCallback2&count=5" type="text/javascript"></script> </div> </div> </div> </div> <div id="dark_footer"> <div id="darkfooter_centered"> <p>© HM Web Solutions 2010 All rights reserved | Designed by hand, coded by hand... in short, <span>Hand Made.</span> | Dont delay drop me a line today. | Valid <a class="general_link" href="#">XHTML</a> & <a class="general_link" href="#">CSS</a> </p> </div> </div> </body> </html> Code (markup): /* http://meyerweb.com/eric/tools/css/reset/ */ /* v1.0 | 20080212 */ /* font face */ @font-face { font-family: 'CenturyGothicRegular'; src: url('http://www.hmwebsolutions.co.uk/fonts/century_gothic-webfont.eot'); src: local('☺'), url('http://www.hmwebsolutions.co.uk/fonts/century_gothic-webfont.woff') format('woff'), url('http://www.hmwebsolutions.co.uk/fonts/century_gothic-webfont.ttf') format('truetype'), url('http://www.hmwebsolutions.co.uk/fonts/century_gothic-webfont.svg#webfonto5IOqZom') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'BaskervilleMTStdRegular'; src: url('http://www.hmwebsolutions.co.uk/fonts/baskervillemtstd-regular-webfont.eot'); src: local('☺'), url('http://www.hmwebsolutions.co.uk/fonts/baskervillemtstd-regular-webfont.woff') format('woff'), url('http://www.hmwebsolutions.co.uk/fonts/baskervillemtstd-regular-webfont.ttf') format('truetype'), url('http://www.hmwebsolutions.co.uk/fonts/baskervillemtstd-regular-webfont.svg#webfontRKLy8lJx') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'BaskervilleMTStdBoldItalic'; src: url('http://www.hmwebsolutions.co.uk/fonts/baskervillemtstd-boldit-webfont.eot'); src: local('☺'), url('http://www.hmwebsolutions.co.uk/fonts/baskervillemtstd-boldit-webfont.woff') format('woff'), url('http://www.hmwebsolutions.co.uk/fonts/baskervillemtstd-boldit-webfont.ttf') format('truetype'), url('http://www.hmwebsolutions.co.uk/fonts/baskervillemtstd-boldit-webfont.svg#webfontRKLy8lJx') format('svg'); font-weight: normal; font-style: normal; } /* font face Ends */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1.846em; background-color: #b7a99d; color: #f2f1f1; text-shadow: #524339 1px 1px 2px; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } .clear{ clear: both; } /* remember to define focus styles! */ :focus { outline: 0; } /* remember to highlight inserts somehow! */ ins { text-decoration: none; } del { text-decoration: line-through; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; } .opacity { color: rgba(0,0,255,0.2) width: 250px; height: 250px; } /* HM General Styles */ p{ font-family: CenturyGothicRegular,century gothic, verdana, sans-serif; font-size: 0.813em; line-height: 1.846em; color: #f2f1f1; text-shadow: #524339 1px 1px 2px; } p span{ font-family: CenturyGothicRegular,century gothic, verdana, sans-serif; font-size: 1em; line-height: 1.846em; color: #83d3fe; text-shadow: #524339 1px 1px 2px; } h2{ font-family: BaskervilleMTStdRegular; color: white; font-weight:lighter; line-height: 1.43em; font-size:2.4em; text-shadow: #604f44 1px 2px 5px; } h2 span{ font-family: BaskervilleMTStdBoldItalic; font-weight: 400; color: #83d3fe; } h3{ font-family: CenturyGothicRegular,century gothic, verdana, sans-serif; color: #f2f1f1; font-size: 0.813em; font-weight: 100; margin-top: 0.1em; margin-left: 0em; margin-bottom: 1.3em; text-shadow: #604f44 1px 1px 2px; } h3 span{ font-family: CenturyGothicRegular,century gothic, verdana, sans-serif; font-weight: 300; color: #83d3fe; } h4{ font-family: BaskervilleMTStdRegular; text-transform: uppercase; font-size: 1.6em; text-shadow: #604f44 1px 2px 5px; font-weight: 100; } a.general_link{ text-decoration: none; color: #eb8c15; } .general_link:hover{ text-decoration: none; color: #83d3fe; } /* HM General Styles Ends */ #header{ background-color: transparent; background-image:url(../images/bg_header.jpg); height:74px; background-repeat: repeat-x; width:100%; position: relative; z-index: 1000; } #centered_header{ width: 960px; margin: 0 auto; height: 74px; } #logo{ background-image: url(../images/logo.png); margin-top: 0; margin-left: 0; width: 156px; height: 170px; float:left; clear: both; z-index: 2000; } ul#navbar{ position: relative; margin-right: -14px; } ul#navbar li{ display: inline; } ul#navbar li a{ display: block; height:94px; text-indent: -9999px; float: right; } ul#navbar li a.home{ width: 100px; background: url(../images/nav_home.png); background-position:top center; background-repeat: no-repeat; } ul#navbar li a.services{ width: 100px; background: url(../images/nav_services.png); background-position:top center; background-repeat: no-repeat; } ul#navbar li a.projects { width: 100px; background: url(../images/nav_projects.png); background-position:top center; background-repeat: no-repeat; } ul#navbar li a.contact { width: 100px; background: url(../images/nav_contact.png); background-position:top center; background-repeat: no-repeat; } ul#navbar li a.home:hover, ul#navbar li a.home:active, ul#navbar li a.services:hover, ul#navbar li a.services:active, ul#navbar li a.projects:hover, ul#navbar li a.projects:active, ul#navbar li a.contact:hover, ul#navbar li a.contact:active{ background-position: bottom center; } body#home ul#navbar li a.home, body#services ul#navbar li a.services, body#projects ul#navbar li a.projects, body#contact ul#navbar li a.contact{ background-position: bottom center; } /* End header */ /* Slide Show Begins */ #slideshow_bg{ background: url(../images/bg_slideshow.jpg); height:389px; background-repeat: repeat-x; width:100%; position: relative; padding-top: 55px; } #laptop{ background:url(../images/ss_laptop.png) no-repeat; width:683px; height: 412px; margin: 0 auto; position: relative; z-index: 100; } #slideshow{ } div#slideshow ul#nav_slide { list-style: none; position: relative; top: 120px; left:-160px; z-index: 20; width:960px; } div#slideshow ul#nav_slide li#prev { float: left; margin: 0 0 0 1px; } div#slideshow ul#nav_slide li#next { float: right; margin: 0 -24px 0 0; } div#slideshow ul#nav_slide li a { display: block; width: 65px; height: 65px; text-indent: -9999px; } div#slideshow ul#nav_slide li#prev a { background: url(../images/prev.png); background-position:bottom center; background-repeat: no-repeat; } div#slideshow ul#nav_slide li#next a { background: url(../images/next.png); background-position:bottom center; background-repeat: no-repeat; } div#slideshow ul#nav_slide li#prev a:hover { background: url(../images/prev.png); background-position:top center; background-repeat: no-repeat; } div#slideshow ul#nav_slide li#next a:hover { background: url(../images/next.png); background-position:top center; background-repeat: no-repeat; } div#slideshow ul#slides { list-style: none; } div#slideshow ul#slides li { margin: 0 0 20px 0; } div#slideshow ul#slides { list-style: none; width: 560px; height:360px; position: absolute; display: block; right:30px; top:27px; background: transparent; } div#slideshow ul#slides li { width:496px; height:309px; } /* Slide Show Ends */ /* Index Text Container Begins */ #index_text_bg{ background:url(../images/bg_index_grain.jpg) repeat-x; width:100%; height: 650px; z-index: 220; margin-top: -56px; } #text_container{ margin: 0 auto; width: 960px; position: relative; } #text_intro{ width:960px; padding-top:130px; position: relative; } p.index{ font-family: CenturyGothicRegular,century gothic, verdana, sans-serif; font-size: 0.813em; line-height: 1.846em; color: #f2f1f1; text-shadow: #524339 1px 1px 2px; padding-top: 20px; } img.icon{ padding-right: 10px; margin-bottom: -3px; position: relative; z-index: 5000 } img.footer_icon{ padding-right: 10px; margin-bottom: -3px; height:27px; position: relative; z-index: 5000 } #available{ background:url(../images/icon_available.png) no-repeat; width:143px; height: 142px; position: absolute; z-index: 500; margin-top: 100px; margin-left: 590px; } #bio{ background:url(../images/mini_bio.png) no-repeat; width:309px; height: 184px; position: absolute; z-index: 400; margin-top: 140px; margin-left: 655px; } /* Index Text Container Ends */ /*Footer Begins */ #footer_bg{ background:url(../images/bg_footer.jpg) repeat-x; width:100%; height: 453px; padding-bottom: 0px; padding-top: 0px; } #mainfooter_centered{ width:960px; margin: 0 auto; padding-top: 2.5em; } #left{ width: 280px; height: 370px;; float: left; border-right: solid; border-color: #7d6b5e; border-width: thin; padding-right: 10px; } #middle{ width: 280px; height: 370px; float: left; border-right: solid; border-color: #7d6b5e; padding-right: 40px; padding-left: 30px; border-width: thin; } #right{ width: 280px; height: 370px; float: left; padding-left: 30px; } #dark_footer{ background:url(../images/bg_footer_grain.jpg) repeat-x; width:100%; height: 135px; position: absolute; bottom: 0: } #darkfooter_centered{ width: 960px; margin: 0 auto; padding-top: 25px; font-size: 0.94em; } /*Contact Area*/ #contact-area { width: 300px; margin-top: 10px; } p.footer{ font-family: CenturyGothicRegular,century gothic, verdana, sans-serif; font-size: 0.813em; line-height: 1.846em; color: #000; text-shadow: #7d6b5e 1px 1px 2px; } #contact-area input, #contact-area textarea { padding: 3px; width: 250px; font-family: CenturyGothicRegular,century gothic, verdana, sans-serif; font-size: 0.8em; color: #eb8c15; margin: 0px 0px 0px 0px; border: 1px solid #ccc; } #contact-area textarea { height: 80px; margin-bottom: 15px; background-color: #7d6b5e; background-image: url(../images/bg_contact_message.jpg); background-repeat: no-repeat; } #contact-area textarea:focus, #contact-area input:focus { border: 1px solid #7e6c5f; } #contact-area input.submit-button { width: 100px; float: left; background-image: url(../images/bg_contact_send.jpg); font-family: CenturyGothicRegular,century gothic, verdana, sans-serif; font-size: 0.813em; color: #f2f1f1 1px 2px 3px; cursor: pointer; } #contact-area input#Name { background-image: url(../images/bg_contact_name.jpg); background-color: #7e6c5f } #contact-area input#Email { background-image: url(../images/bg_contact_name.jpg); background-color: #7e6c5f } label { float: left; text-align: left; margin-right: 0px; width: 100px; padding-top: 10px; font-size: 0.813em; color:#f2f1f1 1px 1px 3px; font-family: CenturyGothicRegular,century gothic, verdana, sans-serif; } /*Contact Area Ends*/ /*Testimonial Area Begins*/ #testimonial{ background-image: url(../images/bg_testimonial.png); height: 284px; width: 292px; background-repeat: no-repeat; margin-top: 30px; margin-left: -2px; } p.testimonial{ padding: 25px 25px 25px 25px; font-family: CenturyGothicRegular,century gothic, verdana, sans-serif; text-shadow: #604f44 1px 1px 2px; color: black; font-size: 0.9em; } /*Testimonial Area Ends*/ /*Tweet Area Begins*/ #twitter{ background-image: url(../images/bg_twitter.png); height: 284px; width: 292px; background-repeat: no-repeat; margin-top: 30px; margin-left: -2px; overflow: hidden; } #twitter ul#twitter_update_list{ padding: 21px 30px 25px 27px; height: 190px; width: 250px; overflow: hidden; } #twitter ul { list-style: none; color: black; font-size: 0.95em; line-height: 1.4em; } #twitter ul li { padding-top: 10px; } #twitter ul li a { display: block; font-family: CenturyGothicRegular,century gothic, verdana, sans-serif; font-size: 0.7em; color: #fff; } #twitter ul li a:hover { color: #eb8c15; font-size: 0.7em; } #twitter ul li span { font-family: CenturyGothicRegular,century gothic, verdana, sans-serif; font-size: 0.9em; color: #000; } #twitter ul li span a { font-family: CenturyGothicRegular,century gothic, verdana, sans-serif; font-size: 0.7em; color: #fff; } /*Tweet Area Ends*/ Code (markup): Many thanks to any help you can give. nathan
I literally hate Internet Explorer with a passion. There is a solution for it but unfortunately I don't have it for you.
Welcome to DP forum. On a quick peek in the css & markup i would say for the footer issue, you can position the 3 column div relatively with each other along with the floating them to the left. and off course play around with the margin and padding (if you want to fix it for ie6, try reducing the padding and margin.) I am fixing an sample css code (not tested thoroughly). This should be able to fix the issue. if not play around with div width and margin. If i can find some time i would replicate the code at my side for the 1st issue however i've to run for my work place now. #left{ position:relative; left:0; width: 280px; height: 370px; float: left; border-right: solid; border-color: #7d6b5e; border-width: thin; margin-right:0px; } #middle{ position:relative; left:0; width: 280px; height: 370px; float: left; border-right: solid; border-color: #7d6b5e; border-width: thin; margin-right:34px; margin-left:35px; } #right{ position:relative; left:0; width: 280px; height: 370px; float: left; } And definitely, clear the section right after three column div so that contents doesn't get wrapped up. <div style="clear:both"> Also noticed, i guess #mainfooter_centered is been used as a container for the 3 divs. however it is not actually wrapping the divs. a height might do that fixed. #mainfooter_centered { border:1px solid; <!-- this is just to show how div is looks like, remove it as required --> height:100%; margin:0 auto; padding-top:2.5em; width:960px; }