Link colour problem in IE

[hissam]

I'm currently designing a website in css and it shows up fine in Firefox but not in IE, heres the link www.sibilanguages.com now if you open it in firefox you'll see the english and the german flag on the top left corner without any border or such but if you open it in IE you get to see an ugly blue border around it, i cant seem to figure out why, i've gone through the css a million times but i dont know what im doing wrong. PLease help!

and thanx for the help!

/***************************************************
   HTML Element Styles
 ***************************************************/

body {
  margin: 0;  
  text-align: center;
  font: 0.62em verdana, arial, sans-serif;  
  line-height: 170%;
  color: #EEE;
  background: #585858 url(../images/bg_body.jpg) repeat-y top center;
}

p { 
  padding-top: 10px !important;
  padding-top: 3px;
  padding-bottom: 10px !important;
  padding-bottom: 3px;
}


/*a {
  color: #86E160;
}

a:visited {
  color: #AAA;
}

a:hover {
  color: #FFF;
}*/

acronym {
  cursor: help;
  border-bottom: 1px solid #777;
}

input {
  width: 70%;
}

textarea {
  width: 98%;

}

input,
textarea {
  padding: 1px 3px;
  margin: 5px 0;
  font: 1em verdana, arial, sans-serif;
  color: #EEE;
  background-color: #777;
  border: 1px solid #999;
}

input:hover,
input:focus,
textarea:hover,
textarea:focus {
  color: #FFF;
  background-color: #999;
  border: 1px solid #EEE;
}


h1 {
  clear: both;
  margin: 10px 0;
  font: 700 1em verdana, sans-serif;
  text-transform: uppercase;
  color: #7BD32C;
  background: #686868 url(../images/rounded_tr.gif) no-repeat top right;
}

h1 span {
  display: block;
  padding: 2px;
  background: url(../images/rounded_br.gif) no-repeat bottom right;
}

#sideBar h1 {
  text-align: right;
  background: #686868 url(../images/rounded_tl.gif) no-repeat top left;
}

#sideBar h1 span {
  display: block;
  padding: 2px;
  background: url(../images/rounded_bl.gif) no-repeat bottom left;
}


#content ol li { 
  color: #9BE4FF;
}

#content ol li span {
  color: #EEE;
}

#content ul {
  padding-bottom: 10px;
}

#content ul li {
  list-style-image: url(../images/li_bullet.gif);
}

blockquote {  
  margin: 0;
  background: #686868 url(../images/rounded_tr.gif) no-repeat top right;
} 

blockquote span {
  display: block;
  padding: 5px;
  background: url(../images/rounded_br.gif) no-repeat bottom right;
}

/***************************************************
  Layout Element Styles
 ***************************************************/


#header {  
  width: 100%;
  height: 3em;
  background: #585858 url(../images/bg_header.jpg) repeat-y top center;  
}

/***************************************************
  Header Menu
 ***************************************************/

#menu {
	width: 767px;
	margin: 0 auto;
	text-align: left;
	padding-left: 10px;
}

#menu ul {
  margin: 0;
  padding: 0;
  line-height: normal;  
}

#menu ul li {
  width: 8em;
  display: inline;
  float: left;
  padding-top: 0.8em;  
  list-style: none;
  text-align: center;
}

#menu ul li a {
  display: block;
  text-decoration: none;
  text-transform: uppercase;
  padding-bottom: 1.0em;
  color: #222;
}

#menu ul li a:hover,
#menu ul li a.active {
	font-weight: bold;
	color: #000000;
}


/***************************************************
  Site Title
 ***************************************************/

#title {
  padding: 0.6em 5px 0.6em 0;
  margin-right: 0.5em;
  float: right;
}

#title h1 {
	display: inline;
	color:  #222;
	background-color: #86E160;
	background-image: none;
}

#title2 {
  padding: 0.6em 5px 0em 0;
  margin-left: 0.5em;
  float: left;
}

