CODEWITHSUNDEEP
csscross-browsercss-position
flaidlaw
flaidlaw

Reputation: 3

CSS Relative Positioning+Browser Compatibility

I'm trying to position a searchbox and submit button so that they are line up. I've used a CSS reset to have all browsers starting from the same level. For whatever reason, I can't get them to line up on the IE, Chrome and Firefox. I can get it working on 1/3 but not 3/3. With the current code, the search button is aligned in FF, 1px lower in IE, and 3-5px lower in Chrome. Any help is much appreciate as I am at my wits end.

Here's the code.

HTML snippet:

<span class="search">
            <form id="searchbox" action="/search" method="get">
                <input name="query" id="search" type="text" placeholder="I'm looking for..."/>
                <input id="submit" class="mglass" type="submit" value=""/>
            </form>
    </span>

CSS snippet:

* {
    vertical-align: baseline;
    font-weight: inherit;
    font-family: inherit;
    font-style: inherit;
    font-size: 100%;
    border: 0 none;
    outline: 0;
    padding: 0;
    margin: 0;
    }
#search{ 
    position: relative;
    bottom: 1px;
    height: 27px;
    width: 200px;
    font-size: 14px;
    font-family: 'calibri', Tahoma, Geneva, sans-serif;
    border: none;
    background-color: #eee;
    border-width: 1px;
    border-style: solid;
    border-color: #cccccc;
    padding-left: 10px;
}
#searchbox{
    position: relative;
    right: 27px;
    top: 5px;   
    float: right;
}
input[type="submit"]::-moz-focus-inner {
    border: 0;
    padding: 0;
}
input[type="text"]::-moz-focus-inner {
    border: 0;
    padding: 0;
}
.mglass{
    background: url(../images/search_glass01.png) no-repeat center;
    height: 29px;
    width: 33px;
    border-width: 1px;
    border-style: solid;
    border-color: #cccccc;
    position: relative;
    right: 7px;
    bottom: 0px;
}
.mglass:hover{
    background: url(../images/search_glass02.png) no-repeat center;
}

Upvotes: 0

Views: 1611

Answers (1)

Lowkase
Lowkase

Reputation: 5699

I had to hack up your CSS a bit and simplified some of the selectors to get my head around it, but, give this a try:

http://jsfiddle.net/R56mu/

body {
    vertical-align: baseline;
    font-weight: inherit;
    font-family: inherit;
    font-style: inherit;
    font-size: 100%;
    border: 0 none;
    outline: 0;
    padding: 0;
    margin: 0;
    }

#searchbox{
    float: right;
    overflow:hidden;
}

#search{ 
    width: 200px;
    height:32px;
    float:left;
    padding: 0 0 0 10px;
    background-color: #eee;
    font-size: 14px;
    font-family: 'calibri', Tahoma, Geneva, sans-serif;
    border: none;
    border-width: 1px;
    border-style: solid;
    border-color: #cccccc;    
}
#submit{
    width: 33px;
    height:34px;
    float:left;
    background: url(../images/search_glass01.png) no-repeat center;
    border-width: 1px;
    border-style: solid;
    border-color: #cccccc;   
}

#submit:hover{
    background: url(../images/search_glass02.png) no-repeat center;
}

input[type="submit"]::-moz-focus-inner {
    border: 0;
    padding: 0;
}
input[type="text"]::-moz-focus-inner {
    border: 0;
    padding: 0;
}

Upvotes: 1

Related Questions