Hide border in internet explorer


I have a search box which I’m targeting with an id of search-field. I set the border: to none but for some reason the border still shows on all versions of IE.

Any idea why or how can I hide it in IE?

Thanks a lot!

There might be a more specific rule just for IE that is overriding it. We’d need to see a live link to be track it down, though.

This is the CSS file I’m using and I dont see anything that could be possibly overriding it.

body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol, li, dl, dt, dd, form, a, fieldset, input th, td {
			margin: 0;
			padding: 0;
			border: 0;
			outline: none;
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-family: "Georgia", Trebuchet MS, "Comic Sans MS",serif;  color:#982319;}
ul, ol { list-style: none; }
p{margin:0 0 15px 0;}

.float-left { float:left; }
.float-right { float:right; }
.clear-left { clear:left; }
.clear-right { clear:right; }
.clear-both { clear:both; }
h1 {font-size:45px; margin:0 0 40px 0;}
h2 {font-size:24px; font-family: Trebuchet MS, sans-serif}
h3 {font-size:16px; font-style:italic;}
a {text-decoration: none; }
a:hover{text-decoration: underline; color:#999;}
a:visited {color:#999;}
.article-secction{margin: 0 0 50px 0; border-bottom:1px solid #999;}
.article-secction img{float:left; padding:0 20px 0 0;}
.article-secction h3{color:#333333;}
.small-text{font-size:11px; color:#333;}
.small-bold{font-size:11px; color:#333; font-weight:bold;}

/* STRUCTURE-----------------*/
body {
			line-height: 1;  /* this is part of the reset*/
			text-align:center; /*this is to center the layout in IE6*/
			background-image: url(images/main-background.jpg);
			font-family: Verdana, Arial, Helvetica, sans-serif;
			font-size: 100%;

#page-wrap {
			width: 980px;
			margin:0px auto;
			text-align: left;
#header { height:105px; width:100%; margin:0;  background:url(images/header-background.jpg); background-position:62px 0px;  background-repeat:no-repeat; }
#logo{ margin:15px 0;}
#logo a{ padding: 0;}
#saludos{background-image:url(images/saludos-btn.jpg); width:144px; height:29px; padding:0;
	 margin:15px 0 0 0;color:#ccc; background-position: center; background-repeat: no-repeat; text-align:center; text-indent:-9999px;
a:link#saludos { color:#fff; font-size:16px;}
a:hover#saludos { color:#999;}

#search-box{float:left; height:54px; background-image:url(images/search-background.jpg); width:259px;}
#cse-search-box{padding:18px 0 0 45px;}
/*#search-button{ float: right; padding: 0 15px 0 0; }*/
#field-box{ color:#999; text-align:center; font-size:12px; border:none; padding:0; margin:0;}

/* NAV*/
.nav {
			overflow:hidden;/*added overflow to contain the floated li*/
		 width: 720px;

ul.nav li { overflow:hidden; float:left;text-indent:-9999px; display:inline; }

ul.nav a {
			color: #fff;
			height: 54px;

.nav li.principal {width: 132px;}
.nav li.principal a{background-position: 0px 0px; }
.nav li.principal a:hover{ background-position: 0px -53px;}

.nav li.educacion { width: 136px;}
.nav li.educacion a{background-position: -132px 0px;}
.nav li.educacion a:hover{ background-position: -132px -53px;}

.nav li.servicios{ width: 125px;}
.nav li.servicios a{background-position: -268px 0px;}
.nav li.servicios a:hover{background-position: -268px -53px;}

.nav li.historia { width: 119px;}
.nav li.historia a{background-position: -393px 0px;}
.nav li.historia a:hover{background-position: -393px -53px;}

.nav li.fotos{ width: 90px;}
.nav li.fotos a{ background-position: -512px 0px;}
.nav li.fotos a:hover{background-position: -512px -53px; }

.nav li.sabias{ width: 118px;}
.nav li.sabias a{ background-position: -602px 0px;}
.nav li.sabias a:hover{ background-position: -602px -53px;}

#main-content { margin:33px 0px 20px 0px; width: 630px;float:left; 
	background-color:#ffffff;  border-color:#858585; border-width:1px; border-style:solid; padding: 20px; 
/* this is for any custom page that dont use the side bar, where the content area needs to grow*/
#main-content-no-side-bar { margin:33px 0px 20px 0px; width: 930px;float:left; 
		background-color:#ffffff;  border-color:#858585; border-width:1px; border-style:solid; padding: 20px; 

#side-bar { margin:33px 0px 0px 0px ; float:right; width:290px; position:relative; }
.side-box{ margin:0 0 20px 0;}
.side-box li p {font-size:11px; background-color:white; padding:5px; margin:10px 0;}
.box-content{ background-color:#fff;border-style: solid; border-width:1px; border-color: #666; padding:20px;}
#side-bar ul{ padding:15px 25px 25px 25px;}
#side-bar ul a{padding:10px 0px 0px 35px; font-weight: bold; color:#ccc; text-decoration: none; display:block; height:32px;}
#side-bar ul a:hover{ text-decoration: none; color:#fff; background-color:#ccc;}
#side-bar ul img{padding:15px 0 0 0	}
.box-group #huitzila a { background-image:url(images/h-huitzila.jpg); background-position: left; background-repeat:no-repeat;}
.box-group #milpillas a { background-image:url(images/m-milpillas.jpg); background-position: left; background-repeat:no-repeat;}
.box-group #facebook a { background-image:url(images/f-facebook.png); background-position: left; background-repeat:no-repeat;}
.box-group #twitter a { background-image:url(images/t-twitter.png); background-position: left; background-repeat:no-repeat;}

#footer { margin: 0 0 5px 0; background-color: #333; padding:20px; position:relative;}
#footer-content { background-color: #fff; border-width: 10px; border-color: #982319; border-style: solid; padding: 25px; 
	background-image: url(images/enlaces-bg.jpg); background-repeat: no-repeat; background-position: 550px 25px;overflow:hidden;
#footer ul {margin:0 0 0 50px;}
#footer-header{ display:block; border: 3px solid #982319; position:absolute; 
                 left:70px; top:12px;  background:#333; padding:0 30px 0 30px;
#footer-header h2{font-size:18px; color:#fff; font-weight:bold;}
#copyright{float:right; padding:0 0 20px 0; font-size:12px;}

This is the text field I’m trying to hide the border for

<input type="text" id="field-box" name="q" />

Sorry the Id is “field-box” not search-field as I originally stated.

Thanks a lot

<input id=“field-box” type=“text” size=“8” name=“q” style=“border: 1px solid rgb(126, 157, 185); padding: 2px; background: rgb(255, 255, 255) url(http://www.google.com/cse/intl/es/images/google_custom_search_watermark.gif) no-repeat scroll left center; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;”/>

This is the code I see in Firebug, could this be some sort of Javascript from Google since I’m using the Google’s search?

IE needs this for inputs.

#field-box {
  [B]  border:0 none;
[/B]    padding:0;

<=IE7 won’t get rid of borders on form elements when border:none is used. You need to use border:0 or border:0 none.

Unless the border has been defined by a previous border command:

input{border:5px solid red}
input {width:200px;border:none}

Aww man. Paul beat me to the solution and I think his is better anyway
I didn’t know ie needs both 0 & none to eliminate borders? Now I know :slight_smile:

Yes fs_tigre it is.

The js or one of the Google files applys a 1px border by writing it online.

How to make this border go away in Ie? Hmmm… well you could but the styling below and make sure that it is either the last thing in the head so that it potentially loads last and could overwrite anything above it. Or if you prefer not to do that Then put it after the last link to one of googles files for the search.

<!-- [if IE]>
            border: none;

<! [endif]-->

I know parts of that may seem unnecessary part I did it so that you can have all the bases covered When the browser is IE.

Give that a try and remeber to out it as close to the end head tag as possible :slight_smile:

Team 1504

Wow! Thank you all very much for your help.

I will give it a try and let you know.