Page disappears in IE6

Hi - in IE6 here:

http://www.greensmoothie.com/1gs/blend/essential.php

the first section of the page disappears when I try click on the link “good Automatic Sprouter here” in the first section - immediately above the first sub-header “Blend or Supplement”

If I go slowly from the top of the page, I can sometimes click on it without the whole section disappearing.

But always if I come up from under the sub-header - so my cursor is under the first sub-header and I try move it over the link, the entire section disappears!

IE7’s ok. I tried closing all <p>'s but it didn’t help.

Please can anyone see what to do?

thank you! - Val

Hi Paul - you got it! Thanks million! I had this:

Content, .txtbox2, .txtbox3 {zoom:1.0}

and I guess I thought ,txtbox was covered by Content - because the 2 must always close together </div></div> before txtbox2/3 begin.

But simply by inserting .txtbox in there, it works perfectly now!

IE6 is giving one small problem which I’m ignoring because it’s only on some pages and not in any other browser. There’s a small white space (1-3px?) on the right of the sub-header, e.g. you can see it here:

http://www.greensmoothie.com/1gs/blend/green.php

p.s. I’m so happy with your ul’s! I just didn’t know I could space the ul/li in the css. That’s why I was using gif with <br />, it was my route to get the line spacing :slight_smile: So I was taking my site down the wrong road, thanks for running in + saving us!

best, Val

Hi Val,

That’s classic lack of haslayout behavior and is due to your wrapping complicated content such as floats and images in elements that don’t have a layout.

The txtbox containers would seem to be the culprits so try this:


.txtbox, .txtbox2, .txtbox3 {zoom:1.0;}

Hi deathshadow - please don’t spend any time trying to change it. I’ve reached a point where I’m happy with everything.

I think sitepoint members have done an incredible job so that it now displays the way I need it.

I don’t want to spend any more time on structure, I just want to get the huge amount of content moved over so I can get my new site up.

I’m thrilled with the way the new css/template is working :slight_smile: If it doesn’t validate, I honestly don’t mind :slight_smile:

thanks! - Val

Well, it could be related to three or four of the TWENTY validation errors – most of those are the use of XML tags in a SGML doctype, but the placement of paragraph tags in invalid places, attributes that have no business in modern markup like TARGET, and comment placement…

Yeah, your comment placement if it ends up between floats is likely to trip either the disappearing content and/or double render bugs in IE. That could be it right there.

It could also be a malfunction in that inline script (I hate suckerfish), or any of a dozen other issues I’m seeing there.

I meant to post in your last thread about this site a rewrite, if I have time later tonight I’ll toss together how I’d clean up that page – starting with a modern doctype and removing all the extra DIV you have for no good reason. (and you have a LOT of pointless DIV and classes in there).

Hi Val, Are you still having the problem?

I’m using IETester IE6 and the page does not disappear when I click that link.
It takes me to a “Sorry Page Not Found” just as it does in other browsers.

Hi Ray - wow, lovely to hear from you :slight_smile: Sorry it’s page not found because that is a test area.

It’s not the link page that disappears. It’s all those first paragraphs on that essential.php page that disappear. So I’m unable to click on the link.

It only happens when I scroll down below the first <h2> (“Blend or Supplement”) then try move my cursor back up into the paragraph above (“Are you enjoying”) then all those first paragraphs from “Blending is magical” to “bought my Vitamix” disappear. There’s just white space. So all I see is the <h1> header “Why Blending Is Essential” and the date under it. I don’t think it’s the link causing it.

I just noticed that on all the pages in IE6 only, when I scroll down the page, then scroll back up, any section between any two <h2>'s can disappear and just be white space. It happens intermittently, and the section that disappears is chosen at random by IE6. All paragraphs between any two <h2>'s vaporize.

Perhaps it has something to do with the page rendering? Perhaps IE6 can’t read it as fast as the other browsers? Because if I go to the top, wait a while and scroll down again, then the paragraphs have rematerialized. I recall CAD people having that problem back in the 80’s when their pages took so long to render on pre-SUN computers.

Maybe IE6 can’t handle the scrolling up + down. It can’t re-render the content quickly enough. Is there a solution to that?

I’m also using IETester. I get the same disappearing act on both localhost + greensmoothie.com.

Hi deathshadow - many thanks for your response :slight_smile:

>your comment placement if it ends up between floats

I could only find one comment in the top section, showing when google search begins + ends. I deleted that but the paragraphs still disappear. The other comment - Paul’s <!–[if lt IE 7]> for the dropdowns in the menu area - is needed, but I tried deleting it anyway, but it also made no difference.

>It could also be a malfunction in that inline script

Paul wrote it. I don’t think that’s it :slight_smile:

>validation errors – most of those are the use of XML tags in a SGML doctype

I don’t know what to do about that. Paul gave me the doctype and I trust him. The problem is I’m converting about 100 pages of an old site into a css structure. All the old content - like <p>'s that aren’t closed, and a few <table>s for graphics - I’m pretty much leaving as is.

>no business in modern markup like TARGET

I need target. I’ve looked at the alternatives and for now it’s quickest + easiest for me to stick to target.

>if I have time later tonight I’ll toss together how I’d clean up that page

I’m not sure if it needs cleaning? Perhaps it’s just the old content? The structure has been written over 2 years by sitepoint members.

I just created a way for you to check. Here’s the template page I work from with no content:

http://www.greensmoothie.com/1gs/juice/1mst.php

and here’s the html of that page:

http://www.greensmoothie.com/1gs/juice/1mst.html

