Magic act: Vanishing and Reappearing text! (IE)

Okay - I am really frustrated!!

I mainly work from Firefox, but ofcourse make sure I do the odd check to make sure that everything works in IE.

Well my last check has discovered something very unusual.

The following is my main content:


<div id="contentalt" >
<h2>[title of page]</h2>
<div id="submenu">
<ul>
<li><a href=?module=ladders>Announcements</a></li>
<li><a href=?module=ladders&page=standings>Standings</a></li>
<li><a href=?module=ladders&page=results>Results</a></li>
<li><a href=?module=ladders&page=report>Report Loss</a></li>
</ul>
</div>
[Page content here]
</div>


The problem is.. When I view the page in IE the [title of page], whatever it may be cannot be seen. However the writing is there, it is just the same color as the background (white). BUT.. When I run my mouse over the text, with the right button down obviously I can see the hidden text.. but here is the really weird thing: When I then move my mouse away and click elsewhere.. the text is no longer highlighted by the mousemovement, but it is however now black, so it can be viewed.. does that make sense?

This is my CSS relating to these div's:



/*** Content ***/

#content,#contentalt {
background-color:#fafcff;
border:1px solid #909090;
min-height:800px;
color:#2a2a2a;
padding:0px;
}

#content {margin:0 200px;}
#contentalt {margin:0 200px 0 20px;}
#content p, #contentalt p {
padding:10px;
}
#content h1,#content h2,#content h3,#contentalt h1,#contentalt h2,#contentalt h3 {

color:#606060;
font-weight:bold;
letter-spacing:-1px;
margin:10px 10px 15px;
padding:0;
}

#content h2,#contentalt h2 {
font-size:1.6em;
margin-bottom:10px;
}


#submenu {
float:left;
margin-bottom:25px;
border-top: 1px solid #b0b0b0;
border-bottom: 1px solid #b0b0b0;
width:100%;
background:#f0f0f0 url(themes/smooth_blue/alt-img/$bodybg.jpg) top left repeat-x;
color:#FFFFFF;
}

#submenu ul {
font-size:14px;
margin:0;
padding:0;
vertical-align: middle;
}

#submenu li {
float:left;
list-style:none;
margin:0;
padding:0;
vertical-align: middle;
}

#submenu a {
border-right:1px solid #b0b0b0;
color:#FFFFFF;
display:block;
font-size:0.7em;
padding:5px 5px 5px;
text-transform:uppercase;
vertical-align: middle;
}

#submenu a:hover {
background:#f0f0f0 url(themes/smooth_blue/alt-img/$menubg.jpg) top left repeat-x;
color:$hovercolor;
text-decoration:none;
vertical-align: middle;
}

#submenu a.current {
background:#f0f0f0 url(themes/smooth_blue/alt-img/$menubg.jpg) top left repeat-x;
color:#505050;
text-decoration:none;
vertical-align: middle;
}


My CSS is actually within PHP - hence the $bodybg variables etc.

Also, the min-height:800px doesn't seem to work in IE but does in Firefox.. is this normal?

Thanks in advance for any help! :thumbsup:

Taylor.

Well I noticed this (in red)
<div id="contentalt" >
<h2>[title of page]</h2>
<div id=\"submenu">
<ul>
<li><a href=?module=ladders>Announcements</a></li>
<li><a href=?module=ladders&page=standings>Standings</a></li>
<li><a href=?module=ladders&page=results>Results</a></li>
<li><a href=?module=ladders&page=report>Report Loss</a></li>
</ul>
</div>
[Page content here]
</div>
But this seems like a peekaboo bug.
#contentalt h2 {
position:relative;
}
should fix it. As for min-height, well its not supported by IE6, nor is min-width but there are work arounds for both. IE6 treats height as min-height so you can either do something like this in your CSS
* html #content, * html #contentalt {
height:800px;
}
which only IE6 and below will see. IE7 will see it as well IF you do not have a valid complete doctype. You could also use conditional comments (http://www.quirksmode.org/css/condcom.html) which appear as normal comments to all browsers except IE Win.
<!--[if lte IE 6]>
<style type="text/css">
#content, #contentalt {
height:800px;
}
</style>
<![endif]-->
The above would go after your call to your main stylesheet.

I've actually just discovered that the text that reappears.. disappears if my mouse runs over one of the submenu links.. so I assume there is a connection but I have no idea what it is!!

Read my post, it should solve all of your current problems.

Well I noticed this (in red)
<div id="contentalt" >
<h2>[title of page]</h2>
<div id=\"submenu">
<ul>
<li><a href=?module=ladders>Announcements</a></li>
<li><a href=?module=ladders&page=standings>Standings</a></li>
<li><a href=?module=ladders&page=results>Results</a></li>
<li><a href=?module=ladders&page=report>Report Loss</a></li>
</ul>
</div>
[Page content here]
</div>
But this seems like a peekaboo bug.
#contentalt h2 {
position:relative;
}
should fix it. As for min-height, well its not supported by IE6, nor is min-width but there are work arounds for both. IE6 treats height as min-height so you can either do something like this in your CSS
* html #content, * html #contentalt {
height:800px;
}
which only IE6 and below will see. IE7 will see it as well IF you do not have a valid complete doctype. You could also use conditional comments (http://www.quirksmode.org/css/condcom.html) which appear as normal comments to all browsers except IE Win.
<!--[if lte IE 6]>
<style type="text/css">
#content, #contentalt {
height:800px;
}
</style>
<![endif]-->
The above would go after your call to your main stylesheet.


Yeah I fixed that / as you were typing it .. originally all in PHP but I took all that out to look like just HTML lol..

Anyway.. YES!! That fixed it! Thanks.. how about the min-width though? IGNORE THAT QUESTION - we both replying at same time! lol