CSS padding displays in FF and Chrome, but not in IE 8?
I'm updating the CSS on a page design, trying to put borders around my images, with 7px of padding between the image and the border. It seems to be working fine in Firefox and Chrome, but IE displays the border directly against the image, with no padding. Any suggestions?
CSS code:
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">
Edit: Thanks for the feedback, I toyed around with adding the space and backslash to the image tag, as @JackMcE suggested, but I'm still having issues. I thought I might post most of the page code, to see if there is some conflict in my styles that I have been missing. As such, here is a fuller piece of the page code (sorry, I know it's a bit messy):
<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>
And here is the external stylesheet I've been working on for the new edits:
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;
}
Any thoughts? Thanks much for the feedback.
Make sure you're not in quirks mode. I believe in quirks this won't work but with a good doctype you should be fine.
Could be because you are missing the <img src="" /> you are missing the slash at the end of the image element. IE being the crap that it is it could be expecting something more then causing it to compile the image weird and not showing the boarders.
Chrome and Firefox probably have no problem with it and run it just fine for some reason. Try that and see if you still have issues.
Otherwise I don't see any issues in your code.
加载中,请稍侯......
精彩评论