Can you spot this html display bug?_问答_开发者

I've been following a tutorial from a book on html and css. I tried doing a plain header design like youtube's but I can't seem to get the search box and the button to display properly.The button is rendered about 10px lower than the search box as if it had the top padding set.

Can be seen here http://www.wourm.com/index.html can anyone see why it's happening?

[EDIT : Adding html and CSS开发者_JAVA百科 to this page]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Awtunes.com</title>
<link href="awtunes.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div class="container">
        <div class="header">
            <div class="logo floatL"><img src="images/logo.png" alt="Awtunes.com logo"/></div>
    <div id="find-videos" class="search floatL" style="top:0px;" >
                    <form id="searchVideos" name="searchVideos" method="get" action="/">
  <input name="q" type="text" class="searchBox" id="searchBox"   /><input type="submit" class="searchbutton" value="" />

</form>
            </div>
                <div class="menu floatL">
                    <ul>
                        <li>Videos</li>
                        <li>Music Videos</li>
                        <li>Trailers</li>
                        <li>Create Account</li>
                        <li>Sign in</li>
                    </ul>
               </div>
        </div>

    </div>
</body>

</html>

and the css

   .awtunes {
        font-family: "Courier New", Courier, monospace;
    }
    .container {
        width: 980px;
        top: 0px;
         margin-left: auto ;
      margin-right: auto ;
    }
    .floatL {
        float: left;
        position:relative;
    }
    .floatR {
        float: right;
        position:relative;
    }
    .searchBox {
        border-style:none;
        border-width:0px;
        width: 360px;
        background-image: url(images/search_bar.png);
        background-repeat:no-repeat;
        height: 40px;
        font-size: 18px;
    }
    .searchbutton {
        border-style:none;  
        border-width: 0px;
            background-repeat:no-repeat;
        background-image: url(images/search_button.png);
        background-repeat: no-repeat;
        width: 55px;
        height: 40px;

    }
    .logo {
        width: 122px;
        height: 50px;
    }
    .menu {
        width:430px;
    }
    .search {
        width: 425px;
        height: 40px;
    }
    .split {
        background-image: url(images/split.jpg);
        background-color: #C0C0C0;
        background-repeat: no-repeat;
        width: 1px;
        height: 18px;
    }
    ul
    {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    }
    li
    {
    background-image: url(images/split.jpg);
    background-repeat: no-repeat;
    float: left;
    margin: 0 0.15em;
    }

if this code comes from a book you better buy a new one.. serious. to get the button aligned just add your floatL class to both of you input fields.

I suggest a CSS reset such as the YUI CSS reset. A cursory check in IE and FF shows some pretty serious inconsistency already. If you use a CSS reset stylesheet, this will at least set your code on a level playing field between browsers. YUI CSS Reset: http://developer.yahoo.com/yui/reset/

Once you have a resource like this in place, many quirks of layout are already handled.

It seems to be because of .searchBox { font-size: 18px; }. If you take all the other styles off of the input.searchBox, you can see that changing the font-size changes the size of the plain old text input, which changes the height of the container of the text input and the button.

I also think it would be a good idea to add your HTML and CSS to this question so that if someone is looking at this question in the future and your site is different, they can still learn from your question!

.searchbutton { vertical-align: top; }

A quick fix to your current code would be to add something like:

.searchbutton {
   position: relative;
   top: -15px;
}

carolclarinet is right here -- the font-size attribute is the problem (at least in FireFox). I'm not sure if you're using the IE Developer Tools to check your CSS issues, but I'd recommend using it as well as FireBug for FireFox. They'll let you play around with your styles without the tedious modify/save/refresh cycle.