IE Bug: H1 not displaying initially

liunx

Guest
Working on a new layout for my site. Looks fine in Firefox (of course). In IE, looks fine, too, except the H1 heading in the top of the horizontal blue DIV does not show up unless I scroll it off the top and then back down, or highlight it with the mouse then click elsewhere. I seem to recall seeing this before, but don't recall if I ever resolved why it was happening (or if it was just my browser :rolleyes: ).

The page: <!-- m --><a class="postlink" href="http://charles-reace.com/test/cwr/index.php">http://charles-reace.com/test/cwr/index.php</a><!-- m -->
The CSS: <!-- m --><a class="postlink" href="http://charles-reace.com/test/cwr/etc/style.cssWorking">http://charles-reace.com/test/cwr/etc/style.cssWorking</a><!-- m --> on a new layout for my site. Looks fine in Firefox (of course). In IE, looks fine, too, except the H1 heading in the top of the horizontal blue DIV does not show up unless I scroll it off the top and then back down, or highlight it with the mouse then click elsewhere. I seem to recall seeing this before, but don't recall if I ever resolved why it was happening (or if it was just my browser :rolleyes: ).

The page: <!-- m --><a class="postlink" href="http://charles-reace.com/test/cwr/index.php">http://charles-reace.com/test/cwr/index.php</a><!-- m -->
The CSS: <!-- m --><a class="postlink" href="http://charles-reace.com/test/cwr/etc/style.css">http://charles-reace.com/test/cwr/etc/style.css</a><!-- m -->


I tested what you're doing, and found this "fix" works for both IE and FF...

<table><tr><td style="background-color: transparent">
<h1>Charles W. Reace, Jr.</h1>
</td></tr></table>

I'm sure I'll be bombarded with the "oh don't use a table" routine, but none-the-less, it works. Probably a flaw in IE that won't render H1 in a div that has attributes set or some such strange thing...

Hope that helps.IE-Win sounds like it either needs relative positioning or use the Holly Hack to give it a false height (and thus bump that element into HasLayout() mode). No extra markup is needed.IE-Win sounds like it either needs relative positioning or use the Holly Hack to give it a false height (and thus bump that element into HasLayout() mode). No extra markup is needed.
I just added "position: relative;" for the H1 element, and now it displays fine in IE and FF. (There's a slight addition of space between it and the next element for whatever reason, but to no detriment for the layout.)

Thanks!I just added "position: relative;" for the H1 element, and now it displays fine in IE and FF. (There's a slight addition of space between it and the next element for whatever reason, but to no detriment for the layout.)

Thanks!

I learn something new everyday. I would have thought position was already "relative"...Nope. The position of all elements is static by default. Relative positioning is the same as static in that the elements exists in the same place either way, but relative positioning allows you to offset the appearance of the element.
 
Back
Top