1

私は CSS を初めて使用し、完了したばかりのこの Web サイトのトラブルシューティングについて助けが必要です。IE7 (IE8 または IE9 は互換表示で表示する必要があります) を除いて、すべてが FF、サファリ、クローム (オペラは問題ないように見えます) で問題なく見えます。

IE ブラウザで表示すると、上部の余白がまったくなく、位置がずれています。さまざまなサイトからいくつかの解決策を検索しようとしましたが、うまくいきませんでした...

古いIEでもPNGファイルに問題があることは知っています.これは問題の1つです（PNGファイルを使用して画像の一部をマスクする場合）---表示されません。

これらの画像は IE7 で台無しになりました。私の IE8 は CV モードで正常に動作するようです :(

以下の長いコード列で申し訳ありませんが、どの部分が間違っていたのかわかりません。ライブ サイトは www.heightprotectionssolutions.com.sg です (おそらくここで確認する方が簡単です)。どんな助けでも大歓迎です！

<body>  
<div id="container"> 

    <!-- BEGIN OF HEADER -->
    <div id="header-container">
        <div id="header-box">

            <!-- begin of logo -->
            <div id="logo">
                <a href="#"><img src="images/logo_home.png" alt="main-logo" /></a>
            </div>
            <!-- end of logo -->

            <div id="righttop-header">
                <div id="top-information">
                    <p>For additonal information call : +65 9793 2263 | fax : +65 6748 2123</p>
                </div>

                <!-- begin of mainmenu -->
                <div id="mainmenu">
                    <ul id="menu">
                        <li><a href="index.html">home</a></li>
                        <li><a href="about.html">about</a></li>
                        <li><a href="services.html">services</a></li>
                        <li><a href="#">products</a>
                            <ul> 
                                <li><a href="GFP.html">GFP</a></li>
                                <li><a href="innotech.html">Innotech</a></li>
                            </ul>
                        </li>
                        <li class="current"><a href="partners.html">partners</a></li>
                        <li><a href="contact.html">contact</a></li>
                    </ul>                
              </div>
                <!-- end of mainmenu -->                    
            </div>

        </div>            
    </div>
    <!-- BEGIN OF HEADER -->

    <!-- BEGIN OF SLIDESHOW -->
    <div id="slideshow-container">
        <div id="slide-top"></div>            
        <ul id="slider">
            <!-- begin of slide 1 -->
            <li>
            <div class="slide-content-wrapper">                             
                <div class="slide-content">                        
                    <div class="slide-text">
                        <h1>Uncompromised Safety.</h1>
                        <p>The Trusted Safety Lifeline</p>
                        <a class="button small yellow" href="contact.html"><span>get a quote &nbsp;&raquo;</span></a>
                    </div>                                    
                </div>
                <div class="slide-dot"></div>
            </div>
            <img src="images/slideshow/slide1.jpg" alt="" />
            </li>
            <!-- end of slide 1 -->

CSSコードはこちら。他のブラウザーと同様に、IE7 が適切に表示されるように固定マージンを設定する必要があるかどうかわかりません。

#container{ 
margin:0px 0px 0px 0px; 
}
#header-container{
width:100%;
}
#header-box{
width:1090px;
margin:0px auto;
#header-box{
margin:50px auto 0px auto;
}   
}
#slideshow-container{
width:1090px;   
margin:30px auto 48px auto;
}
#headerimage-container{
width:1090px;   
margin:48px auto 0px auto;
}
#slide-top, #headerimage-top{
width:1090px;
height:99px;
background-image:url(../images/bg-top-slide2.png);
background-repeat:no-repeat;
position:absolute;
z-index:100;
float:left;
4

0 に答える 0