Ok I have a pretty big problem. Spent countless hours working on this web site and forgot a pretty important step.. I didn't check the compatibility across browsers and the IE version has some major errors I cannot fix. My banner buttons do not work.. and my navBox <li> isn't working so everything is scrunched up top. Here is some coding to help you see what I did. The webpage is
Turner Tree Service - Tree Trimming & Landscaping Works fine on FireFox and Safari.
<!-- Creating Banner Buttons -->
<div class="about">
<a id="box-link2a" href="about.html"></a>
</div>
<div class="services">
<a id="box-link3f" href="services.html"></a>
</div>
<div class="contact">
<a id="box-link4c" href="contact.html"></a>
</div>
<!-- Start Navigation -->
</div>
<div id = "navigation">
<ul id = "navlist">
<li> <a href = "index.html">HOME</a></li>
<br>
<li> <a href = "about.html">ABOUT US</a></li>
<br>
<li> <a href = "services.html">SERVICES</a></li>
<br>
<li> <a href = "contact.html">CONTACT</a></li>
<br>
<li> <a href = "faq.html">FAQ</a></li>
<br>
<li><a href = "portfolio.html">PORTFOLIO</a></li>
<br>
<li><a href = "nursery.html">NURSERY</a></li>
<br>
<li><a href = "health.html">HEALTH & MAINTENANCE</a></li>
<br>
<li><a href = "almanac.html">GARDEN ALMANAC</a></li>
<br>
<li><a href = "http://www.facebook.com/pages/Turner-Tree-Service/189166497787004" target="_blank">FACEBOOK</a></li>
<br>
</ul>
</div>
<div id = "centerDoc">
<div style="border:#243730 1px dotted";>
<center><p>
<font size="4">Website Under Construction.. For best viewing results browse in
<a href="http://www.mozilla.com/en-US/firefox/">FireFox</a>
</p></center>
<!-- Start Main Content --> <!-- Start Main Content --> <!-- Start Main Content -->
<br />
<center><img src="Images/flowers.png"></img> <img src="Images/sign.png"></img>
<img src="Images/chair.png"></img> <img src="Images/flowers2.png"></img></center>
<center><h3>Welcome to Turner Tree Service and Landscaping!</h3></center>
<p><span class="main">
Turner Tree Service is a family run business that has been serving the
Jacksonville area for over 50 years. We are fully insured and deliver professional tree
and landscaping services. <font size=2>"Click on <span class="pagelinkin"><a href = "services.html">Services</a></span> to find out more!"</font> A knowledgeable tree or landscaping
expert will gladly come and give you a free estimate at your convenience.
<br />
<br />
Our expertise is removing trees in a safe and controlled manner. We find satisfaction
in trimming and shaping trees, allowing them to thrive. We are also available to
provide our customers with any stump grinding and storm damage needs.
<br />
<br />
We also specialize in Landscaping and Hardscapes. We can take your plain yard and make
it a beautiful garden. <font size=2>'For a job not listed under <span class="pagelinkin"><a href = "services.html">Services</a></span>
please <span class="pagelinkin"><a href = "contact.html">Contact Us</a></span></font>
</p>
<h3>News</h3>
<span class="date"><a href = "http://www.facebook.com/pages/Turner-Tree-Service/189166497787004" target="_blank"> > > 03-16-11 </a></span>
<br />
<img src="Images/spring.jpg"></img>
<p><font size="2">
<ul>
<li>
Spring is almost here!!! Potato and Onion sets and garden seeds are ready for the
gardeners.
</li>
<li>
New trees and shrubs will be here the first part of April.
</li>
<li>
Mark your calendar for June 11, We will be hosting a PINK DAY! 10% of sales go
the Susan G. Komen foundation.
</li>
</ul>
</font></p>
<h3>Gardener's Guide</h3>
<span class="date"><a href = "almanac.html#mar" target="_blank"> > > March </a></span>
<br />
<p><font size="2">
<ul>
<li>
At last, The earth has sofened and begun to warm - enough to allow you to
scoop up a handful, squeeze it gently, and watch it crumble into smaller pieces.
Although you can't see it, your soil is teeming with life. <span class="pagelinkin"><a href = "almanac.html#mar">Read More...</a></span>
</li>
</ul>
</font></p>
<hr width="600px">
<span class="top"><center><a href="#top">Back to Top</a></center></span>
<!-- Copyright - Contact info -->
<span class = "copy">
<center>
<br />
For broken links or problems please contact our <a href="mailto:miketj88@yahoo.com?body=I am having trouble with.. ">Webmaster.</a>
<br />
<br />
<a href = "http://www.facebook.com/pages/Turner-Tree-Service/189166497787004" target="_blank"><img border="0" src="Images/facebook.jpg"</a><br>
130 W. Walnut - Jacksonville, Il. <br>
(1)-217-243-7479 <br>
© Turner Tree Service 2011
<br><br>
</center>
</span>
</div>
body{
margin: 0;
padding:0;
}
#centerDoc {
position: absolute;
width: 70%;
top: 365px;
left: 280px;
background-color:#bbbbbb;
border: 1px;
}
#slideshow {
position: absolute;
width: 420px;
height: 270px;
top: 15px;
left: 523px;
}
#box-link1i {
position: absolute;
top: 238px;
left: -510px;
width: 78px;
height: 30px;
background-color: transparent;
}
#box-link2a {
position: absolute;
top: 238px;
left: -407px;
width: 85px;
height: 30px;
background-color: transparent;
}
#box-link3f {
position: absolute;
top: 238px;
left: -296px;
width: 115px;
height: 30px;
background-color: transparent;
}
#box-link4c {
position: absolute;
top: 238px;
left: -157px;
width: 110px;
height: 30px;
background-color: transparent;
}
#navigation {
background-image:url("Images/navbox.jpg");
position: absolute;
height: 394px;
width: 232px;
font-size: 12px;
top: 340px;
left: 20px;
}
#navigation ul a {
color: white;
text-decoration:none;
}
#navigation ul li a:hover {
color: #c24d0e;
text-decoration:underline;
font-family:"Arial", Times, serif;
}
#navigation li {
color:#d74f04;
text-decoration:none;
font-family:"Arial", Times, serif;
}
#navigation li :hover {
color: #c24d0e;
text-decoration:underline;
font-family:"Arial", Times, serif;
}
#navlist {
position: absolute;
top: 55px;
left: 5px;
}
p {
font-size: 14px;
padding-left:10px;
padding-right:15px;
position absolute:
left: 10px;
width: 95%;
font-family:"Verdana", Times, serif;
color: black;
}
h4 {
font-family: "Verdana", Times, serif;
font-size: 14px;
}
h3 {
padding-left: 10px;
padding-bottom: 2px;
width: 95%;
font-family:"Arial", Times, serif;
border-bottom: 1px dotted #243730;
color: #2e463d;
}
h2 {
padding-bottom: 3px;
width: 95%;
font-family:"Arial", Times, serif;
border-bottom: 1px dashed #243730;
color: #162e25;
}
#links li a {
text-decoration: none;
color: #000000;
font-family: "Verdana", Times, serif;
font-size: 14px;
}
#links li a:hover {
text-decoration: underline;
color: #c24d0e;
font-weight: bold;
}
.top a {
text-decoration: none;
color: #2e463d;
font-size: 12px;
font-family: "Verdana", Times, serif;
}
.top a:hover {
text-decoration: underline;
color: #b44306;
font-weight: bold;
}
.servLinks a {
text-decoration: none;
color: #000000;
font-family: "Verdana", Times, serif;
font-size: 14px;
border-bottom: 1px dotted #243730;
}
.servLinks a:hover {
text-decoration: underline;
color: #b44306;
}
.service {
font-size: 18px;
font-family: "Arial", Times, serif;
color: #172e24;
}
.copy {
font-size: 10px;
font-family: "Verdana", Times, serif;
text-decoration: none;
color: #000000;
}
.copy a {
font-size: 10px;
font-family: "Verdana", Times, serif;
text-decoration: none;
color: #2e463d;
}
.copy a:hover {
font-size: 10px;
font-family: "Verdana", Times, serif;
text-decoration: none;
color: #000000;
font-weight: bold;
}
.pagelink a {
font-size: 14px;
color: #2e463d;
text-decoration: none;
}
.pagelink a:hover{
font-size: 14px;
color: #000000;
font-weight: bold;
}
.pagelinkin a {
color: #2e463d;
text-decoration: none;
}
.pagelinkin a:hover{
color: #000000;
font-weight: bold;
text-decoration: underline;
}
.portLinks a {
text-decoration: none;
color: #000000;
font-family: "Verdana", Times, serif;
font-size: 14px;
border-bottom: 1px dotted #243730;
}
.portLinks a:hover {
text-decoration: underline;
color: #b44306;
}
.portfolio {
font-size: 18px;
font-family: "Arial", Times, serif;
color: #172e24;
}
.health {
font-size: 14px;
font-family: "Arial", Times, serif;
color: #172e24;
}
#leftHealth {
position:static;
width:40%;
}
#rightHealth {
position:absolute;
top: 50px;
right: 150px;
width:40%;
}
#part {
font-family: "Verdana", Times, serif;
font-size: 12px;
}
#sale {
font-family: "Arial", Times, serif;
font-size: 16px;
color: #2e463d;
}
.saleV {
font-family: "Verdana", Times, serif;
font-size: 12px;
color: #111111;
padding-right: 20px;
}
.date a {
font-family: "Verdana", Times, serif;
font-size: 12px;
padding-left: 15px;
padding-right: 20px;
color: #29473e;
text-decoration: none;
}
.date a:hover {
text-decoration: underline;
font-weight: bold;
color: #000000;
}
.topcopy {
font-family: "Verdana", Times, serif;
font-size: 8px;
}
.midcopy {
font-family: "Verdana", Times, serif;
font-size: 10px;
}
.main {
padding-left:10px;
font-size: 12px;
padding-right:15px;
width: 95%;
font-family:"Verdana", Times, serif;
color: black;
}
.main {
font-size: 12px;
}