WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Search Bar Placement and Compatibility IE/Firefox (3 posts)

  1. jeffr
    Member
    Posted 8 years ago #

    Hello,

    I've put my "pages" on the left and my "search bar" to the right on the same row (behind the title). Under firefox my design is ok, but under IE there is a problem.

    The adress to see the problem :
    http://www.webdeux.info

    Actually it seems that under IE the delimited field ends after my search bar (see the vertical bar just after).

    Here you can find some details from my files.

    The code :
    <ul id="pages">
    <?php wp_list_pages('title_li='); ?>
    <form method="get" id="searchform" action="<?php echo $_SERVER['PHP_SELF']; ?>">
    <input type="text" value="<?php echo wp_specialchars($s, 1); ?>" name="s" id="searchbox" />
    <input type="submit" id="searchbutton" value="Rechercher" />
    </form>

    The CSS :
    #pages {
    list-style-type: none;
    margin: 0;
    padding-left: 10px;
    height: 31px;
    font-size: 1.1em;
    background: url(images/pages-list-background.gif) left top repeat-x;}
    #pages li {
    float: left;
    height: 31px;
    padding: 0 25px 0 20px;
    line-height: 31px;
    font-size: .8em;
    white-space:nowrap;
    background: url(images/pages-list-divider.gif) right bottom no-repeat;}
    #pages li a {
    color: #9c9c9c;}
    #pages li a:hover {
    text-decoration: none;
    color: #94bc01;}
    #searchform {
    float: right;
    }
    #searchbutton {
    vertical-align: middle;
    margin-top: 1px;
    margin-right: 5px;
    margin-left: 5px;
    }
    #searchbox {
    width: 95px;
    vertical-align: middle;
    margin-top: 1px;
    padding: 4px;
    padding-bottom: 0px;
    background: url(images/pages-list-background.gif) left top repeat-x;}
    border: 1px solid #8db63c;}

    I've also see that when i put that code :
    <ul id="pages">
    <?php wp_list_pages('title_li='); ?>

  2. <form method="get" id="searchform" action="<?php echo $_SERVER['PHP_SELF']; ?>">
    <input type="text" value="<?php echo wp_specialchars($s, 1); ?>" name="s" id="searchbox" />
    <input type="submit" id="searchbutton" value="Rechercher" />
    </form>
  3. The problem is reversed. Works on IE but not on firefox.

    Please Help.

  • syrupcore
    Member
    Posted 8 years ago #

    I'm not sure but you might try wrapping the form in an <li> manually. you have it inside of the <ul> but it's sorta naked in there. might help. if not, try wrapping the lot in a separate div and declaring a height for that div.

    will

  • martonem
    Member
    Posted 8 years ago #

    Did you ever resolve your problem?
    I just noticed I have the same issue at http://verusnova.com/blog - I am curious on how to fix it...

  • Topic Closed

    This topic has been closed to new replies.

    About this Topic

    Tags