#title2 h1 {
	display: inline;
	color:  #222;
	background-color: #86E160;
	background-image: none;
}


/***************************************************
 Page Content
 ---------------------------------------------------
 1. Left side text
 2. Dropdown image
 3. Right side bar 
 ***************************************************/


#content {  
  clear: both;
  width: 767px;
  margin: 0 auto;
  text-align: left;
}

#text {
  float: left;
  width: 130px!important;
  width: 130px;
  padding: 10px 5px 20px 20px !important;
  padding: 20px 5px 20px 20px;
}

#image {
  float: left;
  width: 220px;  
  vertical-align: top;
}

#sideBar {
  float: right;
  width: 370px!important;
  width: 400px;
  padding: 10px 15px 20px 0 !important;
  padding: 20px 15px 20px 0;
}


/***************************************************
 Sidemenu Styles
 ***************************************************/

.sideMenu {
  padding: 15px 0;
}

.sideMenu a {
  display: block;
  text-align: right;
  text-decoration: none;
  margin-bottom: 1px;  
}

.sideMenu a span {
  display: block;
  padding: 1px;
}

/*.sideMenu a:hover {
  background: #686868 url(../images/rounded_tl.gif) no-repeat top left;
}

.sideMenu a:hover span {
  background: url(../images/rounded_bl.gif) no-repeat bottom left;
}*/

/***************************************************
 Comment Styles
 ***************************************************/

#comments p {
  padding: 0 5px;
  margin-bottom: 0;
  background: #686868 url(../images/rounded_tl.gif) no-repeat top left;
}

#comments p span.author {
  display: block;
  margin-top: 5px;
  text-align: right;
  font-weight: 700;
}

#comments img {
  margin-top: -1px;
}

/*#comments a {
  color: #7BD32C;
}

#comments a:visited {
  color: #AAA;
}

#comments a:hover {
  color: #FFF;
}*/

/***************************************************
 Footer
 ***************************************************/

#footer {
  clear: both;
  float: right;
  width: 500px;
  padding: 10px 20px;
  color: #888;
}

#footer p {
  padding-top: 0 !important;
  padding-top: 10px;
}

#footer a {
  color: #888;
}

#footer a:hover {
  color: #EEE;
}


/***************************************************
 Generic Display Classes
 ***************************************************/

.center {
  text-align: center;
}

.noPad {
  padding: 0;
  margin: 0;
}

.left {
  float: left;
}

.right {
  float: right;
}

img.left {
  padding: 5px 5px 5px 0;
}

img.right {
  padding: 5px 0 5px 5px;
}

.button {
  width: auto;
  cursor: pointer;
}

.date {
  display: block;
  font-weight: 700;
}

[abduraooft]

Just add

a img{
border:none;
}

into your CSS

PS: please wrap your code with [CODE][/CODE] tags while posting here, you may edit your above post.

[ktsixit]

hissam,
I think that you should add the border="0" in your img tags:

<img height="14" width="20" alt="" border="0" src="images/english-dark.jpg"/>
<img height="14" width="20" alt="" border="0" src="images/german.jpg"/>

[hissam]

thanx abduraooft and ktsixit

both worked!!! you guys are amazing! and thanx for the fast reply!!!!

wohoo!!!!

[abduraooft]

Originally Posted by ktsixit

hissam,
I think that you should add the border="0" in your img tags:

<img height="14" width="20" alt="" border="0" src="images/english-dark.jpg"/>
<img height="14" width="20" alt="" border="0" src="images/german.jpg"/>

No! border is a deprecated attribute.

[ktsixit]

ok! ok! Just tried to help!

I just use this all the time and it works fine. Why is it deprecated?

[abduraooft]

I just use this all the time and it works fine. Why is it deprecated?

W3 decided to keep the data and styling information separate and thus attributes like align, color, bgColor, border etc all are deprecated now. See a list of other such tags and attributed at http://www.evotech.net/blog/2007/07/...nd-attributes/

[ktsixit]

I was not aware of that, thank for this