CODEWITHSUNDEEP
csslayout
user1879546
user1879546

Reputation: 33

I'm having trouble lining up Text boxes in css

im having trouble lining up some textboxes in css/html my current code:

<html>
<head>
    <title>CTF Scoreboard</title>
    <link href="css.css" type="text/css" rel="stylesheet"/>
</head>
<body>
    <div class="header">
        <img class="headerimg" src="img/header.png" />
        <form action="search.php" method="get" class="search">
            <input type="text" placeholder="Search players" required          class="box" name="user" />
            <input name="submit" type="image" src="img/blank.png" class="submit" />
        </form>
    </div>
</body>


body{
margin: 0px;
}
.header{
width: 100%;
height: 100px;
margin: 0px;
background-image:url('img/headerbg.png');
background-repeat: repeat-x;
margin-left: 0px;
margin-top: 0px;
padding: 0px;
border: 0px;
}

.headerimg{
height: 90px;
margin-left: 0px;
margin-top: 0px;
}

.header .search{
padding:0px;
background-image: url('img/searchbox.png');
background-repeat: no-repeat;
width: 310px;
height: 40px;
position:absolute;
top:27px;
right:27px;
margin-bottom: 0px;
}

.header .search .box{
border: 0px;
padding: 0px;
background-color:transparent;
margin-left: 5px;
width: 260px;
height: 37px;
}

.header .search .submit{
border: 0px;
background-color:transparent;
margin-left: 3px;
margin-top: 3px;

width: 36px;
height: 36px;
}

What it currently looks like: http://84.80.135.87/scoreboard%20th%20ctf/

i really don't see why this is not working, it is just ignoring the margins. i have tested this in Firefox and Chrome, it works in neither

Upvotes: 0

Views: 249

Answers (2)

Pawan Lakhara
Pawan Lakhara

Reputation: 1150

use this 

.header .search .box 
{
    background-color: transparent;
    border: 0 none;
    height: 37px;
    margin-left: 5px;
    margin-top: -1px;
    padding: 0;
    width: 260px;
    display:block;
}

Upvotes: 1

Gareth Cornish
Gareth Cornish

Reputation: 4356

Your problem is the vertical alignment of your image input field. It is aligned relative to the other inline elements in the line (in this case your text input field) the same way an image would - the bottom of the image is aligned with the baseline of the text. To fix this, alter your CSS as follows:

.header .search .submit{
border: 0px;
background-color:transparent;
margin-left: 3px;
margin-top: 3px;
vertical-align: top; /* Modify the vertical alignment. */    
width: 36px;
height: 36px;
}

Upvotes: 4

Related Questions