homepage Welcome to WebmasterWorld Guest from 54.205.254.108
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Mystery space beneath DIVs or an expanded DIV?
Cienwen




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

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




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

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




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

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




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

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




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

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved