Ixzion Posted October 25, 2010 Share Posted October 25, 2010 Basically, I have a page that displays the first 100 characters of a news post from a database row. There's a link at the end to click on, which expands the text to the full size of the news post.This works great in Firefox (of course) and the footer pushes itself down to make room for the new text, but IE8 ends up making the new text appear behind the footer.I've slammed my head against this problem for hours on end. I've search through so many pages of Google results and I've only hit on one result where someone had the same problem as I do now.He created a page displaying the problem 4 years ago:http://www.yammr.com/strict.htmlhttp://www.yammr.com/quirks.htmlUnfortunately, no one answered his question back then. What is happening here? Link to comment Share on other sites More sharing options...
thescientist Posted October 25, 2010 Share Posted October 25, 2010 do you have link or code for your work? Link to comment Share on other sites More sharing options...
abdelelbouhy Posted October 25, 2010 Share Posted October 25, 2010 Basically, I have a page that displays the first 100 characters of a news post from a database row. There's a link at the end to click on, which expands the text to the full size of the news post.This works great in Firefox (of course) and the footer pushes itself down to make room for the new text, but IE8 ends up making the new text appear behind the footer.I've slammed my head against this problem for hours on end. I've search through so many pages of Google results and I've only hit on one result where someone had the same problem as I do now.He created a page displaying the problem 4 years ago:http://www.yammr.com/strict.htmlhttp://www.yammr.com/quirks.htmlUnfortunately, no one answered his question back then. What is happening here?in your css you position the footer absolute try to leave to the normal flow and give clear:both to the footer Link to comment Share on other sites More sharing options...
Ixzion Posted October 26, 2010 Author Share Posted October 26, 2010 do you have link or code for your work?I'm sort of in a bind, because I'm not allowed to show this site off yet.And all today, I've been working to recreate the essentials to show you guys the code, but when I preview, it works fine for both IE8 AND FF. It has every single bit of the CSS from the files I used to recreate the main page. However, on the main page, I'm still stuck. Is it possible that a div is in some position where it's messing with how IE pushes it down? I know the answer is probably "I need to see the code" as it should be, but I still have that restriction.I'm still going to try to build the demo page and I'll reply back when I have that so I can show you. Link to comment Share on other sites More sharing options...
BobbyFrankyJim Posted October 26, 2010 Share Posted October 26, 2010 change the z-index of the footer: http://www.w3schools.com/css/pr_pos_z-index.asp Link to comment Share on other sites More sharing options...
Ixzion Posted October 26, 2010 Author Share Posted October 26, 2010 I figured out my problem, finally.The main_container, which I set to display: inline-block, was the problem area. In IE8, whenever text entered the content area dynamically that was bigger than the current page (which would require the footer to move down), it would move behind the text. However, when I added the line under that one, which would only show to IE browsers, it finally worked. I bolded what I changed in the code.I believe that having it in the block convinced IE it was finally something to be self-contained and adjusted it accordingly. I might be wrong, so if anyone knows more than I do, please correct me so I'll learn!Thanks for taking the time to look! <!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" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">/*************************************** Startup and Sticky Footer ****************************************/*{ margin: 0; padding: 0;}#wrap{ height: 100%;}html{ height: 100%;}body{ height: 100%; font: calibri, arial 14px; color: #FFFFFF; background-color: #000000; background-image: url("images/nav_bg.jpg"); background-repeat: repeat-x; background-position: 0 200px; text-align: center;}body > #wrap {height: auto; min-height: 100%;}#main {padding-bottom: 47px;} /* must be same height as the footer */#footer { position: relative; margin-top: -47px; /* negative value of footer height */ margin-bottom: 1px; /* Fixes the "scrollbar 17px pixel" problem */ height: 47px; clear: both; background-image: url("images/nav_bg.jpg"); background-color: #9d0b0e; } #main_container{ width: 935px; position: relative; top: 0px; margin: auto; display: inline-block; [b]display: block\9;[/b] border: 0px #FFF solid; text-align: left;}/* CLEAR FIX*/.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;} .clearfix {display: inline-block;}/* Hides from IE-mac \*/* html .clearfix { height: 1%;}.clearfix {display: block;}/* End hide from IE-mac */#clear{ clear: both;}</style></head><body><div id="wrap"> <div id="main" class="clearfix"> <div id="main_container"> Content </div> </div></div><div id="footer">Footer Text</div></body></html> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.