Support » Fixing WordPress » Search form graphic overflow?

  • Resolved mlankton

    (@mlankton)


    Ok, the site is straight except for one thing. I placed my searchform at the top right. It looks fine because the background it’s on is black, but there is a black overflow beneath it. Visitors on low res displays are going to get a messed up header graphic because of it.

    It doesn’t do this in the navbar, the sidebar, or at top left. Anyone able to help me fix this?
    Thanks

    aventhusiast.com

Viewing 6 replies - 1 through 6 (of 6 total)
  • No need for a double post, but there you go:

    In your style.css somewhere around line 29 it says

    h1 {
    font-family:verdana;
    font-size:190%;
    font-weight:bold;
    overflow:hidden;
    }

    Get rid of the overflow:hidden; and you’ll be fine.

    (Not sure why you put the image inside a h1 tag, but that’s another issue)

    Thread Starter mlankton

    (@mlankton)

    All that does is screw up my header graphic. Is there any way I can wrap the searchform markup in a <div> that I can add an overflow: hidden; style to? Would invoking overflow on the searchform do anything at all? Why is the searchform not doing this if I put it top left?

    <form method=”get” id=”searchform” action=”http://aventhusiast.com/&#8221; style=”float: right;” >
    <div><input type=”text” value=”” name=”s” id=”s” />
    <input type=”submit” id=”searchsubmit” value=”Search” />
    </div>
    </form>

    <div id=”hd”>
    <h1><img src=”http://aventhusiast.com/wp-content/themes/AVE-Grayscale/images/bodybg.png&#8221; style=”float: left;” alt=”AV Enthusiast”/></h1>
    </div>

    Thread Starter mlankton

    (@mlankton)

    Better yet, how can I add the search form to the navbar and make it so that it doesn’t wrap for people with lousy resolution? As it stands now, the searchform is preferrable in the navbar, but I am doubtful that 1024×768 users would see it in the bar, I think it will wrap, and take my whole right sidebar with it.

    The search box doesn’t overflow, on window resize it decreases the width of the <h1>, the image inside this <h1> tag disappears (since overflow = hidden).

    True, changing the overflow setting creates a problem with the background of your menu, but I guess I’ve hinted enough so far. Good luck.

    Thread Starter mlankton

    (@mlankton)

    Look, if you’re gonna browse support forums and comment, help somebody out. Don’t make cryptic statements to someone who is lost trying to solve a problem. Is this an ego thing with you? Do you just like talking down to someone a bit before you offer any useful assistance?

    Ok, I don’t see how that was cryptic nor talking down to somebody but since I apparently wasn’t clear:

    The search box does not overflow. It pushes the right side of the box formed by the <h1> tag to the left, thus making the box formed by the <h1> tag less wide.

    The content of this box, the header image, becomes invisible since it doesn’t fit the box any more and the overflow property of the containing element is set to hidden.

    Removing the overflow value could be a good start for solving the problem posed in your initial question.

    It appears as if the search box has a black overflow, but it doesn’t was all I’m saying.

    A solution would be placing the search box in a div above the header image with a width of 100% and a text-align:right;

    I’m sorry I offended you by taking the time to analyse your css file and at least come up with a start-up solution.

    EDIT: To stop the search box from wrapping you could specify a width (since min-width apparently doesn’t work in IE) for the ul containing the menu items (but then it doesn’t scale with the width of the entire page, or specify an id for the li you put the search box in and specify a width for that.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Search form graphic overflow?’ is closed to new replies.