Disapearing Text 2

[TamedTech]

Hello Guys,

I'll try and explain this as best possible, however my page is behind a secure login so i'm unable to show you a live version of my issue.

Basicly, I have a 'pod' constructed of DIV's which works fine, and I place some <p>'s inside it and they all work as I would expect them too.

However, when I place anything other than a P, such as another DIV below my other P's then the text disapears, there is still a space residing for it, and if you 'highlight' it then the text reapears, and then disapears if you fresh.

So let me cover the basics of my layout.

This Works Fine

<div class="pod">
   <p>This is some text</p>
</div>

This Does Not

<div class="pod">
   <p>This is some text</p>
   <div style="clear:both;"></div>
      <div style="float:left;width:49%;">
          <div>
            <ul>
                <li>Text</li>
            </ul>
          </div>
      </div>
      <div style="float:right;width:49%;">
          <div>
            <ul>
                <li>Text</li>
            </ul>
          </div>
      </div>
</div>

Like i say that only a rough representation, i hope this is a common problem you guys come accross regularly.

Many thanks,

Rob

 

[ChrisHunt]

Do you have any CSS applied to [tt]div.pod[/tt]? Failing that, the only thing I see that may cause you problems is that, in modern browsers, [tt]div.pod[/tt] will not expand to accommodate the floating divs. There are a few solutions to this, fastest and irtiest being to add another clear:both div under the floating ones.

Is this disappearing text problem happening in any particular browser?

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[TamedTech]

Hello Chris,

Its hard to say which browser this is occuring in, i have a few systems running IE6 and they're giving me a mixed bag of results.

However, i think you're onto somthing with this div.pod not expanding, this is one of the issue.

I was in correct above, that second segment of code does work, in as much as my paragraph text looks as it should, however my floating div's drop outside the box as you commented they would, as the div.pod does not expand.

However, when trying to fix this using another div at the bottom like this.

<div class="pod">
   <p>This is some text</p>
   <div style="clear:both;"></div>
      <div style="float:left;width:49%;">
          <div>
            <ul>
                <li>Text</li>
            </ul>
          </div>
      </div>
      <div style="float:right;width:49%;">
          <div>
            <ul>
                <li>Text</li>
            </ul>
          </div>
      </div>
      <div style="clear:both;"></div>
</div>

with that 'clear:both' attribute, the div.pod now expands as i would expect, but that is when my text turns invisible.

Thanks for any more advice you can offer.

Rob

 

[TamedTech]

OK, i've found a temporary fix.

I've added a 'float:left' to my <p> and placed that clearer div and it works as i would expect it.

Rob

 

[Vragabond]

Dumb question. What is this doing in your code?

<div style="clear:both;"></div>

Given that you didn't tell us about anything special assigned to the paragraph element inside the div.pod, and based on my common sense, I would assume that paragraph is not floated. Since clear: both; is clearing the floated elements and we cannot see any floated elements, what the heck is it there for?

Your fix seems to be in the style 'let's add something we don't understand on top of something we didn't understand before'. Why float and clear if it seems like it would work without any of the two.

That said, if you remove all the extraneous tags and styling, and your problem persists (only in IE that is and FF shows the result nicely), it is probably the strange IE disappearing act which can be saved by strategically placing some [tt]position: relative;[/tt] in the text.

 

[TamedTech]

Thanks for the reply Vragabond,

You'll notice in my posts above there are two column elements that are floated, that is why there is a the clearer div, to clear those so they dont slip out the bottom of my container 'pod' div.

Now, the problem was that when clearing those two floated div's it seemed to hide my text, so i now float the paragraph aswell and its now clearing all three items together, which works nicely.

I showed a limited example above to try and make it cleaner too see, other CSS effects on those elements are not layout based and only change font size and things, so i cut it down to the bare layout bones.

I'm reasonably fluent in CSS and XHTML and the site now behaves as i would expect it to in IE, FF, Opera, Netscape and Safari, so i'm quite happy for the moment with this fix.

Let me know if you have another suggestion.

Thanks,

Rob

 

[Vragabond]

Your code above shows things in the following order.

<container>
 <paragraph>
 <clearing div>
 <floated div>
 <floated div>
 <clearing div>
</container>

From this scheme we can see that the first clearing div is clearing... nothing. It is not smart to put in css styles that do not do anything. This of course relates to the code before you floated the paragraph, which should not be floated in the first place. I have absolutely nothing against the second clearing div, which is where it should be.

So, was your example wrong or is it the code that is wrong?

 

[TamedTech]

Ah, you're quite right Vrag, i have no idea why that first clearer div is in there, it isnt in my working version, I must have slipped it into my exampple by accident.

So, this was my origional code that did not work.

<container>
 <paragraph>
 <floated div>
 <floated div>
 <clearing div>
</container>

The paragraph displays fine if i take that second clearing div out like this

<container>
 <paragraph>
 <floated div>
 <floated div>
</container>

But, then the two floated divs drop out the bottom of the container as it does not expand, so, i keep that clearer div, and float my p as follows.

<container>
 <floated paragraph>
 <floated div>
 <floated div>
 <clearing div>
</container>

Sorry for the confusion, but there isnt a clearing div near the top, i just messed up my example.

Thanks,

Rob

 

[Vragabond]

Well, I am still willing to look into the REAL code (since I don't like your solution) and try to solve it in a more natural way. Incidentally, did you say this problem appears in all the browsers or just IE? It does awfully sound like the peekaboo bug.

 

[TamedTech]

Yes it does appear to be that Peekaboo bug which i'm experiencing, i'll have a toy around with that position relative solution to see if i can get somthing more natural working.

Its hard to say which browser is having issues, for instants, on my notebook PC, It runs fine in all the browsers, yet other PC's running IE6 have beef with it.

I'm not convinced its a perminant IE issue, as i've applied a few patches to reregister the DLL's on my notebook and thats probably why its behaving so well.

I'll let you know how i get on, thanks for your help guys,

Rob