Mystery space beneath DIVs or an expanded DIV? - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

Mystery space beneath DIVs or an expanded DIV?

Cienwen

4:29 pm on Jul 2, 2010 (gmt 0)

10+ Year Member

Hello all I have battled this code for hours now and I am still not sure why it is doing this.

This is some code I took from a Flash player whose layout I need to change. After finally getting it to work, there is still one problem. There is a large space beneath my content. About 500px worth of dead space.

I cannot figure out how to fix it.

Does anyone have any ideas?


<style type="text/css">
body {
 margin: 0 auto;
text-align: center;
 background-color: black;
}
#vcBackground {
background-color: black;
}
#vcHolder {
margin: 0 auto;
text-align: center;
width: 1100;
height: 720;
padding: 40px 0 0 0;
background-image:url(images/vc-grad-bg.jpg);
background-repeat: no-repeat;
}
#pdkHolder {
margin: 0 auto;
padding: 0;
text-align:center;
width:950px;
}
.vcTitle {
margin:0;
padding:0;
}
.search {
position: relative;
top: 5px;
left: 265px;
}
.releaselist {
position: relative;
top: -538px;
left: 265px;
}
.player {
position: relative;
top: 0px;
left: -210px;
}
.clipinfo {
padding: 5px 0 0 0;
position: relative;
top: 0px;
left: -210px;
}
.commmanager {
 position: absolute;
 top: 0px;
 left: 0px;
}
.releasemodel {
 position: absolute;
 top: 0px;
 left: 0px;
}
img {
}
</style>
</head>
<body>
<table width="100%" border="0" id="vcBackground">
 <tr>
 <td>
<div id="vcHolder">
<div id="pdkHolder">
 <div class="vcTitle" id="vcTitleDiv"><img src="images/vc-title.gif" alt="Tools Video Center"></div>
 <div class="commmanager" id="commmanagerDiv"></div>
<div class="releasemodel" id="releasemodelDiv"></div> 
 <div class="player" id="playerDiv">
  <p style="font:10pt Verdana; color:#fbe700">To view this site, you need to have Flash Player 9.0.115 or later installed. Click <a href="http://www.macromedia.com/go/getflashplayer/" target='_blank' style="color:#fbe700">here</a> to get the latest Flash player.</p>
 </div>
 <div class="clipinfo" id="clipinfoDiv"></div>
 <div class="releaselist" id="releaselistDiv"></div>
 <!--<div class="search" id="searchDiv"></div>-->
</div>
</div>

dreamcatcher

12:42 pm on Jul 5, 2010 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Hi Cienwen,

width: 1100;
height: 720;

This is invalid CSS. You must specify the length in px, cm % etc..

width: 1100px;
height: 720px;

See if that helps.

Cienwen

LouiseMarie

4:10 pm on Jul 6, 2010 (gmt 0)

10+ Year Member

Hi,

I was going to mention the px missing too, it always helps to ensure that you tell the browser how much of what each time.

I've spent some time working with relative layouts and found that it used to add extra space at the bottom of the page when I used minus properties. From your css I would say the most likely offender is:

.releaselist {position: relative; top: -538px; left: 265px;}

Take the styling off this div and see if it removes the extra space added. Is there any way you could use an absolute positioning instead?

You could also try adding "overflow:hidden" to "#vcHolder" as this may stop the extra space being shown.

Hope this helps

rocknbil

4:48 pm on Jul 6, 2010 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

The negative positioning of releaselist positions it "off the page", most likely to "hide" it for re-positioning when a link is clicked (that's my guess, point is, it's "off the page" . . . to the top.)

This first thing I do when I have these troubles is put a border on objects temporarily, like

#vcHolder {
margin: 0 auto;
text-align: center;
width: 1100px;
height: 720px;
padding: 40px 0 0 0;
background-image:url(images/vc-grad-bg.jpg);
background-repeat: no-repeat;
border:1px solid #fff;
}
#pdkHolder {
margin: 0 auto;
padding: 0;
text-align:center;
width:950px;
border:1px solid #ffff00;
}

If you test this code with borders as suggested and remove the px from the width and height of vcHolder, vcHolder will not set a height, it snaps right up under pdkHolder . . . so there would be no "large space."

This is kind of what confuses the issue, if you're using this code "as posted," where is your "content?" Right under the pdkHolder Flash div? Or does it come AFTER vcHolder?

If the latter is the case, change this

height: 720px;

to "whatever the height of your Flash object is." Or provide info on where the content is, after adding 'px' and the missing table td/tr/table tags, this is all valid and working as expected . . . a bit weird with the positionings, but working . . . .

Cienwen

2:43 pm on Jul 7, 2010 (gmt 0)

10+ Year Member

This is one of those sticky situations. I am stuck putting this code into a legacy ASP page that is calling a header and a footer plus 3 external CSS pages. Then the DIV in the page are calling elements from a third party streaming video provider.

Alas!

I tried removing the negative relative position but that shot the element to the bottom of the page. So even though it is probably the culprit, I did not have a good way to live without that element.

However, overflow:hidden totally fixed my issue in all browsers so I am golden!

This is not ideal code but I am not working in ideal circumstances. But it�s getting the job done.

Thank you all for your help. Now I can finally publish this page.