1

誰かが私を助けてくれるのだろうか。これは私の最初のサイトであり、私は自分でできる限り多くの問題を解決しようとしましたが、魔法によってそれが解決することを期待してリフレッシュキーを押す口で画面をドリブルするところまで来ました.

問題は、サイトが FF、Chrome、および IE9+ では問題なく動作しているように見えますが、IE8 以下のバージョンでは、水平ナビゲーション バーが表示されないことです。本来あるべき場所にギャップがあり、リンクは機能しますが、スプライト イメージは表示されません。

このサイトはまだオンラインになっていないため、残念ながらリンクを提供することはできません。コードのみです。

私が愚かすぎて見つけられなかった、明白で単純な答えがある場合は、お詫び申し上げます。

お時間をいただきありがとうございます。

ジョン

<!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" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

<title>Alan J. Warde Chartered Surveyor</title>

</head>

<body id="home">


<div id="wrap"><!--wrap starts-->

    <a href="#"><img src="images/header.jpg" alt="header" /></a>


            <ul id="nav"><!--nav starts-->
                <li class="home"><a href="index.html">Home</a></li>
                <li class="about"><a href="about.html">About</a></li>
                <li class="services"><a href="services.html">Services</a></li>
                <li class="contact"><a href="contact.html">Contact</a></li>
            </ul><!--nav ends-->


           <div id="main_content"><!--start of main_content-->

            <div id="sidebar"><!--start of sidebar-->
                <div class="listbox"><!--start of listbox-->
                <div class="inner_sidebar">
                <ul>
                  <li>Building Surveys</li>
                  <li>Valuations</li>
                  <li>Structural Engineering</li>
                  <li>Quantity Surveying</li>
                  <li>Loss Adjusting</li>
                </ul>
                </div><!--end of inner_sidebar-->
                </div><!--end of listbox-->

            </div><!--end of sidebar-->

               <div id="homecontent"><!--start of Homecontent-->
                    <div id="inner_content"><!--start of inner_content-->
                <h1>A J Warde Chartered Surveyor</h1>
                <p>CONTENT</p>

<div id="contact"><!--start of contact-->
<p><img src="images/phone1.png" alt="phone" style="float:left;" />CONTENT</p>
</div><!--end of contact-->


              </div><!--end of inner_content-->

              </div><!--end of Homecontent-->

             </div><!--end of main_content-->

     <div id="footer">
        <div id="footer_inside">
          Registered Company 055012
             <ul id="footer_nav"><!--nav starts-->
                <li class="home"><a href="home.html">Home</a></li>
                <li class="about"><a href="about.html">About</a></li>
                <li class="services"><a href="services.html">Services</a></li>
                <li class="contact"><a href="contact.html">Contact</a></li>
            </ul><!--nav ends-->
         </div><!--end of Footer-inside-->
     </div><!--end of footer-->
</div><!--wrap ends-->
</body>
</html>






@charset "utf-8";
/* CSS Document */

/*RESETS AND BASIC SETUP*/

* {margin:0; padding:0;}
html {overflow-y:scroll; overflow: -moz-scrollbars-vertical; }
body {
    font: 62.5% "Times New Roman", Times, serif;
    background-color: #322e2e;
}


/*TYPOGRAPHY*/

h1 {
    padding:10px 0 20px 0;
    text-align:center;
    font-size:2.4em;
    color:#003399;
    text-shadow:1px 1px #69F;
}

h2 {
    padding:5px 0 5px 0;
    text-align:center;
    font-size:1.1em;
    color:#003399;
    text-shadow:1px 1px #69F;
}

/*BASIC ELEMENT STYLING*/

ul {list-style:none inside;}
p {font-size:1.8em; line-height:1.2em; margin-bottom:1.2em;    font-weight:bold; color:#333;}
a {outline:none;}
a {text-decoration:none;}
a img {border:none;}

/*END RESET*/

/*STRUCTURE AND THINGS*/


#wrap {
    width:995px; /*for IE*/
    margin:auto;
    background:url(images/content.jpg)repeat-y;
}

