Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Jun 2003
    Location
    Australia
    Posts
    528
    Thanks
    8
    Thanked 8 Times in 8 Posts

    Internet Explorer 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:

    Code:
    <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:

    Code:
    /*** 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!

    Taylor.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Well I noticed this (in red)
    Code:
    <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.
    Code:
    #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
    Code:
    * 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 which appear as normal comments to all browsers except IE Win.
    Code:
    <!--[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.
    Last edited by _Aerospace_Eng_; 09-19-2006 at 11:37 PM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Regular Coder
    Join Date
    Jun 2003
    Location
    Australia
    Posts
    528
    Thanks
    8
    Thanked 8 Times in 8 Posts
    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!!

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Read my post, it should solve all of your current problems.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    Regular Coder
    Join Date
    Jun 2003
    Location
    Australia
    Posts
    528
    Thanks
    8
    Thanked 8 Times in 8 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    Well I noticed this (in red)
    Code:
    <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.
    Code:
    #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
    Code:
    * 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 which appear as normal comments to all browsers except IE Win.
    Code:
    <!--[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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •