By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
449,007 Members | 979 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 449,007 IT Pros & Developers. It's quick & easy.

IE6 Bug - absolute positioned header DIV disappears

P: n/a
Hi all,

I am sure something like this has been covered somewhere so I am hoping
a quick answer or pointer may suffice, however a couple of days
trawling and I can't find anything on it.

I'm building a layout and for reasons of PDA and text based browsers I
want to have my primary navigation at the bottom of the HTML layout.
Thus the main content and supplementar content are positioned higher in
the document structure then the links go at the end.

However for proper browsers I want to put my links into a header and
push them to the top of the page.

You can see my HTML below with at the moment an embedded stylesheet for
testing. It works as expected in Mozilla however in IE6 I am getting a
strange bug which started because of another bug.

If I sized my 2 columns to make up 100% then they wouldn't float next
to each other - it was as though they were too big to fit the space so
I dropped the size by 1% making the total 99% and they fit fine.
However the header then disappeared ENTIRELY from view....

If anyone can shed any light on this it would be greatly appreciated as
I'd like to structure my HTML properly and not have to compromise on
this.

Cheers
AndrewF

HTML HERE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">
<html>
<head>
<!-- scripts etc all go in here -->
<script language="javascript">
</script>
<style type="text/css">
body#tk_com {font-size: 0.8em; font-family: Verdana, Arial, Helvetica,
sans serif; margin: 0;}
body#tk_com div#container { margin: 0px auto; width: 70em; border: 1px
solid red;}
body#tk_com * h1 {font-size: 1.3em; font-weight: bold;}
body#tk_com * h2 { font-size: 1.1em; font-weight: bold;}
body#tk_com * h3 { font-size: 0.9em; font-weight: bold;}

/** define main header area so the nav can be repositioned into it. **/
body#tk_com div#container {margin-top: 150px; }

/** make the header info stuff come up from the bottom of the page **/
body#tk_com div#container div#header_info {position: absolute; top: 0;
margin-left: -1px; border: 1px solid green; width: 70em;}

/** make the nav stuff here **/
body#tk_com div#container div#header_info div#nav {margin-top: 123px;}
body#tk_com div#container div#header_info div#nav h3{display: none;}
body#tk_com div#container div#header_info div#nav ul {margin: 0px;
height: 25px; background-color: #000;}
body#tk_com div#container div#header_info div#nav ul li {display:
inline; margin: 0;}

/** make the main content area here **/
body#tk_com div#container div#main_content {width: 79%; float: left;
border: 1px solid red;}

/** make the supplementary content area here **/
body#tk_com div#container div#supplementary_info {width: 20%; float:
right; border: 1px solid blue;}

/** make the footer here **/
body#tk_com div#container div#footer {clear: both;}
</style>
</head>
<body id="tk_com">
<div id="container">
<div id="main_content">
<div id="intro">
<h1>Page title</h1>
<div id="summary">
<p>summary texzt fjdlfdklfjsdl</p>
</div>
</div>
<div id="main_info">
<h2>Sub head</h2>
<p>fhjfkj fdkjfhdslkj dslfkjhdslfkd fksjhf dsal</p>
</div>
</div>
<div id="supplementary_info">
<div id="specials">
<h3>Specials header</h3>
<p>Specials text etc</p>
</div>
<div id="related_info">
<div class="related">
<h3>Related header</h3>
<p>Text about the related item</p>
</div>
<div class="related">
<h3>Related header</h3>
<p>Text about the related item</p>
</div>
</div>
</div>
<div id="header_info">
<div id="nav">
<h3>Site Navigation</h3>
<ul>
<li><a href="courses">Courses</a></li>
<li><a href="courses">News</a></li>
<li><a href="courses">Contact</a></li>
<li><a href="courses">Gallery</a></li>
<li><a href="courses">Location</a></li>
<li><a href="courses">Facilities</a></li>
<li><a href="courses">Safety</a></li>
<li><a href="courses">Links</a></li>
<li><a href="courses">About Us</a></li>
</ul>
</div>
</div>
<div id="footer">
<p id="crightNotice">Copyright &copy; 2003 - 2006 TK. Powered by XML
&infin;. Hosted by clustered.net</p>
<p>some extra text in here yada yada yada yada</p>
</div>

</div>

</body>
</html>

Apr 3 '06 #1
Share this Question
Share on Google+
1 Reply


P: n/a
AndrewF wrote:
Hi all,

I am sure something like this has been covered somewhere so I am hoping
a quick answer or pointer may suffice, however a couple of days
trawling and I can't find anything on it.


Just a note: I didn't look over your code - and for future reference, it
would have been much easier if you had provided a link that I could have
looked at (I could have told for sure if my "diagnosis" is accurate by
observing the actual page)

That said, from the way you describe it, I think you might have
encountered the "Peekaboo" bug. Google that ( peekaboo bug, or explorer
peekaboo bug ) and you'll find plenty of discussion. I recommend looking
over PIE while you're at it (they have an article on this)
http://www.positioniseverything.net

Apr 3 '06 #2

This discussion thread is closed

Replies have been disabled for this discussion.