PDA

View Full Version : not sitting in div


richcodesign
06-26-2009, 05:07 PM
Hello,

this has baffled me all day now!
I have a CSS photo gallery that refuses to sit in the div "booking content"
If i type text into this div, that sits in and drops the footer down, but the gallery wont.

Please see attached the issue.
Code below:

<body class="oneColLiqCtrHdr">

<div id="container">
<div id="mainContent">
<div id="house"></div>
<div id="menubar"><img src="images/menu.jpg" width="704" height="101" border="0" /></div>
<div id="bookingcontent">
<div class="photo">
<ul class="topic">
<li><a class="set" href="#Portraits">Portraits<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="lbox/portrait1.jpg"><img src="lbox/portrait2a.jpg" alt="" title="" /></a></li>
<li><a href="lbox/portrait2.jpg"><img src="lbox/portrait2a.jpg" alt="" title="" /></a></li>
<li><a href="lbox/portrait3.jpg"><img src="lbox/portrait3a.jpg" alt="" title="" /></a></li>
<li><a href="lbox/portrait4.jpg"><img src="lbox/portrait4a.jpg" alt="" title="" /></a></li>
<li><a href="lbox/portrait5.jpg"><img src="lbox/portrait5a.jpg" alt="" title="" /></a></li>
<li><a href="lbox/portrait6.jpg"><img src="lbox/portrait6a.jpg" alt="" title="" /></a></li>
<li><a href="lbox/portrait7.jpg"><img src="lbox/portrait7a.jpg" alt="" title="" /></a></li>
<li><a href="lbox/portrait8.jpg"><img src="lbox/portrait8a.jpg" alt="" title="" /></a></li>
<li><a href="lbox/portrait9.jpg"><img src="lbox/portrait9a.jpg" alt="" title="" /></a></li>
<li><a href="lbox/portrait10.jpg"><img src="lbox/portrait10a.jpg" alt="" title="" /></a></li>
<li><a href="lbox/portrait11.jpg"><img src="lbox/portrait11a.jpg" alt="" title="" /></a></li>
<li><a href="lbox/portrait12.jpg"><img src="lbox/portrait12a.jpg" alt="" title="" /></a></li>
<li><a href="lbox/portrait13.jpg"><img src="lbox/portrait13a.jpg" alt="" title="" /></a></li>
<li><a href="lbox/portrait14.jpg"><img src="lbox/portrait14a.jpg" alt="" title="" /></a></li>
<li><a href="lbox/portrait15.jpg"><img src="lbox/portrait15a.jpg" alt="" title="" /></a></li>
<li><a href="lbox/portrait16.jpg"><img src="lbox/portrait16a.jpg" alt="" title="" /></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul></div>
</div>

<br style="clear:both"/>

<div id="footer"></div>
<!-- end #mainContent --></div>
<!-- end #container --></div>
</body>
</html>

Corrosive
06-26-2009, 07:18 PM
Hello,

this has baffled me all day now!
I have a CSS photo gallery that refuses to sit in the div "booking content"
If i type text into this div, that sits in and drops the footer down, but the gallery wont.

Please see attached the issue.
Code below:

<body class="oneColLiqCtrHdr">

<div id="container">
<div id="mainContent">
<div id="house"></div>
<div id="menubar"><img src="images/menu.jpg" width="704" height="101" border="0" /></div>
<div id="bookingcontent">
<div class="photo">
<ul class="topic">
<li><a class="set" href="#Portraits">Portraits<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="lbox/portrait1.jpg"><img src="lbox/portrait2a.jpg" alt="" title="" /></a></li>
<li><a href="lbox/portrait2.jpg"><img src="lbox/portrait2a.jpg" alt="" title="" /></a></li>
<li><a href="lbox/portrait3.jpg"><img src="lbox/portrait3a.jpg" alt="" title="" /></a></li>
<li><a href="lbox/portrait4.jpg"><img src="lbox/portrait4a.jpg" alt="" title="" /></a></li>
<li><a href="lbox/portrait5.jpg"><img src="lbox/portrait5a.jpg" alt="" title="" /></a></li>
<li><a href="lbox/portrait6.jpg"><img src="lbox/portrait6a.jpg" alt="" title="" /></a></li>
<li><a href="lbox/portrait7.jpg"><img src="lbox/portrait7a.jpg" alt="" title="" /></a></li>
<li><a href="lbox/portrait8.jpg"><img src="lbox/portrait8a.jpg" alt="" title="" /></a></li>
<li><a href="lbox/portrait9.jpg"><img src="lbox/portrait9a.jpg" alt="" title="" /></a></li>
<li><a href="lbox/portrait10.jpg"><img src="lbox/portrait10a.jpg" alt="" title="" /></a></li>
<li><a href="lbox/portrait11.jpg"><img src="lbox/portrait11a.jpg" alt="" title="" /></a></li>
<li><a href="lbox/portrait12.jpg"><img src="lbox/portrait12a.jpg" alt="" title="" /></a></li>
<li><a href="lbox/portrait13.jpg"><img src="lbox/portrait13a.jpg" alt="" title="" /></a></li>
<li><a href="lbox/portrait14.jpg"><img src="lbox/portrait14a.jpg" alt="" title="" /></a></li>
<li><a href="lbox/portrait15.jpg"><img src="lbox/portrait15a.jpg" alt="" title="" /></a></li>
<li><a href="lbox/portrait16.jpg"><img src="lbox/portrait16a.jpg" alt="" title="" /></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul></div>
</div>

<br style="clear:both"/>

