nealrm
03-29-2009, 12:52 PM
I have an image that is overflowing its grandparents div. It doesn't do this in IE but it does in all the other browsers. Here is a link to the page (Ignore the colors I am using them to trouble shoot): click here
(http://www.houseviewonline.com/Search_all2.asp?srch=lake%20view)
Any help would be appreciated.
CSS Code:
#wrap #main {
text-align:left;
margin-bottom: 5px;
padding-bottom: 2px;
margin-left:195px;
margin-right:195px;
}
#wrap #main #ListingTitle {
background-image: url(../Webimages/Title-Bar.gif);
font-family: "Arial Rounded MT Bold", Arial, Verdana;
font-size:0.8em;
height: 20px;
border:none;
text-align:left;
}
#wrap #main #ListingTitle #Photo {
display:inline-block;
width:20%;
text-align: center;
vertical-align: middle;
color: #000000;
Float:left;
margin-right:5px;
}
#wrap #main #ListingTitle #MLS {
display: inline-block;
width: 12%;
text-align: center;
vertical-align: middle;
color: #000000;
padding-left: 3%;
Float:left;
}
#wrap #main #ListingTitle #Price {
display: inline-block;
width: 12%;
text-align: center;
vertical-align: middle;
color: #000000;
Float:left;
}
#wrap #main #ListingTitle #Location {
display: inline-block;
width: 17%;
text-align: center;
vertical-align: middle;
color: #000000;
Float:left;
}
#wrap #main #ListingTitle #Bed {
display: inline-block;
width: 10%;
text-align: center;
vertical-align: middle;
color: #000000;
Float:left;
}
#wrap #main #ListingTitle #Bath {
display: inline-block;
width: 10%;
text-align: center;
vertical-align: middle;
color: #000000;
padding-left: 5%;
Float:left;
}
#wrap #main #Search_Info {
font-family: "Arial Rounded MT Bold", Arial, Verdana;
font-size:0.8em;
padding:0px;
clear:none;
text-align:left;
margin-top: 0px;
margin-bottom: 0px;
width:100%;
background-color:#999900;
}
#wrap #main #Search_Info #Photo {
width: 20%;
display:inline-block;
margin-right: 5px;
Float:left;
background-color:#00FF66;
border:#FF0000 medium;
}
#wrap #main #Search_Info #Photo img {
width: 100%;
}
#wrap #main #Search_Info #MLS_Info {
display: inline-block;
width: 12%;
text-align: center;
vertical-align: top;
color: #000000;
padding-left: 3%;
Float:left;
clear:none;
}
#wrap #main #Search_Info #Price_Info {
display: inline-block;
width: 12%;
text-align: center;
vertical-align: top;
color: #000000;
Float:left;
}
#wrap #main #Search_Info #Location_Info {
display: inline-block;
width: 17%;
text-align: center;
vertical-align: top;
color: #000000;
Float:left;
}
#wrap #main #Search_Info #Bed_Info {
display: inline-block;
width: 10%;
text-align: center;
vertical-align: top;
color: #000000;
Float:left;
}
#wrap #main #Search_Info #Bath_Info {
display: inline-block;
width: 10%;
text-align: center;
vertical-align: top;
color: #000000;
padding-left: 5%;
Float:left;
}
#wrap #main #Search_Info #Description {
margin-top: 15px;
}
#SearchString {
background-color: #D2D2D2;
}
Page Code:
Loop Statement
{a bunch of code here reading and setting the variables}
If ShowIt Then
%>
<Div id="main">
<Div id="ListingTitle">
<div id="Photo">Photo</div>
<Div id="MLS">MLS No</Div>
<Div id="Price">Price</Div>
<Div id="Location">Location</Div>
<Div id="Bed">Bedrooms</Div>
<Div id="Bath">Bathrooms</Div>
</Div>
<div id="Search_Info">
<div id="Photo">
<a><img src="http://www.HouseViewOnline.com/images/<%=strline(0)%>/<%=strline(0)%>sm.jpg"></a>
<a>Click for more information</a>
</div>
<Div id="MLS_Info"><%=strline(0)%></Div>
<Div id="Price_Info"><%=FormatCurrency(strline(1),0,0)%></Div>
<Div id="Location_Info"><%=strline(3)%> MO</Div>
<Div id="Bed_Info"><%=strline(6)%></Div>
<Div id="Bath_Info"><%=strline(7)%></Div>
<div id="Description"><br><%=strline(4)%></div>
</div>
</Div>
<%
End if
:
:
Loop end
(http://www.houseviewonline.com/Search_all2.asp?srch=lake%20view)
Any help would be appreciated.
CSS Code:
#wrap #main {
text-align:left;
margin-bottom: 5px;
padding-bottom: 2px;
margin-left:195px;
margin-right:195px;
}
#wrap #main #ListingTitle {
background-image: url(../Webimages/Title-Bar.gif);
font-family: "Arial Rounded MT Bold", Arial, Verdana;
font-size:0.8em;
height: 20px;
border:none;
text-align:left;
}
#wrap #main #ListingTitle #Photo {
display:inline-block;
width:20%;
text-align: center;
vertical-align: middle;
color: #000000;
Float:left;
margin-right:5px;
}
#wrap #main #ListingTitle #MLS {
display: inline-block;
width: 12%;
text-align: center;
vertical-align: middle;
color: #000000;
padding-left: 3%;
Float:left;
}
#wrap #main #ListingTitle #Price {
display: inline-block;
width: 12%;
text-align: center;
vertical-align: middle;
color: #000000;
Float:left;
}
#wrap #main #ListingTitle #Location {
display: inline-block;
width: 17%;
text-align: center;
vertical-align: middle;
color: #000000;
Float:left;
}
#wrap #main #ListingTitle #Bed {
display: inline-block;
width: 10%;
text-align: center;
vertical-align: middle;
color: #000000;
Float:left;
}
#wrap #main #ListingTitle #Bath {
display: inline-block;
width: 10%;
text-align: center;
vertical-align: middle;
color: #000000;
padding-left: 5%;
Float:left;
}
#wrap #main #Search_Info {
font-family: "Arial Rounded MT Bold", Arial, Verdana;
font-size:0.8em;
padding:0px;
clear:none;
text-align:left;
margin-top: 0px;
margin-bottom: 0px;
width:100%;
background-color:#999900;
}
#wrap #main #Search_Info #Photo {
width: 20%;
display:inline-block;
margin-right: 5px;
Float:left;
background-color:#00FF66;
border:#FF0000 medium;
}
#wrap #main #Search_Info #Photo img {
width: 100%;
}
#wrap #main #Search_Info #MLS_Info {
display: inline-block;
width: 12%;
text-align: center;
vertical-align: top;
color: #000000;
padding-left: 3%;
Float:left;
clear:none;
}
#wrap #main #Search_Info #Price_Info {
display: inline-block;
width: 12%;
text-align: center;
vertical-align: top;
color: #000000;
Float:left;
}
#wrap #main #Search_Info #Location_Info {
display: inline-block;
width: 17%;
text-align: center;
vertical-align: top;
color: #000000;
Float:left;
}
#wrap #main #Search_Info #Bed_Info {
display: inline-block;
width: 10%;
text-align: center;
vertical-align: top;
color: #000000;
Float:left;
}
#wrap #main #Search_Info #Bath_Info {
display: inline-block;
width: 10%;
text-align: center;
vertical-align: top;
color: #000000;
padding-left: 5%;
Float:left;
}
#wrap #main #Search_Info #Description {
margin-top: 15px;
}
#SearchString {
background-color: #D2D2D2;
}
Page Code:
Loop Statement
{a bunch of code here reading and setting the variables}
If ShowIt Then
%>
<Div id="main">
<Div id="ListingTitle">
<div id="Photo">Photo</div>
<Div id="MLS">MLS No</Div>
<Div id="Price">Price</Div>
<Div id="Location">Location</Div>
<Div id="Bed">Bedrooms</Div>
<Div id="Bath">Bathrooms</Div>
</Div>
<div id="Search_Info">
<div id="Photo">
<a><img src="http://www.HouseViewOnline.com/images/<%=strline(0)%>/<%=strline(0)%>sm.jpg"></a>
<a>Click for more information</a>
</div>
<Div id="MLS_Info"><%=strline(0)%></Div>
<Div id="Price_Info"><%=FormatCurrency(strline(1),0,0)%></Div>
<Div id="Location_Info"><%=strline(3)%> MO</Div>
<Div id="Bed_Info"><%=strline(6)%></Div>
<Div id="Bath_Info"><%=strline(7)%></Div>
<div id="Description"><br><%=strline(4)%></div>
</div>
</Div>
<%
End if
:
:
Loop end