Forum Moderators: not2easy

Message Too Old, No Replies

Image inside a box in IE

         

nsantori

2:41 pm on Mar 4, 2009 (gmt 0)

10+ Year Member



I have created a box to separate articles on my website. It works fine in Firefox & Opera, but in IE the box encloses only the text, while the image stays outside the box. Here is my css code for the box.
.box{
border: thin solid red;
margin-left: 15px;
margin-right: 15px
width: 50%;
minimum-height: 110px;
overflow:hidden;
background-color: #FFF5EE;
background: #FFF5EE;
font-family: "Verdana";
font-size: 12pt;
font-style: normal;
font-weight: normal;
text-align: justify;
text-indent: 35px;
}
How can I fix the problem? I added "minimum-height" slightly larger than the thumbnail size (they are all 100X100 pixels) but it made no difference.

Thanks, Nick

CSS_Kidd

2:51 pm on Mar 4, 2009 (gmt 0)

10+ Year Member



What is the HTML layout?

CSS_Kidd

2:56 pm on Mar 4, 2009 (gmt 0)

10+ Year Member



I tested what you have already, and it works fine. But with out seeing how you are laying it out in the HTML I can't tell you why it isn't working for you.

nsantori

10:22 am on Mar 5, 2009 (gmt 0)

10+ Year Member



<div class="box">
<a href="Images/FleaMarket800.jpg">
<img src="Images/FleaMarket001Th.jpg"
alt="Flea Market" hspace="10" vspace="10"
border="0" align="left">
</a>
<center>
<h class="b">specifics</h>
</center>
<p>
specifics <font color="#FF0000">specifics</font>more specifics
</p>
</div>

Additional Css

h.b {
text-align: center;
vertical-align: top;
top: 0;
bottom: 0;
left: auto;
right: auto;
font-family: "Broadway";
font-size: 16pt;
color: #0000FF; /* blue*/
font-style: bold;
font-weight: normal;

}

p{
vertical-align: top;
top: 0;
bottom: 0;
left: auto;
right: auto;
font-family: "Verdana";
font-size: 12pt;
font-style: normal;
font-weight: normal;
padding-left: 40px;
padding-right: 40px;
text-align: justify;
text-indent: 35px;
}

[edited by: swa66 at 10:53 am (utc) on Mar. 5, 2009]
[edit reason] removal of specifics [/edit]

oluoch28394

7:02 pm on Mar 5, 2009 (gmt 0)

10+ Year Member



it works fine for me too, however the image does not fit in the div. I tested with a similar sized image and it the bottom of the image overlaps. I think it's coz IE does not recognize min-height attribute, so try setting a specific height, i would suggest 120px since you specify a vspace of 10px, you need an extra 10px on top and below the image for it to fit.