Skip to main content

Close
Get the best research tool on the web today,and free!
Connect with people with common interests!

saved by20 people, first byNishi on 2006-05-07, last byjschoen on 2008-07-06

  • 6. Disappearing Text or Images in IE?




    IE exhibits a very strange bug whereby text or background images sometimes disappear from sight. These items are still actually present and, if you highlight everything on screen or hit refresh, they'll often re-appear. Kind of strange, huh?



    This problem mostly occurs on background images and on text positioned next to a floated element. To remedy the problem, simply insert position: relative into the CSS command for the disappearing element, and for some bizarre reason, that'll usually fix the problem. If this doesn't work (and sometimes, it doesn't), assign a width to the offending element in the CSS -- that should fix the problem.

  • 3. Minimum Width for a Page




    A very handy CSS command that exists is the min-width command, whereby you can specify a minimum width for any element. This can be particularly useful for specifying a minimum width for a page.



    Unfortunately, IE doesn't understand this command, so we'll need to come up with a new way of making this functionality work in this browser. First, we'll insert a <div> under the <body> tag, as we can't assign a minimum width to the <body>:



    <body>

    <div class="container">



    Next, we create our CSS commands, to create a minimum width of 600px:



    #container

    {

    min-width: 600px;

    width:expression(document.body.clientWidth < 600? "600px": "auto" );

    }



    The first command is the regular minimum width command; the second is a short JavaScript command that only IE understands. Do note, though, that this command will cause your CSS document to become invalid; you may prefer to insert it into the head of each HTML document to get around this.



    You might also want to combine this minimum width with a maximum width:



    #container

    {

    min-width: 600px;

    max-width: 1200px;

    width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? "1200px" : "auto");

    }

  • on 2006-08-04 Mattmcalister
    Block vs. Inline Level Elements, Another Box Model Hack Alternative, Minimum Width for a Page, IE and Width and Height Issues, Text-transform Command, Disappearing Text or Images in IE?, Invisible Text, CSS Document for Handhelds, 3-d Push Button
  • on 2006-08-06 Maknir
    IEのwidth hack, BOX hackなど
  • on 2006-08-26 Bluecockatoo
    Useful tips here, especially about the disappearing text in IE in elements adjacent to a floating element.
  • on 2006-10-24 T4696neko
    stylesheet
Print