The online racing simulator
IE anomaly
(6 posts, started )
#1 - Ian.H
IE anomaly
Hi all..

I didn't post this in the coder's forum as it's not LFS related, but I know there's a few web coders around here

I've hit an anomaly that I've not come across before.. on one of the pages, IE6 doesn't want to display the text for the main content until either the window is covered and then shown again (alt+tab to a new app and back again, for example, ie: the UI gets redrawn) or I hit the refresh button.

I've attached 2 pics: 'ie_fscked_00.png' is what I get when I click on the link from the left-hand navigation link and 'ie_fscked_01.png' is what I get when I refresh (or the IE UI gets redrawn), which is obviously the desired result.

I've also added the code for the page (Smarty-based, see below) for anyone willing to have a nose about, although I can't see anything wrong with the code. The strange part is the index.php (Home) page works as expected, yet this b0rked page is almost the same (index.tpl was loaded and then one section removed and resaved as a different filename).

It works hunky-dorey in Firefox, no problems at all.

Has anyone else come across anything like this previously? Although it's being done voluntarily for my bro's boss, I can't turn around and say "tough, it's for Firefox users only"


Page code:
{* $Id$ *}
{assign var='page_title' value='About Us'}
{include file='header.inc.tpl' title="$page_title"}
<div id="container">
{include file='header_logo.inc.tpl'}
{include file='main_menu.inc.tpl'}

<div id="content">
<div id="content-inner">
<div id="main-content">
<div class="info-section">
<h1>Primary Heading <img src="/images/balls_secondary.png" alt="" class="balls-secondary" /></h1>

<img src="/images/stock/man_sitting.jpg" alt="" class="stock-image-left" />

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sapien felis, scelerisque convallis,
mattis ac, eleifend eu, nunc. Vestibulum iaculis augue et turpis. In pharetra. Etiam egestas metus.
Praesent in justo in risus sagittis aliquet. Mauris luctus, tortor vel viverra lobortis, lorem nisi semper
nibh, vitae mollis felis tortor ac nibh. Maecenas porta. Pellentesque aliquet lobortis leo. Sed dignissim
enim eget massa. Vestibulum sodales. Praesent dignissim sem. Pellentesque eget lorem in mi pretium varius.
Aliquam lacus sapien, malesuada in, vulputate id, vehicula in, est. Morbi vitae purus. Maecenas sed lorem
quis nisl lacinia pellentesque. Curabitur non enim. Integer purus est, tempor id, sollicitudin in, aliquam
in, erat.
</p>
</div>
</div>
</div>
<div class="plf"> </div>
{include file='left_col_addy.inc.tpl'}
</div>
{include file='footer_bar.inc.tpl'}
</div>
{include file='footer.inc.tpl'}

PS: Ignore the unfinished layout / graphics


Regards,

Ian
Attached images
ie_fscked_00.png
ie_fscked_01.png
You're doing it wrong. The stuff that works in IE is called anomaly.
#3 - wien
Looks like an incarnation of the Peekaboo bug. The solution is usually to apply "layout" (a concept without basis in the CSS standard, but which changes the way IE renders a block) to the block wrapping the disappearing tags.

Try setting the CSS rule "height : 1%;" on .info-section, #main-content or some of the other wrappers you have there. That will force "layout" on that block, and will usually fix these kinds problems. Make sure you hide that CSS rule from other, proper browsers though, as they will actually obey the height rule and shrink the block. Conditional comments are useful for that in case you don't know how.
#4 - Ian.H
Ahah! Thanks wein.. that sounds pretty much spot on! The image in the page is set to float: left.

I've read up previously about "layout" stuff (like settings widths / heights specifically) but didn't think about that.

I'll give your suggestion a go.. many thanks



Regards,

Ian
#5 - Ian.H
Sweet as! Thanks again wein.. adding the hack to the div.info-section styles has resolved the issue with a conditional comment to include a separate stylesheet for IE6

I owe ya a beer for that one.. I'd be ripping my hair out all night!



Regards,

Ian
#6 - wien
Glad to help. Applying "layout" is kind of a magic bullet to IE hacking in my experience. It's always the first thing I try if something's off in IE, which is most of the time.

IE anomaly
(6 posts, started )
FGED GREDG RDFGDR GSFDG