- Create Account

DIV Layers extend page length regardless of where rendered

Forums > Other DHTML / JavaScript > DIV Layers extend page length regardless of where rendered
Author
Message

1) Luthmount45 Group: Members
Posts: 9 Joined: 8 Jun 2007 Location: Las Vegas, NV!!! IP: 70.173.--.--
DIV Layers extend page length regardless of where rendered

Hi - this  is a partial re-post of a previous topic that's morphed into something new, so I'm restarting it in it's own thread in hopes that someone might be so kind as to "show me the way", as it were ;-) !!! Pleasepleaseplease help me.

I am using RELATIVE POSITIONING of some layers in my page (because "absolute" does a fairly absolute job of destroying any ability to center them in all browsers!) and I am ending up with an extended table where I've entered the 2nd DIV.

In other words, my layers have to be nested within a table... and when 2 layers of that size occupy the same table, it essentially doubles the height of my table cell so that it's background image starts to tile. This is not acceptable. So now I'm in need of a solution to this table extention problem.

The first DIV Layer is sized & positioned as follows:

L: 0px W: 695px
T: 2px H: 495px

My second DIV Layer is sized & positioned as follows:

L: 0px W: 695px
T: -480px H: 495px


So the -480 kicks the 2nd layer back up over the first one, as it's relatively positioned. But even though neither layer is occupying the lower portion of the table when rendered, the actual code is occupying it, and it's extending my table height by about 500px at the bottom!

Are there any workarounds anyone might know of for this situation?

The IFRAME isn't the problem, it's the layers. And it's not got anything to do with the rendering position of the layers It seems to be the mere existence of the code wherever it sits that is extending my table borders. I can lock my tables to specific values, and they still "grow" when I add DIV Layer code within any of those tables. (Continued...)
Luthmount45

2) Luthmount45 Group: Members
Posts: 9 Joined: 8 Jun 2007 Location: Las Vegas, NV!!! IP: 70.173.--.--
(...Continued)

This seems completely illogical to me, so I would very much appreciate any specific input anyone might have on this with regard to programming theory, etc., as I just can't understand why adding a layer to a table would forcibly extend the bottom border of a size-specific table in such a way.

BTW, the described phenomina doesn't limit itself to tables. If I add a layer to the bottom of the page, outside the closure of the master table of the page, it still extends the browser's "scrollable viewing area", as I call it, beyond it's previous limit relative to the verticle size parameter of the layer being inserted. It solves my background image tiling issue, but it still extends the scrollable viewing area of the entire page way past what is needed.

This  does not wrk for me at all, because the rendered page is sized and designed to fit into a browser window with no scroll bars appearing at all.

Thank you soooooo much to anyone who can help me!!


Regards,
Chris
Luthmount45

3) Angus Turnbull Group: Moderators
Posts: 4042 Joined: 7 Dec 2003 Location: New Zealand IP: 203.173.--.--
I replied in the other topic in the IEPNGFix forum just before you posted this. I'll re-paste it here:

-----------------

OK, read up some more on CSS positioning. "relative" positioning will offset an element X/Y px from where it starts but leaving a gap where it would normally appear in the markup. "absolute" will collapse the size of the element and position its from its positioned parent element.

In short, try this:

<div style="position: relative; width: 600px; height: 400px">
  *** BACKGROUND CONTENT GOES HERE ***
 <div style="position:  absolute; left: 0px; top: 0px; width: 600px; height: 400px">*** OVERLAY CONTENT ***</div>
</div>

The outer relative container will count as part of your layout, the inner absolute element will cover it entirely without distorting the document further.

Good luck - Angus.

4) Luthmount45 Group: Members
Posts: 9 Joined: 8 Jun 2007 Location: Las Vegas, NV!!! IP: 70.173.--.--
Angus, thank you so much for your help!

I figured it out, although it took me a gew goes ;-)

My  problem - for YEARS - has been that instead of applying a simple non-defined <DIV> as a parent element, I've instead been attempting to nest my layers within DIV LAYERS and/or TABLES. I don't have a very complete understanding of DIV elements & how they work, and this explained several seemingly inexplicable issues for me.

Thanks a million!

L45
Luthmount45

Post a Reply:

You are not logged in, and will be posting anonymously as a guest. If you want to post using an account, please login at the top of this page.