PDA

View Full Version : Stopping image overflow in CSS



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)%>&nbsp;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

vangogh
03-29-2009, 06:18 PM
I have a short answer and a long answer.

The short: Try adding overflow: auto to #wrap #main. That should get the images and the rest of the info to drop into place below each other.

The longer answer: Sorry to say, but your code needs a lot of improvement. And the real solution is to redo much of it. I think there are likely errors throughout that could be causing issues even if they appear to work.

Right now you're using ids when you mean to be using classes. ids are meant to be used once and only once on a page. classes can appear many times on the page. Things like

#ListingTitle
#Photo
#MLS
etc should be

.ListingTitle
.Photo
.MLS

and set as class="ListingTitle" etc in your html

Also I think we scared you off of tables where it's ok to use them. I would actually use a table to present this content since it is tabular data. I'm guessing the content is being pulled from a database. It's ok to use divs here as well. Just one example where a table would have been fine.

Also use all lowercase for tags. (technically not required in HTML) use div instead of DIV or Div and table instead of TABLE. The caps won't work at all in xhtml, though they do work in html.

I think most of your code works, but it's a lot more complex than it needs to be. What happens then is you rely on the browser to fix some things. IE is more lax so it will fix things for you, whereas the other browsers will do as you say and not try to guess at what you meant. Often that leads to implementing browser specific fixes that fix things for that browser but break them in another. It's best to develop to the standards and tweak for the browsers that don't adhere to the standards, mainly being older versions of IE.

nealrm
03-29-2009, 10:19 PM
Thanks, the Overflow:auto worked.

Don't worry about scaring me off tables, this project was an experiment to see for myself how well this would work with div. I'm going to finish it out, but I think tables would work better here.