• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 395
  • Last Modified:

<object> not resizing correctly by css

Hi,
I have used the "CSS Sticky Footer" from Ryan Fait (http://ryanfait.com/sticky-footer) to create a page where there is a footer div always displayed at the bottom of the page. This works perfectly until I put an <object> element in the main part of the page. It looks like the object element is causing the containing <div> to not resize correctly. The page code is included and you can fee the problem by removing the div with id="someothercontent" and uncommenting the <object>. Can anyone suggest a solution to this? Or suggest another way of embedding an entire external web page in a manner where I can access it's content? (The background colours are just there to make the div locations clearer!)

This is driving me nuts now!

Andy.
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="postest.aspx.vb" Inherits="postest" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Test page</title>
    <style>
        * 
        {
	        margin: 0;
        }
        html, body 
        {
	        height: 100%;
        }
        #wrapper 
        {
	        min-height: 100%;
	        height: auto !important;
	        height: 100%;
	        margin: 0 auto -50px;
	        background-color: Red;
        }
        #footer
        {
	        height: 50px;
	        background-color: Blue;
        }
        #push 
        {
	        height: 50px; 
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="someothercontent" style="height:100%;">
            <h1>Some text goes here.</h1>
        </div>
        <!--
        <object id="pageholder" type="text/html" data="http://en.wikipedia.org/wiki/Internet" width="100%" height="100%">
            <p>
                Error loading page</p>
        </object>
        -->
        <div id="push"></div>
    </div>
    <div id="footer">
        <div style="height:50px;">
            <h1>FOOTER GOES HERE</h1>
        </div>
    </div>
</body>
</html>

Open in new window

0
andycrellin
Asked:
andycrellin
1 Solution
 
knonieCommented:
Remove 100% height from  [Or you may decrease its value]
and decrease height="100%" in  to 88% or less.

Sample code below:

:-)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Test page</title>
    <style>
        * 
        {
                margin: 0;
        }
        html, body 
        {
                height: 100%;
        }
        #wrapper 
        {
                min-height: 100%;
                height: auto !important;
                height: 100%;
                margin: 0 auto -50px;
                background-color: Red;
        }
        #footer
        {
                height: 50px;
                background-color: Blue;
        }
        #push 
        {
                height: 50px; 
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="someothercontent">
            <h1>Some text goes here.</h1>
        </div>
        <object id="pageholder" type="text/html" data="http://en.wikipedia.org/wiki/Internet" width="100%" height="88%">
            <p>Error loading page</p>
        </object>
        <div id="push"></div>
    </div>
    <div id="footer">
        <div style="height:50px;">
            <h1>FOOTER GOES HERE</h1>
        </div>
    </div>
</body>
</html>

Open in new window

0
 
andycrellinAuthor Commented:
I'm afraid neither of these work.
Removing 100% makes the <object> invisible (I think it ends up with a height of 0px) and using 88% (or any other number) is incorrect because the height of the object is not 88% of the height of the container (except for the single unique situation where the browser window height is such that using 88% _happens_ to be correct). The height of the <object> is actually always viewportheight minus footerheight.
View your code in a browser and change the browser window height - you'll see that the footer disappears as you shrink the browser height - it doesn't "stick" to the bottom of the page.

I've actually taken a different tack to solve the problem myself (using iframes and an onresize event handler), but I'm still interested in finding a solution to the <object> problem.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now