У меня есть следующий HTML-код:
<div id="event_create">
<img src="WEB-INF/images/Classifieds/create_blurred_135x135.png"
name="createbutton"
onmouseover="buttondown('createbutton')"
onmouseout="buttonup('createbutton')"
onclick="buttonclick('createbutton')"
alt="Create Classified Image"
class="cameo">
<h2 class="cameo_heading" >Create Ad</h2>
<ul type="circle">
<li class="cameo_content">Content goes here</li>
<li class="cameo_content">Content goes here</li>
<li class="cameo_content">Content goes here</li>
<li class="cameo_content">Content goes here</li>
</ul>
</div>
, который поддерживается следующим CSS:
#event_create {
width:100%;
height:143px;
border: 1px solid green;
background-color: red;
}
.cameo {
float:left;
margin-left:4px;
margin-top:4px;
border:1px solid black;
}
.cameo_heading {
margin-left: 200px;
margin-top: 3px;
font-size:1.1em;
color:gray;
}
.cameo_content {
margin-left: 200px;
font-size:12px;
font-family: Verdana,Arial,Helvetica,sans-serif;
line-height:1.2em;
}
ul {
list-style-type:circle;
padding-left: 0;
margin-left: 0;
border: 1px dashed black;
}
li {
padding-left: 7px;
margin-bottom: 5px;
}
Код правильно отображается в Firefox и Safari. Однако IE дополняет область под изображением дополнительным пространством и отбрасывает весь дизайн. Изображение на самом деле 135 х 135 пикселей. Может кто-нибудь помочь, пожалуйста?