Text Vanishes in IE - Possible Floats?

[SharkBait]

Site: www.tyleringram.com/tommys

 

Now in Firefox the text shows up fine but if you view the page in IE6 (not sure about IE7) anything below the header seems to vanish. I've CSS and XHTML validated it so I am assuming its the float attributes that are not working properly in IE or, Firefox understands if I am doing it wrong.

 

What am I missing?

[dbrimlow]

LOL!!!

 

After cursing and scratching my head with it for 10 minutes or so, I noticed an errant <br /> tag just flappin' in the breeze.

 

Remove the <br /> tag before the <div id="leftSide">.

 

I have to say, I was totally stumped. There was no reason within your CSS for this to happen ... NONE! So it had to be in the markup.

[dbrimlow]

All the pros here should look at this one!

 

IE has always been strange when it comes to floats. In essence, you had three non-floated top divs containers followed by a stand alone left floated and stand alone right floated div container (aka 2 column) that was followed by a non-floated footer.

 

The top 3 containers and the footer were showing ... the floated containers were not. Why?

 

Because the page's catch-all container "maincontainer" was acting as a block level tag once you put the break outside of any other holding container. That then made the floated items somehow (and this could ONLY ever happen in IE, LOL) behave like position:relative items and the non-floated items behave like  "position:absolute".

 

And THAT made the floated containers slide up and behind the non-floated three containers.

 

This is one of the strangest thing I ever saw.

 

Now, if you want that extra line break, you can place it within the last paragraph just before the closing </p> tag. The floats will still work fine because the break is contained properly.

 

Incidentally, you are going to have trouble in the future with this:

 

"a:link, a:active, a:hover, a:visited"

 

The order is wrong. The correct order (RULE!) is:

 

a:link, a:visited, a:hover, a:active (AKA - LVHA - "LoVe HAte")

 

Dave

 

[SharkBait]

Omg that is a silly thing with IE but thank you for explaining it Dave!

 

Yea as for the LVHA thing I noticed that while reading another thread thanks!

 

 

[ToonMariner]

Is this not the old hasLayout problem????

 

if you have elements floated and some links in there ie6 has a bit of a fit.  If it is this issue then give the element contains the text that is not showing some css attribute that forces hasLayout (I have used zoom: 1; but actually giving that element a border is probably better).

[dbrimlow]

TM, I don't know if that is the the issue.

 

This is very strange.

 

In essence he has a main wrapper then three non-floated 100% width elements, then an un wrapped break tag, followed by a floated left and floated right element. Like this:

 

<div id="wrapper">

    <div id="head1">bunch of test @ 200px height</div>

    <div id="head2">bunch of test @ 200px height</div>

    <div id="head3">bunch of test @ 200px height</div>

<br />

    <div id="leftfloat">bunch of test @ 500px height</div>

    <div id="rightfloat">bunch of test @ 500px height</div>

    <div id="footer">bunch of test @ 200px height</div>

<div>

 

When viewed in IE 6.0, the left and right floats disappear - it's as if it were this:

 

<div id="wrapper">

    <div id="head1">bunch of test @ 200px height</div>

    <div id="head2">bunch of test @ 200px height</div>

    <div id="head3">bunch of test @ 200px height</div>

    <div id="footer">bunch of test @ 200px height</div>

<div>

 

BUT, when you remove the errant <br /> tag, it all views fine in IE 6.0.

 

What I think happens, is that the break tag is relative to the main wrapper div. So it forces IE to see the 2 floats as absolute positioned and hidden - which brings them to the top left - relative of the wrapper div. Almost as if he had written the mark-up like this:

 

<div id="wrapper">

<br />

    <div id="leftfloat" style="position:absolute; visibility:hidden">bunch of test @ 500px height</div>

    <div id="rightfloat" style="visibility:hidden">bunch of test @ 500px height</div>

    <div id="head1" style="position:absolute; visibility:hidden">bunch of test @ 200px height</div>

    <div id="head2">bunch of test @ 200px height</div>

    <div id="head3">bunch of test @ 200px height</div>

    <div id="footer" >bunch of test @ 200px height</div>

</div>

[ToonMariner]

well the test is to give those elements that disappear something that triggers hasLayout.

 

so in the css give those floated divs a border and then see if they show up...

 

if they do then it is hasLayout.