html>body #wrap { /*IE hack*/
    width:975px;
}


#main_content {
    padding:0;

}


#homecontent {
    background:url(images/contentimg.jpg) no-repeat;
    height:478px;
    width:633px;
    float:right;
    margin-right:12px; /*pushes div closer to left*/
    margin-top:2px;
    position:relative;


}

#servicescontent {
    background:url(images/servicesnewbg.jpg) no-repeat;
    height:478px;
    width:633px;
    float:right;
    margin-right:12px; /*pushes div closer to left*/
    margin-top:2px;
    position:relative;


}

#inner_content {
    padding:20px;
    position:relative;
}


        #contact { /*this is just to centre-align the contact details on home page*/
    position:absolute;
    left:150px;
    width: 330px;
    text-align:center;
        }
            #contact p {
                color:#0000FF;
            }

#left_col {
    border:1px solid red;
    float:left;
    height:478px;
    width:313px;
    margin-left:15px; /*pushes div closer to right*/
    margin-top:20px;
    position:relative;
}
        #contactdetails {
            position:absolute;
            left:50px;
        }

#sidebar {
    float:left;
    background:url(images/sidebar.jpg) no-repeat;
    height:478px;
    width:313px;
    margin-left:15px; /*pushes div closer to right*/
}




.inner_sidebar {
    padding:20px 0 80px 0px;
    font-size:1.4em;
}

.listbox {
    width:230px;
    margin-left:10px;
}

        .inner_sidebar ul li {
            font-size:1.4em;
            padding:5px;
            margin:5px 0 45px 5px;
            font-weight:bold;
            color:#FFF;
            border:1px solid #FFF;
            border-radius:3px;
            background-color:rgba(0, 0, 25, 0.5);
        }

/*TOP OF PAGE NAVIGATION*/

ul#nav {

}
    ul#nav li {
        display:inline;
    }
    ul#nav li a {
        display:block;
        height:54px; 
        text-indent:-9999px;
        float:left;
        } 

    ul#nav li.home a {
        width:404px;
        background:url(images/homenav.jpg)top center no-repeat;
    }

        ul#nav li.about a {
        width:160px;
        background:url(images/aboutnav.jpg)top center no-repeat;
    }

    ul#nav li.services a {
        width:160px;
        background:url(images/servicesnav.jpg)top center no-repeat;
    }

    ul#nav li.contact a {
        width:251px;
        background:url(images/contactnav.jpg)top center no-repeat;
    }

    ul#nav li a:hover {
        background-position: center center;
    }

    body#home li.home a, body#about li.about a, body#services li.services a, body#contact li.contact a {
        background-position: bottom center;
    } 


/*FOOTER*/

#footer {
    height:96px;
    background:url(images/footer.jpg) no-repeat;
    clear:both;
}

#footer_inside {
    text-align:center;
    width:500px;
    margin:auto;
    padding:10px 0 0 0;
    color:#CCCCCC;
    font-size:1.4em;

}

ul#footer_nav li {
    display:inline;
    padding:0px;
    margin:0px;     
}

    ul#footer_nav li a {
        color:white;
        text-decoration:none;
        padding:0 10px;
        border-right:1px solid white;
        line-height:25px;
    }
        ul#footer_nav li:last-child a { /*last child selector to remove last border seperator*/
            border:none;
        }
4

2 に答える 2

2

各プロパティのurl()との間にスペースを入れる必要があるようです。topbackground

于 2012-05-11T07:58:13.150 に答える
0

下位バージョンの IE には、IE だけにある「hasLayout」属性があります。あなたはそれについて知ることができました。

ul#nav {
    /* set width and height */
}

これはうまくいくかもしれないと思います。

于 2012-05-10T08:23:07.447 に答える