-1

私のページはChromeとFirefoxでうまく機能しますが、IEではうまくデコードされません。ほとんどのバグを修正しましたが、解決できると思われるバグがあります。現在、画像が表示され、と

その隣にすべてが集まっています。テーブルは正常に表示されます。コードは次のとおりです。

<div id="page">
            <div id="slider">
                <!-- Here is where the pictures for the slider go -->
                <div id="PhotoSlider">
                    <ul class="bjqs">
                        <li><img src="images/test2.png"></img></li>
                        <li><img src="images/test1.png"></img></li>                        
                    </ul>
                </div>
            <!-- Java Script for the slider -->
            <script>                 
                $("#PhotoSlider").bjqs({
                    'height' : 286,
                    'width' : 1000,
                    'animationDuration' : 800,
                    'showMarkers' : true,
                    'useCaptions' : false,
                    'keyboardNav' : false,
                    'showControls' : false
                });
            </script>
            </div>
            <div id="content">
                <div class="box">
                    <h1>Welcome!</h1><br/>
                        <p></p>
                        <p></p>
                </div>  
            </div>  

            <div id="contentRight">
                <p></p>
                <p></p>
            </div>
            <!-- This is the newsletter form -->
            <div id="sidebar">
                <img align="left" src="images/kidsSmiling1.png"></img><br>
                <h2>Newsletter</h2>
                <p>Sign up to receive the lastest news and special offers</p>
                <table>             
                    <tr>
                        <td>First Name<req>*</req>&nbsp;</td>
                        <td><input id="firstName" name="firstName" type="text" style="width:180"/>
                    </tr>
                    <tr>
                        <td>Last Name<req>*</req>&nbsp;</td>
                        <td><input id="lastName" name="lastName" type="text" style="width:180"/>
                    </tr>
                    <tr>
                        <td>Email<req>*</req>&nbsp;</td>
                        <td><input id="email" name="email" type="text" style="width:180"/>
                    </tr>
                </table>
                <p align="middle"><input align="middle" type="submit" value="Submit" onclick="save()"  style="width:65"></P>
                <p><req>*</req>&nbsp;Required fields</p>                
            </div>
            <br class="clearfix" />
            <!-- Social media div -->
            <div id="media">
                <img align="right" src="images/facebookLogo.png"></img> <img align="right" src="images/twitterLogo.png"></img>
            </div> 
        </div>
    </div>
    <!-- Footer -->
    <div id="footer">
        Copyright &copy; 2012 Kaysville Dental | <a href="mailto:ToothDocPaul@msn.com?Subject=Customer Inquiry">Email Us</a> | Phone:(800) 376-2241 | 690 Main Street. Kaysville, Utah
    </div>

皆さんが見ることができるようにサイトをライブにしたかったのですが、残念ながらローカルホストだけにあります...問題は下の画像とテキストにあります。何らかの理由で画像が表示され、テキストはすべて左側にあり、独自の段落にはありません。その部分のCSSは次のとおりです。

#sidebar {
background: white;
padding: 0px 5px 0px 50px;
margin-left: 0;
border-right: 1px solid #C0C0C0 ;
float: left;
width: 312px;
}


#sidebar p {
font-size: 12px;
margin-bottom: 0.5em
}

#sidebar img{
margin-bottom: 1.5em;
}
#sidebar req {
font-size: 12px;
color: red;
}

#sidebar td{
padding: 0px 0px 10px 0px;
font-size: 14px;
}

#sidebar h2{
text-transform: uppercase;
}

#contentRight {
background: white;
padding: 0px 50px 0px 0px;
float: right;
width: 550px;
}

最後の「contentRight」はサイドバーの反対側（右側）にあるdivなので、基本的には画像と小さなフォームが下にあるサイドバーがあり、右側にはテキストだけのセクションがあります

4

2 に答える 2

0

タグに割り当ててfloat: leftから<img>タグに割り当ててみてください...float: left; width: 100%;<h2>

証明: http://jsfiddle.net/Y9yf8/3/ =)

PSまたはHuangismが言ったように...

于 2012-06-20T20:10:31.560 に答える
0

各行の 2 番目のセルに td 終了タグがなく、img タグの align="left" も削除されます

http://jsfiddle.net/Y9yf8/1/を参照

于 2012-06-20T20:08:57.967 に答える