IE8 Height issue 1

coospaa · Oct 1, 2009

I have a page displaying fine in IE7 but not in IE8. It seems that "height:100%" isn't working. Does anyone know about this?

#Content
{
clear:both; height:100%;
background-color:#10509E; margin:0; padding:0; border:0px;
}

Thanks!!

Vragabond · Oct 1, 2009

Height is a funny attribute in HTML and CSS. If the parent container has no specified height, then percentage based height (honestly, it is hard to asses percentage based on an unspecified value) will revert to auto, meaning the height of its content. This is true to all elements (meaning if your parent has height: 100%; it needs to have another parent with a defined height). Know that html canvas is the html element, so it all has to start there. If that element (and every subsequent element) has a defined percentage height, then your height will work.

Of course, if you're not dealing solely with percentages, it's much simpler, as you just need to have a parent with a pixel (or inch or cm) defined height.

Without seeing more code (HTML to see where your #Content is and CSS other elements around it), that's the best I can help you.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

coospaa · Oct 2, 2009

Thanks! I don't have a parent element with a defined height, funny thing is that #Content expand correctly with its inner content in IE7, but in IE8 it just shows half an inch... Here's the page structure:

<div id="Content">
<div>some content with dynamic height</div>
</div>

All I want is to make the outer Content expand based on the inner content, but the height of the inner div is dynamic (based on the amount of data pulling from database). How shall I design that?
And do you know why IE8 & IE7 interpret it differently?

Vragabond · Oct 2, 2009

There is little consequence, given your initial question, what is inside your content. If #Content is requested to be 100%, it will be 100% of its defined parent. If the parent is not defined (and assume that #Content is empty), #Content will default to 0. If parent is defined at 300px, then #Content will be 300px. This will be regardless of how much actual content is inside content. That is the main reason why height defaults to auto so often, because you really do not want to have your content spill out of the container.

Your new post seems to be asking a new question. How to make sure #Content will be as big as content inside it. That's easy. It will do so by default. However, you have to make sure that there is valid content inside.

Absolutely positioned content is not valid, since absolutely positioned elements are taken out of document flow and work similar to post-it notes. You can move them anywhere on the page, but they won't disrupt the page layout -- therefore they won't extend an element.

Another reason for the parent not extending to the content is floated elements. This is a similar concept to absolute positioning, floated elements float inside the container and do not affect container's size. To combat floating issues, see this article on clearing:

http://www.quirksmode.org/css/clearing.html

As for IE7 and IE8 rendering differently. Every new browser, and IE especially, improves the rendering engine to fit closer to the published W3C standards. IE8 adheres to these standards and that is usually the issue with the rendering difference.

However, you've given us a fraction of your code. A fraction that will render the same in all the browsers that are in use today. Therefore I cannot provide more educated answer to your question -- why exactly is your specific code rendered differently in IE7 and IE8.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

coospaa · Oct 3, 2009

Sorry for the confusing. I should have posted the full code at the beginning. Your link on how to combat floating issues solves my problem. I tested on IE8 & IE7 and it works. Thanks a lot!!

Here's the HTML code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] >
<head id="Head1" runat="server" Title="Title"></head>
<body>
<center>
<form id="form1" runat="server">    
    <!--content-->
    <div id="containerMaster">
        <div id="container">    
            <div style="height:10px; background-color:#E1ECFE;"></div>   
            <div id="Content">
                <div class="PageContent">                    
                    <div style="float:left; padding: 10px 30px 20px 30px;">                    
                        <p>
                            a lot of text here...                    
                        </p>                         
                    </div>
                </div>
            </div>        
            <!--footer-->            
        </div>
    </div>
</form>
</center>
</body>
</html>

Here's the style sheets:

Code:

#containerMaster
{
	background:Transparent url(../../Images/t_container.gif) repeat-y;
	width:990px; padding:0; margin:0;
}

#container
{
	margin:0px 10px; width:970px; text-align:left; border:0px;
}

#Content
{	
	clear:both; height:100%; 
	background-color:#10509E; margin:0; padding:0; border:0px;
}

#Content div.PageContent
{
	background:White url(../../Images/content_bg.jpg) no-repeat top left;
	margin:0 0 0 10px; padding: 5px 0px 20px 0px; clear:both; height:100%;
	overflow: hidden;
	width: 100%;
}

I added the following based on the article:
[highlight]
overflow: hidden;
width: 100%;
[/highlight]

Thanks again!!

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

IE8 Height issue 1

coospaa

Programmer

Vragabond

Programmer

coospaa

Programmer

Vragabond

Programmer

coospaa

Programmer

Similar threads

Part and Inventory Search

Sponsor