Jump to content

Issues With Explorer


Recommended Posts

I have created a few web pages that are not working very well in internet explorer. I am uncertain of where I went wrong, but Fire fox, Opera, and chrome seem to be working well. Apparently it is just IE that does not like the coding. Here is the CSS

body{font: normal small Arial, Helvetica, sans-serif;color: #646464;text-align:justify;font-size:13px;margin-top:15px;margin-left:0px;margin-right:0px;margin-bottom:15px;background-color:#FEC803;background-image:url(images/bg1.jpg);background-size: 100% auto}}#links-bg{width:759px;margin-left:10px; height:32px; line-height:32px; margin-top:10px;}#left2{width:10px;    margin-top:5px;float:left;font-size:1px;background-image:url(images/rc9.gif); background-repeat:no-repeat;height:32px;}#center2{width:759px;    margin-top:5px;float:left;background-image:url(images/links-bg.gif); background-repeat:repeat-x;height:32px;}#right3{width:10px;    margin-top:5px;float:left;font-size:1px;background-image:url(images/rc10.gif); background-repeat:no-repeat;height:32px;}.toplinks{width:142px;margin-top:5px;text-align:center;float:left;}.toplinks a{color:#fd0000;font-size:20px;font-weight:bold;text-decoration:none;}.toplinks a:hover{color:#000000;text-decoration:none;}.sap{color:#C21E00;font-size:12px;font-weight:bold;width:6px;text-align:center;float:left;}#logo-bg{width:300px;float:left;height:187px;}#santa{width:439px;float:center;margin-left:285px;background-image:url(images/santatree.png); background-repeat:no-repeat; background-position:right;height:187px;}#border{width:779px;text-align:left;}#rc1{width:768px;height:10px;font-size:1px;background-image:url(images/rc1.gif); background-repeat:no-repeat;float:left;background-color:#ffffff;}#rc2{width:11px;height:10px;font-size:1px;background-image:url(images/rc2.gif); background-repeat:no-repeat;float:left;background-color:#ffffff;}.white{background-color:#ffffff;width:779px;float:left;}#header{height:187px; margin-left:10px; width:759px;}#left{width:10px;float:left;font-size:1px;background-image:url(images/big-rc1.jpg); background-repeat:no-repeat;height:187px;}#center{width:739px;float:left;background-image:url(images/header-bg.jpg); background-repeat:repeat-x;height:187px;}#right{width:10px;float:left;font-size:1px;background-image:url(images/big-rc2.jpg); background-repeat:no-repeat;height:187px;}#right2{width:579px;float:right;}.name{font-family:"Comic Sans MS";font-size:32px;text-transform:uppercase;padding-left:0px;padding-top:30px;color:#ffffff;}.tag{font-size:19px;font-family:"Comic Sans MS";color:#ffffff;padding-top:80px;}.tag2{font-size:19px;font-family:"Comic Sans MS";color:#ffffff;padding-left:16px;font-weight:bold;}.quicklinks{padding-left:15px;line-height:35px;font-size:11px;font-family:tahoma;height:35px;clear:left;border-bottom:1px solid #D4D4D4;}.quicklinks a{color:#C21E00;text-decoration:none;}.quicklinks a:hover{color:#000000;text-decoration:none;}.bottom{background-color:#fd0000;height:40px;text-align:center;padding-top:10px;width:779px;float:left;}a{color:#C21E00;text-decoration:underline;}a:hover{color:#C21E00;text-decoration:none;}.sap2{color:#ffffff;float:left;height:30px;line-height:30px;width:1px;}.bottomlinks{color:#ffffff;float:left;height:30px;width:153px;line-height:30px;}.bottomlinks a{color:#ffffff;text-decoration:none;}.bottomlinks a:hover{color:#ffffff;text-decoration:underline;}.main{padding-left:10px;padding-right:10px;background-color:#ffffff;border-left:1px solid #F4DBA5;border-right:1px solid #F4DBA5;width:539px;float:left;}.heading{color:#618D01;font-weight:bold;text-transform:uppercase;padding-bottom:10px;font-size:12px;}#rc5{width:172px;height:40px;line-height:40px;padding-left:15px;font-size:12px;text-transform:uppercase;font-weight:bold;color:#618D01;float:left;}#rc6{width:11px;height:40px;font-size:1px;float:left;}#rc7{background-image:url(images/rc7.gif); background-repeat:no-repeat;width:11px;font-size:1px;height:11px;float:left;}#rc-bg{width:539px;float:left;font-size:1px;border-top:1px solid #F4DBA5;height:10px;}#rc8{background-image:url(images/rc8.gif); background-repeat:no-repeat;width:11px;height:11px;font-size:1px;background-color:#ECE6D8;float:left;}#left10{width:198px;padding-top:10px;background-color:#ffffff;float:left;}#center10{width:5px;padding-top:10px;font-size:1px;background-color:#ffffff;float:left;height:10px;}#right10{width:576px;padding-top:10px;background-color:#ffffff;float:left;}#rc10{width:768px;height:10px;font-size:1px;background-image:url(images/rc3.gif); background-repeat:no-repeat;background-position:bottom left;float:left;background-color:#ffffff;}#rc11{width:11px;height:10px;font-size:1px;background-image:url(images/rc4.gif); background-repeat:no-repeat; background-position:bottom;float:left;}#rc12{background-image:url(images/rc12.gif); background-repeat:no-repeat;width:11px;font-size:1px;height:11px;float:left;}#rc-bg2{width:539px;float:left;font-size:1px;border-bottom:1px solid #F4DBA5;height:10px;}#rc13{background-image:url(images/rc11.gif); background-repeat:no-repeat;width:11px;height:11px;font-size:1px;background-color:#ECE6D8;float:left;}

Here is the HTML

<img src="images/links-bg.gif" width="1" height="32" alt="" border="0"><!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=iso-8859-1" /><title>Christmas Holiday Template by CMG Technologies</title><link href="christmas-holiday.css" rel="stylesheet" type="text/css" /></head><body><center><div id="border"><div id="rc1"></div><div id="rc2"></div><div class="white"><div id="header"><div id="left"></div><div id="center"><div id="logo-bg"><div class="name"><img src="images/name1.png" /></div><div class="tag2"><img src="images/name2.png" /><p><img src="images/name3.png" /></p></div></div><div id="santa"><div class="tag"></div></div></div><div id="right"></div></div><div id="links-bg"><div id="left2"></div><div id="center2"><div class="toplinks"><a href="index.html">Home</a></div><div class="sap"></div><div class="toplinks"><a href="lights.html">Lights</a></div><div class="sap"></div><div class="toplinks"><a href="howto.html">How To</a></div><div class="sap"></div><div class="toplinks"><a href="aboutus.html">About Us</a></div><div class="sap"></div><div class="toplinks"><a href="contactus.html">Contact us</a></div></div><div id="right3"></div></div></div><div class="white"><div id="left10"><div style="clear:both;"><div id="rc5">Categories</div><div id="rc6"></div></div><div class="quicklinks"> <a href="trees.html">Christmas Trees</a></div><div class="quicklinks"> <a href="lights.html">Christmas Lights</a></div><div class="quicklinks"> <a href="controllers.html">Controllers</a></div><div class="quicklinks"> <a href="http://www.christmas-guide.info/">Christmas Shopping</a></div><div class="quicklinks"> <a href="http://www.christmas-decoration-guide.info/">Christmas Decorations</a></div><div class="quicklinks"> <a href="http://www.disney-vacation-news.info/">Disneyland Vacation</a></div><div class="quicklinks"> <a href="http://www.mypartyplace.info/">Party Planning</a></div><div class="quicklinks"> <a href="http://www.party-planning-guide.info/">New Years Eve Party</a></div><div class="quicklinks"> <a href="http://www.your-thanksgiving.info/">Happy Thanksgiving</a></div><div class="quicklinks"> <a href="http://www.vacation-guide.info/">Vacation Guide</a></div></div><div id="center10"></div><div id="right10"><div style="clear:both;"><div id="rc7"></div><div id="rc-bg"></div><div id="rc8"></div></div><div class="main"><div class="heading"><font size="4"><p style="color:#FD0000">Welcome!</font></div></div><div class="main">  <p>Hi Everybody! Here is a Free Template, named Christmas with CSS and XHTML 1.0 Transitional Validation from CMG Technologies, <a href="http://www.cmgtechnologies.com">Web Design India</a>. Feel free to use this template, just keep the Designed by link at the bottom. Thanks! </p><center><img src="images/santatree.png" /></center><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum sapien enim, cursus in, aliquam sit amet, convallis eget, metus. Duis dui mi, varius at, lacinia eget, ullamcorper et, tortor. Pellentesque ac pede. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean orci mi, varius eget, mollis vel, rhoncus a, leo. Ut eros enim, vehicula quis, gravida ac, sodales sit amet, orci. Nulla eleifend tristique erat.</p><p>Nunc commodo metus et lorem. Phasellus vel libero. Vestibulum eu enim. Mauris pharetra. Vestibulum ligula libero, vestibulum quis, commodo non, sagittis eget, elit. Ut nec tellus. Nunc ligula quam, vulputate ut, imperdiet nec, luctus at, magna. Nunc posuere nulla ac tortor. Donec facilisis, turpis eu hendrerit ultricies, lectus sapien nonummy justo, eget rutrum lorem nulla sed nunc. Nam vestibulum neque vitae lacus aliquam tristique. Ut odio quam, mollis in, ultrices vel, ullamcorper id, diam. Curabitur eget odio a lacus pulvinar condimentum. Suspendisse elementum.</p><p>Quisque vulputate. Aliquam condimentum, odio vel ultrices sodales, augue lorem vehicula mi, vel nonummy nisl eros et tortor. Duis laoreet pellentesque lorem. Nam sagittis condimentum libero. Nullam a ante vel massa accumsan elementum. Sed mauris metus, tincidunt quis, blandit at, viverra a, ligula. Pellentesque neque metus, mattis non, tincidunt vitae, euismod scelerisque, nulla. Fusce justo. Donec nec nibh. Sed suscipit bibendum leo. Nulla erat ligula, egestas consequat, sagittis ut, fermentum a, diam. Sed turpis est, aliquam nec, lacinia sed, aliquam non, libero. Ut turpis. Pellentesque viverra pharetra quam.</p></div><div style="clear:both;"><div id="rc12"></div><div id="rc-bg2"></div><div id="rc13"></div></div><div style="height:20px;"></div></div><div><div class="bottom"><div class="bottomlinks"><a href="links.html">Links</a></div><div class="sap2">|</div><div class="bottomlinks"><a href="http://www.doityourselfchristmas.com/forums/forum.php" target="blank">Do It Yourself Forum</a></div><div class="sap2">|</div><div class="bottomlinks"><a href="index.html">Products</a></div><div class="sap2">|</div><div class="bottomlinks"><a href="index.html">Services</a></div><div class="sap2">|</div><div class="bottomlinks"><a href="index.html">Contact</a></div></div></div><div id="rc10"></div><div id="rc11"></div></div><center><center><p style="color:#ffffff">© 2011 <strong>ashchristmasonplantation.info</strong></center></div></center></body></html>

This is the first time I have had this kind of a problem, any help is appreciated.

  • Like 1
Link to post
Share on other sites

The first problem is this line:

<img src="images/links-bg.gif" width="1" height="32" alt="" border="0"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

Nothing can go before the <!DOCTYPE> or if not, the browser will run in quirks mode and it will be nearly impossible to achieve consistency between browsers. If you've fixed that and still have trouble getting browsers to look alike, you need to find out which specific part of the page is wrong and figure out why. Personally, I can only do that by looking at a live page and exploring the DOM tree. And other method is very slow and time consuming, On a side note, you seem to be seriously abusing <div> elements on your page, try using other elements as well and, where possible, reduce the amount of nested elements that could be replaced with strategic CSS style.Good elements to use are <ul>, <ol>, <h1>-<h6>, <address> and whenever you're going to wrap anything in a <div>, look through this list first to see if any other element works better.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...