Would you like me to create pages with the html of all the includes? - header, head, recip, share, navjcr, btmnav, newbox, footnav. I don’t know very much, but they all look clean to me, e.g. here’s recip.php displaying random recipe image on each refresh (with the ? of php removed)

<php
$photos = array(‘rec01’, ‘rec02’, ‘rec03’, ‘rec04’, ‘rec05’, ‘rec06’, ‘rec07’, ‘rec08’, ‘rectama’);
$i = rand(0, count($photos)-1);
$select = “{$photos[$i]}.jpg”;
>

root.php is blank file, provides location for sub-folders.

The main template looks clean to me! I know that the content I copy from the old site does not validate, and that’s ok, I don’t have time to change it. Over time I may move every page into wordpress. Right now only the index page is wordpress - in testing here:

http://www.greensmoothie.com/1gs

thank you! - Val

Hi Paul - I had to remove .txtbox from the zoom because it was causing txtbox to fall down on some pages.

The structure is this:
<div id=“content”>
<div id=“leftcol”>
<div class=“leafdwnlft”></div></div>
<div id=“rightcol”>
<div class=“leafdwnrgt”></div></div>
<div class=“txtbox wh rc30”>
h1 + text
</div>
</div>

So down-leafs + txtbox are both inside Content. If I zoom txtbox, then sometimes in IE6 txtbox will begin only after the downleafs instead of between them (so there’s 177px block of bgcolor green, above the start of white txtbox)

So now I’m back to the problem of IE6 vaporizing all the text between sub-headers at random when I scroll up… It seems the lesser of the 2 evils :slight_smile:

best, Val

The problem is that IE6 doesn’t like the floated leaf edges and along with the three pixel jog on both sides making it all too big. I would have absolutely placed the leaf edges and removed then from the flow and from the equation.
e.g.


/*--LEFT COLUMN + RIGHT COLUMN--*/
#leftcol, #rightcol {
    position:absolute; 
    width:56px; /*53+3 see content*/
    top:0;
}
#leftcol {left: -56px;}
#rightcol {right: -56px;}
.txtbox {zoom:1.0;}


Hi Paul -

>absolutely placed the leaf edges and removed then from the flow and from the equation

wow, that works perfectly, thank you! It also fixed another small problem I had in the template that was displaying even in FF.

Ray are you there? Hoping you’re seeing why Paul switched the leafs to absolute :slight_smile: You remember you floated them when you did the original css for me…

#leftcol {
clear:both;
float:left;
margin-left: -56px;
}
#rightcol {
float:right;
margin-right: -56px;
}
#leftcol, #rightcol {
display:inline;
position:relative; /use with negative margins for ie6/
width:56px; /53+3 see content/
zoom:1.0;}

Very grateful :slight_smile: - Val

Hi Paul - it just struck me, perhaps Ray did them as floats because there was content in each column? If I ever want to widen a column to add content (e.g. category links in wordpress) does that mean I must go back to floating leftcol + rightcol? Or is it enough that the two downleafs are floated inside an absolute lft+rgt column?

You can see the original design here, with content in all 3 columns:

http://www.greensmoothie.com/1gs/eatspr/main.php

thanks! - Val

Hi Val,

Yes if you want columns like that other example then you will need to float things again. I didn’t see any columns in your recent pages so would not have known about that.:slight_smile:

Floats will work but you must account for all the IE6 bugs (3px jog) and make sure that you don’t have anything too large in the center or the whole column drops in IE6.

While I wouldn’t even be using floats for those… or four elements for the two corners.

Two div, one class, second div nested inside the first. Left side background-position:left; Right side background-position:right; – then a negative bottom margin to ride the content area up over it.

Look ma, no floats. Same deal for the bottom, just negative margin the top instead of the bottom.

IMHO that’s using floats to do background-position’s job. If I have time later I’ll toss together and example of what I mean.

Another approach would be four wrappers (I dislike this approach) and again background-position.

Really though this:


	<!--CHANGE ebk-hdr, log-hdr2-->
	<div id="topleaf">
		<div class="top-lft"></div>
		<div class="top-rgt"></div>
<!--CHANGE <div id="cat"><h2>Sprouting</h2></div>-->
		<div class="tweet"></div>
	</div><!--end topleaf-->

Is one slew of code (that final content NOT helping cross browsers compatibility)

For what I’d probably have as:


<div class="topLeafs"><div></div></div>
<div class="tweet"></div>

Hi Val,
Just now got caught up on this thread. Yes, your right. In the original design there was content in the sidebars which is why they were floated. It seems I remember a menu down the left column and testimonials down the right side.

A lot of things have changed with your page since then :slight_smile:

Hi Paul -

>I didn’t see any columns in your recent pages

Yes that’s because I dropped content from the lft + rgt columns a while back. I don’t plan to ever have content in them - so am very happy with your absolutes because they work. I just thought it’s best to check how absolute works.

Hi deathshadow - I’m sorry, I can’t follow you because I need the css to see what you mean by:

<div class=“topLeafs”><div></div></div>
<div class=“tweet”></div>

the page you’re quoting was Ray’s ORIGINAL 2008 design to handle content in the lft/rgt columns - http://www.greensmoothie.com/1gs/eatspr/main.php - it’s NOT my current 2010 design which is - http://www.greensmoothie.com/1gs/blend/essential.php

Current structure is this:

<div id=“leaftop”>
<div class=“leaftoplft”></div>
<div class=“leaftoprgt”></div>
<div class=“tweet”><img></div>
</div>

<div id=“content”>
<div id=“leftcol”>
<div class=“leafdwnlft”></div></div>
<div id=“rightcol”>
<div class=“leafdwnrgt”></div></div>

thanks for everyone’s feedback! - Val