Forum Moderators: not2easy
I'm seeing a weird bug in IE where my page footer is covering some content on my page. Oddly, the links that get covered are still clickable, even though you can't see their text. I'm not sure what's causing this bug, and even worst is that I can't reproduce it consistently.
The overall layout of the HTML resembles this:
<body>
<div id="container">
<div id="intro">
<div id="pageHeader">
<h1>...</h1>
<h2>...</h2>
</div>
</div>
<div id="content">
<div id="status">
<div>...</div>
</div>
<div id="mainContent">
Content that gets partically covered
</div>
</div>
<div id="navContainer">
<div id="mainNav">
<div id="mainNavList">
<ul>
<li><a>Link 1</a>
<ul>
<li><a>Sub 1</a></li>
<li><a>Sub 2</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div id="pageFooter">
<p><span>Copyright...</span></p>
<p><span>All rights...</span></p>
<div id="fvlogger">
<dl>
<dt>JavaScript Log:</dt>
<dd class="debug">
<a>debug</a>
</dd>
<dd class="error">
<a>error</a>
</dd>
</dl>
</div>
</div>
</div>
</body>
Note that #fvlogger has display:none, so it's not shown. What ends up happening is that the pageFooter block ends up covering part of my mainContent block. It doesn't start at the top of the mainContent block.
These are positioned absolutely:
#intro
#navContainer
Several other blocks have position: relative;, including:
#container
#content
#mainContent
#pageFooter
#mainContent is only relative for IE, and it also has height: .1em; for another IE bug fix. I'm guessing this bug has something to do with position relative or floats on the page.
There's so much CSS involved that I don't think I should post it all. :(
The next div will then also start at top of page.
Relatives with no top or left do nothing.
Absolute removes from document flow, if top and left are left out, that equals zero = top of page.
Yep, in this case I don't think the absolute positioning has any effect. Those items are taken out of the flow and positioned to the left of the other content (ie - in the margins of the other content).
The next div will then also start at top of page.
Correct, the #status box is at the top of the page, with #mainContent below it, and #pageFooter below that.
The other thing I should stress is that I can't reproduce this bug consistently. Sometimes I'll see it, and sometimes I won't. But I have not been able to determine what is causing the behavior. :(
+-viewport--------------------------------+
¦...+-container-----------------------+...¦
¦...¦+-intro--------++-status--------+¦...¦
¦...¦¦``````````````¦¦```````````````¦¦...¦
¦...¦¦``````````````¦+---------------+¦...¦
¦...¦¦``````````````¦+--mainContent--+¦...¦
¦...¦¦``````````````¦¦```````````````¦¦...¦
¦...¦+--------------+¦```````````````¦¦...¦
¦...¦+-navContainer-+¦```````````````¦¦...¦
¦...¦¦``````````````¦¦```````````````¦¦...¦
¦...¦¦``````````````¦¦```````````````¦¦...¦
¦...¦¦``````````````¦¦```````````````¦¦...¦
¦...¦+--------------+¦```````````````¦¦...¦
¦...¦,,,,,,,,,,,,,,,,¦```````````````¦¦...¦
¦...¦,,,,,,,,,,,,,,,,¦```````````````¦¦...¦
¦...¦,,,,,,,,,,,,,,,,+---------------+¦...¦
¦...¦,,,,,,,,,,,,,,,,+-pageFooter----+¦...¦
¦...¦,,,,,,,,,,,,,,,,¦```````````````¦¦...¦
¦...¦,,,,,,,,,,,,,,,,+---------------+¦...¦
¦...+---------------------------------+...¦
+-----------------------------------------+
Yes it does. The next div will go under them.
I don't see where you are triggering any "bugs" - just too much relative and absolute positioning.
I am absolutely positioning the 2 items on the left, taking them out of the flow. It looks exactly as I would expect it to look (see diagram in previous post). The problem is that sometimes (and I can't figure out what the trigger is), the pageFooter appears further up in the page, covering some content in #mainContent. And although visually it covers part of #mainContent, the links within #mainContent can still be clicked (ie- the mouse pointer changes and the link status shows up in the IE status bar). Here is what it resembles:
+-viewport--------------------------------+
¦...+-container-----------------------+...¦
¦...¦+-intro--------++-status--------+¦...¦
¦...¦¦``````````````¦¦```````````````¦¦...¦
¦...¦¦``````````````¦+---------------+¦...¦
¦...¦¦``````````````¦+--mainContent--+¦...¦
¦...¦¦``````````````¦¦```````````````¦¦...¦
¦...¦+--------------+¦```````````````¦¦...¦
¦...¦+-navContainer-+¦```````````````¦¦...¦
¦...¦¦``````````````¦¦```````````````¦¦...¦
¦...¦¦``````````````¦+-pageFooter----+¦...¦
¦...¦¦``````````````¦¦:::::::::::::::¦¦...¦
¦...¦¦``````````````¦+---------------+¦...¦
¦...¦+--------------+¦```````````````¦¦...¦
¦...¦,,,,,,,,,,,,,,,,¦```````````````¦¦...¦
¦...¦,,,,,,,,,,,,,,,,+---------------+¦...¦
¦...+---------------------------------+...¦
+-----------------------------------------+
So again, I don't think this has to do with the absolute positioning because:
1. It doesn't line up with the positioning of any of these top level containers
2. It happens randomly
I suspect it's more likely that it's caused by a floated item within #mainContent, but I don't know for sure.
