Link to home
Start Free TrialLog in
Avatar of dkim18
dkim18

asked on

Link underline behavior issue in same version of IE

Hi Experts,

I am having a weird link underline behavior in same version of IE.
I am testing web based app and a underline in footer on a login page act differently between same version of IE.(one in intranet and another one is in my machine that is connected via VPN.)

From the below code, there is no underline for the first "Contact Us" link (IE 8) in company's work station. (the second "Contact" underline works fine everywhere.) However, everything is fine (also IE 8) in my laptop that is connected via VPN. I tried to manipulate css file, but wasn't successful.
I checked another co-worker's IE (within intranet) and it's also showing same issue.

I cleared cache in IE, but didn't help.

My question is why the "Contact Us" underline(the first one) is working in my laptop with same version of IE, but is not working in company's IE browser.

Any ideas?

<div id="foot">
			<a href="http://www.xxx.org/" rel="external" title="xxx"><img src="./images/xxx.png" alt="xxx" /></a> 
			<ul><li>
			  
			<a  href="mailto:xxx@xxx.org" title="Send an Email">Contact Us</a></li>
			    <li>xxx</li>
			    <li>xxx</li><li>xx, xx 7777</li> 
			    <li>xxx-xx-xxxx</li>
			 
			   
			  
			</ul>
			<a href="http://www.xxx.org/" rel="external" title="xxx"><img src="./images/xxx.png" width="200" height="18" alt="xxx" /></a> 
			 
			 
			
			<ul><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			
			<a href="mailto:xxx@xxx.org" title="Send an Email">Contact Us</a></li>
			    <li> xxx</li>
			    <li>xxx Ave.</li><li>City, xx  88888</li> 
			    <li>xxx-xx-xxxx</li><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
			    
			  
			</ul>
			 
			 
			
		</div>

/////////////////////////////////// css file /////////////////

/* *****************
FOOTER
***************** */

#foot {
	clear: both;
	height: 110px;
	background: url(./css_images/gradient05.png) 0 0;
	z-index: 50;
	overflow: hidden;		
}
#foot img {
	margin: 10px 10px -20px 20px;
}

#foot ul {
	position: relative;
	top: -2px;
	display: block;
	width: 760px;
	height: 10px;/* spacing between KKI address and OIF address*/
	margin-left: 190px;
	font-size: 12px
}

#foot ul  li {
	display: inline;
	margin: 4px;
}

#foot ul  li:first-child {
	margin-left: 0;
}

#foot a {
	color: black
} 

Open in new window

Avatar of Carlos Llanos
Carlos Llanos
Flag of United States of America image

Try using FF to try to pin point the exact css rule that's causing this.  Also, in IE there is a set of developer tools that will help you determine with css rules in which file are getting triggered.

Without have the website link, it would be difficult for us to test...but not impossible.  If not solved before I get back from lunch, I will take a deeper look into this.
Avatar of dkim18
dkim18

ASKER

BTW, in other web browsers(FF, Chome, Safari) things work just fine.
have you tried setting it explicitly:

#foot a{
text-decoration:underline;
}

or if you don't want the underline...

#foot a{
text-decoration:none;
}
Avatar of dkim18

ASKER

kozaiwaniec,

I did, but didn't work. Of course, IE in my laptop works fine with/without it.
Avatar of dkim18

ASKER

FYI, I already rebuilt/cleaned restarted tomcat server, but didn't help.
you shouldn't really do this on a regular basis, but just for testing purposes, try putting the style inline and see if that helps:


<a href="mailto:xxx@xxx.org" style="text-decoration:underline;" title="Send an Email">Contact Us</a></li>
Avatar of dkim18

ASKER

I already tried it, but didn't work. Very strange...
Avatar of dkim18

ASKER

FYI, if I switch around the first "contact us" and the second "contact us", it still didn't work. so, I am thinking something wrong the first contact us link. If I get rid of the image in front it, it still doesn't work.
Is the link clickable? does it work, just without an underline, or is it completely disabled?
Avatar of dkim18

ASKER

yes, the link is clickable and it works. just no underline...
maybe in some other css file the visited state is overriden - just guessing here.

you could try setting all the states and using !important:

a:link, a:hover, a:visited, a:active{
  text-decoration:underline !important;
}
Avatar of dkim18

ASKER

sorry, no luck...

BTW, how come the first link does show in IE 8 (my laptop)?
Avatar of dkim18

ASKER

a:link, a:hover, a:visited, a:active{
  text-decoration:underline !important;
}

the above code made other link(no underline) on the navigation panel underline though...
Avatar of dkim18

ASKER

I just tested it thru Citrix and the underline appears for a just split second and then disappears.....weird.
yes, it would make all links underline because I didn't specify any containing class. I left that up to you.. :)

not sure what else to suggest..

if you really want an underline though, you could "cheat", and give it a border-bottom.
Avatar of dkim18

ASKER

border-bottom cheat didn't work either. I don't think any style works for the first contact us link...
it sounds like something is covering it. Can you post a link to the actual page?
Avatar of dkim18

ASKER

it is an intranet site...
oh.

At this point without actually seeing the page there's not much more comes to mind.. sorry.

the only other thing I can see is an extra space between the a and the href, but Im grasping at straws...
Avatar of dkim18

ASKER

what would you suggest to make the "Contact Us" a link?
I tried <b> around <a href> tag and it worked.
Avatar of dkim18

ASKER

I meant to make looks like a link intuitively...
ASKER CERTIFIED SOLUTION
Avatar of Kyle Hamilton
Kyle Hamilton
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
or you could do something like add symbols and add the words "click here":

>> click here to email us <<
Avatar of dkim18

ASKER

background-color:yellow worked, but  border-bottom:1px solid blue didn't work.

>> click here to email us <<  is too long.
hmmm... there is something on the bottom obscuring it - I don't know...
Avatar of dkim18

ASKER

you tried enough. I will give you points. thanks for your help.
:)

hope it works out..