<div id="footer"></div>
<!-- end #mainContent --></div>
<!-- end #container --></div>
</body>
</html>

Can you post your CSS as well plz?

richcodesign
06-29-2009, 08:38 AM
a {color:#000;}
a:hover {text-decoration:none;}
a:visited {color:#000;}


.photo {width:635px; text-align:left; position:relative; margin:0 auto;}

.photo ul.topic {padding:0; margin:0; list-style:none; width:635px; height:auto; position:relative; z-index:10;}

.photo ul.topic li {display:block; width:125px; height:31px; float:left;}
.photo ul.topic li a.set {display:block; font-size:11px; width:124px; height:30px; text-align:center; line-height:30px; color:#000; text-decoration:none; border:1px solid #fff; border-width:1px 1px 0 0; background:#ccc; font-family:verdana, arial, sans-serif;}

.photo ul.topic li a ul,
.photo ul.topic li ul
{display:none;}

.photo ul.topic li.active a
{color:#000; background:#bbb;}

.photo ul.topic li a:hover,
.photo ul.topic li:hover a
{color:#fff; background:#aaa;}

.photo ul.topic li.active ul
{display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:375px; background:#ddd; width:464px; padding:40px 60px; border:20px solid #bbb; z-index:1;}

.photo ul.topic li a:hover ul,
.photo ul.topic li:hover ul
{display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:375px; background:#ddd; width:464px; padding:40px 60px; border:20px solid #aaa; z-index:100;}

.photo ul.topic li ul li
{display:inline; width:112px; height:87px; float:left; border:1px solid #fff; margin:1px;}

.photo ul.topic li ul li a
{display:block; width:110px; height:85px; cursor:default; float:left; text-decoration:none; background:#444; border:1px solid #888;}

.photo ul.topic li ul li a img
{display:block; width:100px; height:75px; border:5px solid #eee;}

.photo ul.topic li a:hover ul li a:hover,
.photo ul.topic li:hover ul li a:hover
{white-space:normal; position:relative;}

.photo ul.topic li a:hover ul li a:hover img,
.photo ul.topic li:hover ul li a:hover img
{position:absolute; left:-50px; top:-32px; width:200px; height:150px; border-color:#fff;}

Corrosive
06-29-2009, 08:45 AM
a {color:#000;}
a:hover {text-decoration:none;}
a:visited {color:#000;}


.photo {width:635px; text-align:left; position:relative; margin:0 auto;}

.photo ul.topic {padding:0; margin:0; list-style:none; width:635px; height:auto; position:relative; z-index:10;}

.photo ul.topic li {display:block; width:125px; height:31px; float:left;}
.photo ul.topic li a.set {display:block; font-size:11px; width:124px; height:30px; text-align:center; line-height:30px; color:#000; text-decoration:none; border:1px solid #fff; border-width:1px 1px 0 0; background:#ccc; font-family:verdana, arial, sans-serif;}

.photo ul.topic li a ul,
.photo ul.topic li ul
{display:none;}

.photo ul.topic li.active a
{color:#000; background:#bbb;}

.photo ul.topic li a:hover,
.photo ul.topic li:hover a
{color:#fff; background:#aaa;}

.photo ul.topic li.active ul
{display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:375px; background:#ddd; width:464px; padding:40px 60px; border:20px solid #bbb; z-index:1;}

.photo ul.topic li a:hover ul,
.photo ul.topic li:hover ul
{display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:375px; background:#ddd; width:464px; padding:40px 60px; border:20px solid #aaa; z-index:100;}

.photo ul.topic li ul li
{display:inline; width:112px; height:87px; float:left; border:1px solid #fff; margin:1px;}

.photo ul.topic li ul li a
{display:block; width:110px; height:85px; cursor:default; float:left; text-decoration:none; background:#444; border:1px solid #888;}

.photo ul.topic li ul li a img
{display:block; width:100px; height:75px; border:5px solid #eee;}

.photo ul.topic li a:hover ul li a:hover,
.photo ul.topic li:hover ul li a:hover
{white-space:normal; position:relative;}

.photo ul.topic li a:hover ul li a:hover img,
.photo ul.topic li:hover ul li a:hover img
{position:absolute; left:-50px; top:-32px; width:200px; height:150px; border-color:#fff;}

Has it got anything to do with the absolute positioning you have used??

richcodesign
06-29-2009, 10:44 AM
Has it got anything to do with the absolute positioning you have used??

No I dont think so... ive tried changing that and nothing happens????

Corrosive
06-29-2009, 12:16 PM
Could be this floated element...

.photo ul.topic li ul li
{display:inline; width:112px; height:87px; float:left; border:1px solid #fff; margin:1px;}

That will take it out of the 'flow' of the page.

richcodesign
06-29-2009, 01:41 PM
nope, not the flow either....
stumped!

Corrosive
06-29-2009, 01:43 PM
nope, not the flow either....
stumped!

Yeah, me too. Sorry :(

richcodesign
06-29-2009, 01:57 PM
The title seems to be the only part sitting in the div.
The rest seems to just float on top.

domedia
06-29-2009, 03:40 PM
rich, can you possibly put all this on a temporary location on the web? I can look at this for you but I'd rather not recreate the page here locally :)

richcodesign
06-29-2009, 05:40 PM
Thanks for your help with this, but i think i have fixed it after looking at it all day !
i found that by putting in this code helped.

<br class="clear" />
</div>

</div>
<br style="clear:both"/>


not sure how! but its worked, and across platforms too!!!

richcodesign
06-29-2009, 05:43 PM
thanks everyone on this forum... dont know what id do with out all the brains!