1
私はページデザイン上でCSSを更新しています。イメージの周りに境界線を置いて、イメージと境界の間に7pxのパディングを入れようとしています。 FirefoxとChromeでは正常に動作しているようですが、IEではボーダーが画像に直接表示され、パディングはありません。助言がありますか？CSSパディングはFFとChromeでは表示されますが、IE 8では表示されません。
CSSコード：
img.right {
float: right;
margin: 0px;
border: 1px solid #999;
padding: 7px;
margin-left: 10px;
margin-bottom: 5px;
}
HTML：
<img src="images/homepage_challengecoin.jpg" class="right">
編集：フィードバックのおかげで、私は、@JackMcEが示唆したように、画像タグにスペースおよびバックスラッシュを追加することで周りのおもちゃが、私はまだ問題があります。私は、ページコードのほとんどを投稿して、自分のスタイルに紛らわしいものがあるかどうかを確認したいと考えました。そのため、ここでは（申し訳ありませんが、私はそれは少し厄介だ知っている）ページのコードのより完全な作品です：
：<HTML>
<HEAD>
<TITLE>Health Campaign</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="_css/main.css">
<STYLE type="text/css">
.centeredImage
{
text-align:center;
margin-top:0px;
margin-bottom:0px;
padding:0px;
position:relative;
left:65px;
}
LI {
color: black; /* text color is white */
background: white; /* Content, padding will be blue */
margin: 12px 12px 12px 12px;
padding: 12px 12px 12px 12px; /* Note 0px padding right */
list-style: none /* no glyphs before a list item */
/* No borders set */
}
.thumbnail
{
float:center;
margin:auto;
}
div.figureRight {
float: right;
border: solid;
border-width: 1px; /* sets border width on all sides */
border-color: #333333;
margin: 0.3em;
padding: 0.4em;
}
div.figureLeft {
float: left;
border: none;
border-width: 1px; /* sets border width on all sides */
border-color: #333333;
margin: 0.1em;
padding: 0.1em;
}
div.figureLeft p {
text-align: center;
font-style: italic;
font-size: 10 px;
text-indent: 0;
}
H1 {
font-size:1.3em;
color:black;
text-align:center;
}
H2
{
font-size:14px;
color:black;
text-align:left;
}
H3
{
font-size:14px;
color:black;
text-align:center;
}
LI.withborder {
border-style: solid;
border-width: 1px; /* sets border width on all sides */
border-color: #333333;
text-align:justify;
width:600px;
padding: 20px;
position:relative;
left:-30px;
margin-left: -15px;
margin-right: -15px;
}
LI.rightbar {
border-style: none;
text-align:justify;
width:150px;
position:relative;
left:-55px;
}
div#footer{
position:absolute;
top:1000;
left:0;
width:100%;
height:footer-<length>;
}
</STYLE>
</HEAD>
<BODY background="images/background3_long2.jpg">
<div id="wrap">
<div id="main">
<TABLE WIDTH=900 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD COLSPAN=4 align="center">
<a href="index.html"><IMG SRC="images/topGraphic5.jpg" border="0"></a> </TD>
</TR>
<TR>
<TD valign="top">
</TD>
<TD ROWSPAN=11 valign="top" width="630">
<UL>
<LI class="withborder"><SPAN style="FONT-SIZE: 10pt; COLOR: #000000; FONT-FAMILY: Cambria, "Hoefler Text", Garamond; line-height: 1.3em;">
<br>
<img src="images/HealthyHeroes_Campaign.jpg" class="left" />
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <!-- temporary line breaks to hold height of box -->
</span></font>
</ul>
<img src="images/dots10.png">
<UL>
<LI class="withborder"><SPAN style="FONT-SIZE: 10pt; COLOR: #000000; FONT-FAMILY: Cambria, "Hoefler Text", Garamond; line-height: 1.3em;">
<br>
<h2>Events and Conferences</h2>
<img src="images/HealthyHeroes_Events.jpg" class="center" />
<img src="images/HealthyHeroes_Events2.jpg" class="center" />
<br><br>
</span></font>
</ul>
</TD>
<td rowspan=11 valign="top" width="156">
<br>
</td>
</TR>
<TR>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=171 HEIGHT=79></TD>
</TR>
</TABLE>
</div>
</div>
<div id="footer">
<IMG SRC="images/spacer.gif" width="10"><IMG SRC="images/footer.jpg">
</div>
</BODY>
</HTML>
そして、ここでは、私は新しい編集のために取り組んできた外部スタイルシートです
img.left {
padding: 7px;
float: left;
border: 1px solid #999;
margin-top: 0px;
margin-left: 0px;
margin-right: 10px;
margin-bottom: 5px;
}
img.right {
float: right;
margin: 0px;
border: 1px solid #999;
padding: 7px;
margin-left: 10px;
margin-bottom: 5px;
}
img.center {
margin: 5px;
border: 1px solid #999;
padding: 7px;
margin-top: 0px;
}
どのような考えですか？フィードバックに感謝します。
私のためにうまくいくhttp://jsfiddle.net/VcQ88/ – Sotiris
Internet Explorerのどのバージョンですか？ –