Horizontal Nav Bar Problem in Firefox

  • This is the first time I’ve ever had an issue with Firefox. Usually I’m struggling to get things to look right in IE.

    Anyway, if you have firefox, when you enter my page https://systematicHR.com you will see the topnav list at the top of the page. The search field and button are stacked on top of each other to the far right. When you mouse over any of the other list items in the nav, the search field and button jump to the left (where I want them to be) and stack next to each other instead of on top of each other (also how I want them to be). Why is this happening and how do I get that little search thing to render correctly on page load instead of after a mouse-over?

    I’ve tried messing with the CSS and with the topnav list items to no avail. You should also know that the topnav is in a table, the list items in one column, the search in another column, all obviously in the same row.

    Thanks in advance!!!

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter doubledubs

    (@doubledubs)

    I’m bumping this cus I figure someone around here knows and I’ve tried everything else already.

    Here’s the HTML

    /*
    <table>
    <tr valign=”top” bgcolor=”#ffffff”>
    <td>
    <ul class=”topnav”>
    <li <?php if(is_home()) { echo ‘class=”current_page_item”‘;} ?>>“>Home
    <?php wp_list_pages(‘title_li=’) ;?>

    </td>
    <td>
    <form method=”get” id=”sform” action=”<?php bloginfo(‘home’); ?>/”><input type=”text” id=”q” value=”<?php echo wp_specialchars($s, 1); ?>” name=”s” size=”15″ /><input type=”submit” name=”submit” value=”Search” /> </form>
    </td>
    </tr>
    </table>
    */
    And here’s the CSS
    /*
    #search input{
    width:175px;
    font-size: 0.85em;
    background:#fff;
    color:#963;
    margin-top:2px;
    }
    .topnav
    {
    list-style:none;
    margin:0px 0 0 0;
    padding:5px 0;
    text-align:left;
    width:60%;
    min-width:65em;
    max-width:65em;
    }
    .topnav li
    {
    list-style:none;
    margin:0;
    padding:0 5px;
    display:inline;
    }
    .topnav li a
    {
    color:#000031;
    padding:3px 0;
    text-decoration:none;
    }
    .topnav li a:hover, .topnav li.current_page_item a
    {
    color:#CE6531;
    padding:3px 0;
    text-decoration:none;
    border-bottom:#CE6531 2px solid;
    }
    */

    Thread Starter doubledubs

    (@doubledubs)

    Well, I’m not one to bump my questions, but since only 3 of my last 10 questions have been answered, I’m gonna bump this one more time. I just can’t figure this one out.

    Thanks!!

    That’s a bit of a stumper with my limited CSS skills. But what happens if you change the .topnav width to 100%?

    And just to be zany…. suppose you got rid of that table and used a pair of divs instead? One left aligned and one right?

    Thread Starter doubledubs

    (@doubledubs)

    Thanks Handy Solo. The .topnav at 100% doesn’t do it, but let me play around with the divs. I’ll let you know how that goes. (I really suck at CSS)

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Horizontal Nav Bar Problem in Firefox’ is closed to new replies.

Tags