PDA

View Full Version : Css problem when looping Div box



xerogee
Dec 24th, 2011, 03:27 PM
So I have a a div that forms a box around dynamic content from a database. When I loop around the box div the box separates fine on the first 2 boxes but all other boxes after that seems to not butt up against the other with about 10 px of space between them and has more space then the previous two boxes. Keep in mind that the middle of each box is expandable so some boxes may not have as much content as the others and will expand accordingly. I am hoping someone has had this happen and could point me in the right direction on how to makes this right. code below:

CSS:


#viewinfo{
font:bold 11px/21px Arial,Helvetica,sans-serif FFFFFF;
font-size:12px;
background:url(/images/read_more_bg.gif) 0 0 no-repeat;
width:76px;
height:21px;
text-align:center;
float:right;
padding-right:15px;
position:inherit
}
#title{
position:absolute;
left:13px;
top:3px;
width:150px;
height:0;
font-family:Arial,Helvetica,sans-serif;
font-size:14px
}
div.expandable_note_box{
width:502px;
min-height:20px;
background-image:url("/images/top.jpg");
background-position:top left;
background-repeat:no-repeat;
padding-top:20px;
font-size:80%
}
#searchContainer{
position:relative;
width:700px
}
div.expandable_note_box div.middle{
width:502px;
background-image:url("/images/middle.jpg");
background-position:center;
background-repeat:repeat-y
}
#company{
position:absolute;
left:90px;
top:42px;
width:165px;
height:58px;
font-family:Arial,Helvetica,sans-serif;
font-size:10px
}
a:active{
text-decoration:none
}
#facebook{
position:absolute;
left:345px;
top:30px;
width:34px;
height:36px
}
#pic2{
position:absolute;
height:50px;
width:60px;
top:35px;
left:15px
}
#pic{
position:absolute;
left:22px;
top:42px;
width:54px;
height:58px
}
#ratings{
position:absolute;
left:397px;
top:3px;
width:66px;
height:15px
}
#comp{
position:absolute;
height:60px;
width:200px;
left:70px;
top:0
}
#banner{
position:absolute;
float:right;
left:550px;
top:20px;
width:164px;
height:600px;
z-index:20
}
#story{
position:absolute;
left:0;
top:0;
width:503px;
height:100px
}
#port{
font:bold 11px/21px Arial,Helvetica,sans-serif FFFFFF;
font-size:12px;
background:url(/images/read_more_bg.gif) 0 0 no-repeat;
width:76px;
height:21px;
text-align:center;
float:right;
padding-right:15px
}
#search{
position:relative;
width:699px;
background-color:#e8e8d0;
height:283px
}
.style2{
color:#FFF
}
#invitebid{
font:bold 11px/21px Arial,Helvetica,sans-serif FFFFFF;
font-size:12px;
background:url(/images/read_more_bg.gif) 0 0 no-repeat;
width:76px;
height:21px;
text-align:center;
float:right;
padding-right:0;
padding-top:0
}
.style1{
color:#000
}
div.expandable_note_box div.inside{
padding-left:15px;
padding-top:80px;
width:450px;
font-size:10px
}
#youtube{
position:absolute;
left:436px;
top:30px;
width:33px;
height:35px
}
#twitter{
position:absolute;
left:391px;
top:30px;
width:35px;
height:35px;
border:0
}

Div box:


<div id="search" class="search">
<div id="story" >
<div class="expandable_note_box">
<div class="middle">
<div class="inside">
<div id="pic2">
<cfif roleid EQ 2>
<cfif profileImage NEQ ''>
<img src="#application.path.user_profile_images#/#ProfileImage#" width="60" height="60" />
<cfelse>
<img src="#application.path.img#/profile-photo.png" width="60" height="60" />
</cfif>
<cfelse>
<cfif profileLogo NEQ ''>
<img src="#application.path.user_logo_images#/#profileLogo#" width="60" height="36" />
<cfelse>
<img src="#application.path.img#/blank_logo.png" width="60" height="38" />
</cfif>
</cfif>
<div id="comp">
<span class="company">
#IIF(roleID EQ '2',DE('#ucase(FullName)#'),DE('#uCase(CompName)#'))#
<br />
#IIF(GetUseraccount.name EQ 'Free',DE('
<a href="?app=membership&view=info">
To View Upgrade Account
</a>
'),DE('(#left(Phone1,3)#)#Mid(Phone1,3,3)#-#Right(Phone1,4)#'))#
<br />
#uCase(City)#
<br />
#ucase(StateCode)#
</span>
</div>
</div>
<cfif roleid EQ 2>
<span class="style1">
#LEFT(serviceDesc,1000)#....
</span>
<cfelse>
<span class="style1">
#LEFT(compDesc,1000)#....
</span>
</cfif>
<br />
<br />
<div id="title" class="title">
<span class="topTxt style2">
<strong>
#UCase(Title)#
</strong>
</span>
</div>
<div class="contactsubmitbutton" id="invitebid">
<a href="##" style="color:##ffffff">
Invite Bid
</a>
</div>
<div id="ratings" class="ratings">
<cfif Round(rating)is 0>
<img src="#application.path.img#/pro_star-zero.png" alt="Profile Rating">
<cfelseif Round(rating)is 1 >
<img src="#application.path.img#/pro_starrating1.png" alt="Profile Rating">
<cfelseif Round(rating)is 2 >
<img src="#application.path.img#/pro_starrating2.png" alt="Profile Rating">
<cfelseif Round(rating)is 3 >
<img src="#application.path.img#/pro_starrating3.png" alt="Profile Rating">
<cfelseif Round(rating)is 4 >
<img src="#application.path.img#/pro_starrating4.png" alt="Profile Rating">
<cfelseif Round(rating)is 5 >
<img src="#application.path.img#/pro_starrating5.png" alt="Profile Rating">
</cfif>
</div>
<div id="facebook" class="facebook">
#IIF(urlFacebook NEQ '',DE('
<a href="#urlFacebook#" target="_blank">
'),DE(''))#
<img src="#application.path.img#/icon_facebook_30x30.png" alt="facebook" width="30" height="30" border="0" class="pngimg" />
</a>
</div>
<div id="twitter" class="twitter">
#IIF(urltwitter NEQ '',DE('
<a href="#urltwitter#" target="_blank">
'),DE(''))#
<img src="#application.path.img#/icon_twitter_30x30.png" alt="twitter" width="30" height="30" border="0" class="pngimg" />
</a>
</div>
<div id="youtube" class="you tube" >
#IIF(urlyoutube NEQ '',DE('
<a href="#urlyoutube#" target="_blank">
'),DE(''))#
<img src="#application.path.img#/icon_youtube_30x30.png" alt="you tube" width="30" height="30" border="0" class="pngimg" />
</a>
</div>
<div class="contactsubmitbutton" id="viewinfo">
<a style="color:##ffffff" href="?app=display&view=profile&profileID=#cfusion_encrypt(profileID,"Request.PasswordKey")#"> Profile </a>
</div>
</div>
<img src="#application.path.img#/bottom.jpg" alt="bottom" width="502" height="25" />
</div>
</div>
</div>
</div>



Did not include the loop but of course the loop would be between the start and end of this box. Thanks in advance..