Jump to content

cross browser compatibility problems

- - - - -

  • Please log in to reply
2 replies to this topic

#1
mkjt88

mkjt88

    Newbie

  • Members
  • PipPip
  • 27 posts
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;
}


#2
WingedPanther

WingedPanther

    A spammer's worst nightmare

  • Moderators
  • 16,831 posts
  • Location:Upstate, South Carolina
  • Programming Language:C, C++, PL/SQL, Delphi/Object Pascal, Pascal, Transact-SQL, Others
  • Learning:Java, C#, PHP, JavaScript, Lisp, Fortran, Haskell, Others
What version of IE? Different versions have different levels of CSS/HTML compatibility.
Programming is a branch of mathematics.
My CodeCall Blog | My Personal Blog

#3
mkjt88

mkjt88

    Newbie

  • Members
  • PipPip
  • 27 posts
IE 7 is what I viewed it on.




1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users