Weinz Weinz - 1 month ago 8
CSS Question

Same css and HTML code but looking different on 2 pages

I have the following HTML code on 2 pages:

<form id="searchform" action="http://conelmorrofino.com/" method="get" role="search">
<div>
<input id="s" type="text" name="s">
<input id="searchsubmit" type="submit" value="">
</div>
</form>


and the following CSS:

#s {
background:#C5C6C8;
border:0;
border-radius:5px,0px,5px,0px !important;
margin-bottom:15px;
padding-left:10px;
padding-right:35px;
width:123px;
float:left;
-moz-border-radius:5px,0px,5px,0px !important;
-webkit-border-radius:5px,0px,5px,0px !important;
}
#searchsubmit {
background: url("images/search_icon.jpg") no-repeat scroll right center #C5C6C8;
border: medium none;
border-radius: 0 5px 5px 0;
cursor: pointer;
float: left;
height: 30px;
margin-top: 4px;
width: 22px;
}
input[type="text"] {
border-radius: 5px 0 0 5px;
height: 28px;
margin-top: 4px;
}


The form have the perfect style in the homepage and on other pages it doesn't look right and the same.. It has less width... and the other more height..

Live exameples - It's the search field in the right sidebar:

Home : http://conelmorrofino.com/ -- Here looks perfect

Other page: http://conelmorrofino.com/mapa/ -- Less width on the search input...

What can be wrong? Thank you guys in advance...

Answer

You're right, the code is the same. When that happens, I always start with fixing the errors: http://validator.w3.org/check?uri=http%3A%2F%2Fconelmorrofino.com%2Fmapa%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

Right now it's not even finishing, so after you fix your doctype, you might find something more revealing. If you're still having trouble, then just report back after the doctype is fixed. (You just need to make it the first thing on the page, right now there is a linebreak and space before it)