WordPress.org

Ready to get started?Download WordPress

Forums

Calendar/Links Disappearing - Issue with CSS or WP or ME? (11 posts)

  1. MEF
    Member
    Posted 9 years ago #

    Hi everybody,
    I'm relatively new to WP and in the past, I haven't done much work with CSS. I have a really weird problem that I've never seen before, and I suspect it has something to do with the structure of my CSS file, but really, I don't know. On http://www.middleeastfacts.com/weblog/, if you hover over any of the links in the top menu, a white block appears over part of the calendar and links on the right. The weirdest part is that two of the menu items don't result in a white block appearing - Weblog and Mailing List. None of the other links on the page seem to result in the box appearing. I would think there was something wrong with my code, except that those two menu items don't cause problems, so I suspect it's a css problem that I probably can't diagnose myself. The code for the menu is:

    <tr>
    <td width="100%" height="20px" bgcolor="#0B5C98"><font size="2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="http://www.middleeastfacts.com/content/koran.php">What the Koran Says</a>&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="http://www.middleeastfacts.com/content/links.php">Links</a>&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="http://www.middleeastfacts.com/weblog">Weblog</a>&nbsp;&nbsp;&nbsp;&nbsp;
    Guestbook:
    <a href="http://www.middleeastfacts.com/Guestlog/guestlog3.htm">Old</a> /
    <a href="http://www.middleeastfacts.com/guestbook">New</a>&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="http://www.middleeastfacts.com/content/feedback.php">Feedback</a>&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="http://www.middleeastfacts.com/mailer/lists/index.php">Mailing List</a></font>
    </td>
    </tr>

    There are no structural differences between the menu item links, so I'm really confused why some trip an error and others don't.

    Any help that you guys can give me is appreciated. I'd like to go live with the new blog, but I can't really unless I get this problem fixed.

    Thanks very much!!!
    Steve

  2. Mark (podz)
    Support Maven
    Posted 9 years ago #

    Replace your calendar CSS with this, and see what happens. It may not work....
    In IE, you have a problem.
    In Firefox, you do not.

    **Backup your current css**

    #wp-calendar {
    border: 1px solid #ddd;
    empty-cells: show;
    font-size: 14px;
    margin: 0;
    width: 90%;
    }

    #wp-calendar #next a {
    padding-right: 10px;
    text-align: right;
    }

    #wp-calendar #prev a {
    padding-left: 10px;
    text-align: left;
    }

    #wp-calendar a {
    display: block;
    text-decoration: none;
    }

    #wp-calendar a:hover {
    background: #e0e6e0;
    color: #333;
    }

    #wp-calendar caption {
    color: #999;
    font-size: 16px;
    text-align: left;
    }

    #wp-calendar td {
    color: #444;
    font: normal 12px 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
    letter-spacing: normal;
    padding: 2px 0;
    text-align: center;
    }

    #wp-calendar td.pad:hover {
    background: #fff;
    }

    #wp-calendar td:hover, #wp-calendar #today {
    background: #eee;
    color: #bbb;
    }

    #wp-calendar th {
    font-style: normal;
    text-transform: capitalize;
    }

    It will look different, but if it can be seen, that's a bonus and we can go from there :)

  3. Lorelle
    Member
    Posted 9 years ago #

    I know there are bugs in MSIE, I write about a lot of them on my site, but we are stuck with it as a "majority shareholder". I have the same problems with sidebar menu link titles blinking in and out and such.

    It happens in the default CSS and in my fixed CSS, and I've even applied some hacks that should have fixed it but didn't.

    The problem might be in the DIVs and CLASSes being split across template files...I'm not sure, but it is really frustrating and I've used all the good tricks to fix it.

    I'm setting up a new site with WP with EXTENSIVE changes to the CSS so I might look harder to see what is causing this notorious MSIE problem.

    For specific info on this "blinking in and out", there are some really helpful examples and advice at:

  4. MEF
    Member
    Posted 9 years ago #

    Thanks guys (girls?)! Podz - I tried your recommendation but to no avail - the problem still persists. Lorelle - I'll have to check out the resources that you provided, although to muddle through all the resources will take some time.

    Thanks again for your assistance.

    Steve

  5. Lorelle
    Member
    Posted 9 years ago #

    The disappearing (or peeking) content drives me through the roof. It is WAY past time for some serious updates on browsers ALL the way around when it comes to CSS and the box model.

    And remember, it's not so much your HTML but the CSS that makes this happen.

  6. MEF
    Member
    Posted 9 years ago #

    Okay, it's good to know that a) somebody else has a problem with it, b) somebody else is pissed off about it and c) it's a CSS problem. If I can somehow figure out a solution the problem (unlikely!) by studying some CSS resources, I'll post it her for people to read. I hope others can do the same.

    Is there a known database of differences between the way IE and Firefox/Netscape read CSS files and interpret them? Perhaps that could give us a clue?

    Thanks again!
    Steve

  7. Lorelle
    Member
    Posted 9 years ago #

    The links I gave you give you a "list" of the typical bugs found in which browser.

    I would check the Eric Meyers site for specific references that would get you a really good list, but the positioniseverything.com group is AWESOME when it comes to these frustrating things.

    Also, just for anyone following this and trying to understand how CSS works to handle the presentation of a web page, I found the Box Model at http://www.hicksdesign.co.uk/journal/483/3d_css_box_model to be incredibly helpful. If I had had this when I started designing with CSS, I would have been much happier. Understanding how the padding, margins, and layers all go together really helps.

  8. MEF
    Member
    Posted 9 years ago #

    Hi Lorelle,

    Thanks for the new link. I'll definitely check it out.

    Another question unrelated - is there a way to track this question without having to wade through all the different support topics or without bookmarking it? How else is one supposed to follow a conversation?

    Thanks!

    Steve

  9. Lorelle
    Member
    Posted 9 years ago #

    MEF: I had the same problem - Click on "VIEW YOUR PROFILE" at the top of this screen.

    The rest: I found a CSS fix for the disappearing category titles. It comes from the list of links I already posted dealing with CSS problems.

    It seems that MSIE (and others) have a problem with undefined heights so all you do is set the CSS in your #menu to height:0 and the appearing and disappearing titles and sections goes away.

    Mine looks like this:

    #menu ul {color: #000099; font-weight: bold; list-style-type: none; margin: 0; text-transform: capitalize; font-variant:small-caps; height:0}

    I hope this helps others.

  10. MEF
    Member
    Posted 9 years ago #

    Hi Lorelle,

    Thanks very much for your help on both issues. I tried to do as you said, but it doesn't seem to work for me on http://www.middleeastfacts.com/weblog/index.php. At first I tried the height:0 that you suggested on the "#menu ul" class, but that didn't work. So, I inserted height:0 into EVERY #menu class in the CSS, which didn't work either.

    Am I doing something wrong? For now, I've removed the calendar, but now the only the links list gets covered over. I'm confused :(

    Any other suggestions?

    Thanks!
    Steve

  11. MEF
    Member
    Posted 9 years ago #

    YAY!!! I found a solution, based on three resources:
    http://dannyayers.com/archives/001856.html
    http://wordpress.org/support/topic.php?id=2487
    Lorelle

    None seemed to be enough on their own, but combined, it did the trick:
    /* Hides from IE5-mac \*/
    * html #menu {height: 0; position:relative;}
    /* End hide from IE-mac */

    The first one, apparently tells the browser to apply all the commands in the brackets to any #menu class variant. Then, the position: relative seems to be what makes the big difference.

    Thanks to all who made suggestions - hopefully this will help others in the future - I'm sure glad I finally figured it out because it was driving me crazy!!!

    Thanks again,
    Steve
    middleeastfacts.com

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags