Support » Themes and Templates » Interesting IE CSS bug (or quirk or my bad code)

  • Hello all,
    I have a rather interesting quirk popping up on my blog after a redesign. It seems that for some people who are using IE, they are getting a weird error on my blog entires whereby pieces of text are sort of missing. After a refresh or highlighting of the screwy text, things are fine. Unfortunately this doesn’t happen on my machine with IE6 (XP Pro) or in Mozilla or Firebird, but it does happen with some people on IE6 on both XP and 2000. I can randomly replicate this issue if I go into the Tools > Internet Options > Advanced and check the “Smooth scrolling” toggle. Normally I have it off because it irritates me, but this is the only way I can randomly produce this bug.
    I posted about this issue here (along with screenshots some people submitted):
    http://memoirsofageek.com/2004/05/19/attack-of-the-hidden-bugs/
    And here is the link to my CSS file (note that you will have to copy and paste this link into a new browser window):
    http://memoirsofageek.com/wp-layout_stewie.css
    Have any of you ever run into this issue and if so, were you able to find a workaround? I doubt it’s a bug within IE, so it’s probably something I am doing incorrectly with my CSS. If anyone can help me with this issue, it would be most appreciated. 🙂

Viewing 9 replies - 1 through 9 (of 9 total)
  • gotRoot
    Access to your CSS file is denied.

    Do you know it had never entered my mind that some folks would actually link to your style sheet. It would give them all a nasty shock if one day you changed it. Particularly if you used the pseudo class before 😉

    Hehe.. Yeap. With all of the calculations, I figured roughly 3gb of data was styolen from me with people in the past using my images, stylesheets, files, etc. That’s why I prety much forbid any hotlinking of anything off my site. Granted, I have a terabyte of bandwidth / month, I still hate people leeching crap off my sites…

    *bump*
    I figured to stop the confusion, I’ll include my Stylesheet below, along with my index.pph code below that… 🙂

    /*
    Default WordPress by Dave Shea || http://mezzoblue.com
    Modifications by Matthew Mullenweg || http://photomatt.net
    This is just a basic layout, with only the bare minimum defined.
    Please tweak this and make it your own. :)
    */
    html, body {
    margin: 5px auto 10px auto;
    padding: 0;
    height: 100%;
    }
    body {
    color: #000;
    background-color: #fff;
    text-align: center;
    }
    a {
    color: #369;
    background-color: transparent;
    }
    a img {
    border: none;
    }
    a:visited {
    color: #666;
    background-color: transparent;
    }
    a:hover {
    color: #c96;
    background-color: transparent;
    }
    blockquote {
    border-left: 3px double #9bb2b2;
    margin: 0 10px;
    padding: 0 10px;
    }
    cite {
    font: normal bold 10px/12px Verdana, sans-serif;
    margin: 0;
    padding: 0;
    }
    h2 {
    font: normal bold 20px/22px Georgia, Times, serif;
    margin: 15px 0 2px 0;
    padding: 0;
    }
    h3 {
    font: normal 900 18px/20px Verdana, 'Trebuchet MS', 'Lucida Sans Unicode', sans-serif;
    margin: 0;
    }
    h3 a {
    color: #036;
    background-color: transparent;
    text-decoration: none;
    }
    pre {
    color: #600;
    background-color: #eee;
    font: normal normal 10px/11px monospace;
    border: 1px solid #ccc;
    margin: 5px;
    padding: 5px;
    }
    p, li, .feedback {
    font: normal normal 11px/13px 'Lucida Sans Unicode', Tahoma, 'Trebuchet MS', sans-serif;
    padding: 0;
    }
    p img {
    border: 1px solid #9bb2b2;
    margin: 0 3px;
    padding: 0;
    }
    .feedback {
    color: #ccc;
    background-color: transparent;
    margin: 5px 0;
    text-align: right;
    }
    .feedback a {
    text-decoration: none;
    }
    .meta {
    color: #000;
    background-color: transparent;
    font: normal normal 10px/12px Verdana, sans-serif;
    margin: 0;
    padding: 0 0 0 5px
    }
    .meta a {
    color: #778c88;
    background-color: transparent;
    font: normal normal 10px/12px Verdana, sans-serif;
    text-decoration: none;
    }
    .meta a:hover {
    color: #ccc;
    background-color: transparent;
    font: normal normal 10px/12px Verdana, sans-serif;
    text-decoration: none;
    }
    .meta a:visited {
    color: #369;
    background-color: transparent;
    font: normal normal 10px/12px Verdana, sans-serif;
    text-decoration: none;
    }
    .meta img {
    margin: 3px 0;
    padding: 0;
    vertical-align: middle;
    }
    .meta ul {
    display: inline;
    margin: 0;
    padding: 0;
    list-style: none;
    }
    .meta li {
    display: inline;
    }
    .post {
    color: #000;
    background-color: transparent;
    margin: 0 0 35px 0;
    }
    .storycontent {
    color: #000;
    background-color: #cee5e5;
    margin: 0 0 15px 10px;
    padding: 0 10px;
    border: 1px solid #acc3c3;
    }
    .storytitle {
    color: #036;
    background-color: transparent;
    margin: 0;
    padding: 0;
    }
    .storytitle a {
    text-decoration: none;
    }
    #rap {
    color: #000;
    background-color: #fff;
    margin: auto;
    min-height: 100%;
    height: 100%;
    width: 800px;
    text-align: left;
    }
    #header {
    margin: 0;
    padding: 0;
    height: 360px;
    width: 800px;
    border-top: 1px solid #000;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    position: relative;
    }
    #header h1 {
    height: 100%;
    width: 100%;
    background-color: transparent;
    background-image: url("http://memoirsofageek.com/images/headers/stewie_header.gif");
    background-repeat: no-repeat;
    margin: 0;
    padding: 0;
    }
    #header h1 span {
    display: none;
    visibility: hidden;
    }
    #nav {
    color: #000;
    background-color: #99aeaa;
    margin: 0 0 25px 0;
    padding: 2px 0;
    width: 800px;
    border-top: 2px solid #000;
    border-left: 1px solid #000;
    border-bottom: 2px solid #000;
    border-right: 1px solid #000;
    position: relative;
    text-align: left;
    }
    #nav form {
    margin: 0;
    padding: 1px 10px;
    display: inline;
    }
    #nav input {
    color: #000;
    background: #fff;
    font: normal normal 12px/12px Verdana, sans-serif;
    margin: 0;
    padding: 0;
    border: 1px solid #000;
    width: 100px;
    }
    #nav input.button {
    color: #000;
    background: #fff;
    font: normal normal 10px/10px Verdana, sans-serif;
    margin: 0;
    padding: 0;
    border: 1px solid #000;
    width: 50px;
    }
    #nav ul, #nav li
    {
    margin: 0;
    padding: 0;
    display: inline;
    list-style-type: none;
    }
    #nav a:link, #nav a:visited
    {
    color: #000;
    background-color: transparent;
    font: bold italic 12px/12px Verdana,sans-serif;
    margin: 0 10px;
    padding: 0;
    text-decoration: none;
    }
    #nav a:hover
    {
    color: #cee5e5;
    background-color: transparent;
    margin: 0 10px;
    padding: 0;
    text-decoration: none;
    }
    #blog {
    color: #000;
    background-color: #fff;
    width: 580px;
    margin: 10px 3px 10px 0;
    padding: 0;
    float: left;
    text-align: left;
    }
    #menu {
    color: #000;
    background-color: transparent;
    width: 170px;
    margin: 10px 0;
    padding: 0;
    float: right;
    }
    #menu form {
    margin: 0;
    padding: 5px 10px;
    }
    #menu input {
    color: #000;
    background: #fff;
    font: normal normal 12px/12px Verdana, sans-serif;
    margin: 0;
    padding: 0;
    border: 1px solid #9d8b3a;
    width: 90%;
    }
    #menu input.button {
    color: #000;
    background: #eee;
    font: normal normal 10px/12px Verdana, sans-serif;
    margin: 0;
    padding: 0;
    border: 1px solid #9d8b3a;
    width: 50px;
    }
    #menu ul {
    color: #000;
    background-color: transparent;
    list-style-type: none;
    margin: 0;
    padding: 0;
    }
    #menu ul li {
    color: #9d8b3a;
    background-color: transparent;
    font: normal 900 13px/14px Verdana, sans-serif;
    margin: 0;
    padding: 0;
    }
    #menu ul ul {
    color: #000;
    background-color: #e7dba2;
    list-style-type: none;
    margin: 5px 0 10px 10px;
    padding: 2px;
    border: 1px solid #9d8b3a;
    text-align: left;
    }
    #menu ul ul li {
    color: #000;
    background-color: transparent;
    font: normal normal 10px/14px Verdana, sans-serif;
    border: 0;
    margin: 0;
    padding: 0 3px;
    }
    #menu ul ul li a {
    color: #8c7a29;
    background-color: transparent;
    text-decoration: none;
    }
    #menu ul ul li a:hover {
    color: #fee;
    background-color: #9d8b3a;
    border-top: 1px solid #9d8b3a;
    border-bottom: 1px solid #9d8b3a;
    }
    #credit {
    color: #000;
    background-color: transparent;
    margin: 0;
    padding: 10px 0 0 0;
    text-align: center;
    vertical-align: middle;
    border-top: 1px solid #778c88;
    position: relative;
    height: 20px;
    clear: both;
    }
    #commentform input, #commentform textarea {
    background: #fff;
    border: 1px solid #333;
    }
    #commentform textarea {
    width: 400px;
    }
    ol#comments li p {
    font-size: 100%;
    }
    ol#commentlist {
    list-style-type: none;
    margin: 0;
    padding: 0;
    line-height: 12px;
    }
    ol#commentlist cite {
    margin: 0 0 10px 0;
    padding: 0 5px;
    }
    ol#commentlist li {
    font: normal normal 14px/20px Georgia, serif;
    margin: 0 5px 30px 5px;
    padding: 0;
    }
    ol#commentlist p {
    font: normal normal 14px/20px Georgia, serif;
    margin: 0 0 7px 0;
    padding: 0;
    }

    Here’s a snippet of the area in question:

    <div class=”post”>
    <h3 id=”post-<?php the_ID(); ?>”>” rel=”bookmark” title=”Permanent link to entry titled:
    <?php the_title(); ?>”><?php the_title(); ?>
    </h3>
    <div class=”meta”>
    <?php the_time(“l, F jS, Y @ g:i a”) ?> |
    <img width=”11″ height=”11″ src=”http://memoirsofageek.com/images/layout/category.gif” alt=”Category Filed Into” /> <?php the_category() ?> |
    <img width=”11″ height=”11″ src=”http://memoirsofageek.com/images/layout/comment.gif” alt=”Comments” /><?php comments_popup_link(‘ 0 ‘,’ 1 ‘,’ % ‘); ?>
    <?php edit_post_link(‘Edit’,’ | ‘,”); ?>
    </div>
    <div class=”storycontent”>
    <?php the_content(); ?>
    </div>
    <div class=”feedback”>
    <?php link_pages(‘
    Pages: ‘, ‘
    ‘, ‘number’); ?>
    </div>
    <!–
    <?php trackback_rdf(); ?>
    –>
    <?php include(ABSPATH . ‘wp-comments.php’); ?>
    </div>
    <?php } } else { // end foreach, end if any posts ?>
    Sorry, no posts matched your criteria.
    <?php } ?>

    Actually there are hundreds of tutorials online preventing bandwidth theft.
    *The price of being famous and good*

    More on bandwidth theft:
    Dunstan Orchard had a very funny way of dealing with a particular person hotlinking his images. Read about it here.
    The short of it is, he altered his .htaccess file to direct all external requests for images to a pornographic image. So, anyone who had been hotlinking his images, now had a very nasty (and embarrasing) image on their site. Funny stuff…

    Your problem with the disappearing text has something to do with a bug in IE.
    It’s been dubbed the Peekaboo and the solution is here http://www.positioniseverything.net/explorer/peekaboo.html
    Hope this helps,
    Phoat

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Interesting IE CSS bug (or quirk or my bad code)’ is closed to new replies.