• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 590
  • Last Modified:

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

0
dkim18
Asked:
dkim18
  • 15
  • 11
1 Solution
 
Andrew DerseIT ManagerCommented:
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.
0
 
dkim18Author Commented:
BTW, in other web browsers(FF, Chome, Safari) things work just fine.
0
 
Kyle HamiltonData ScientistCommented:
have you tried setting it explicitly:

#foot a{
text-decoration:underline;
}

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

#foot a{
text-decoration:none;
}
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
dkim18Author Commented:
kozaiwaniec,

I did, but didn't work. Of course, IE in my laptop works fine with/without it.
0
 
dkim18Author Commented:
FYI, I already rebuilt/cleaned restarted tomcat server, but didn't help.
0
 
Kyle HamiltonData ScientistCommented:
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>
0
 
dkim18Author Commented:
I already tried it, but didn't work. Very strange...
0
 
dkim18Author Commented:
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.
0
 
Kyle HamiltonData ScientistCommented:
Is the link clickable? does it work, just without an underline, or is it completely disabled?
0
 
dkim18Author Commented:
yes, the link is clickable and it works. just no underline...
0
 
Kyle HamiltonData ScientistCommented:
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;
}
0
 
dkim18Author Commented:
sorry, no luck...

BTW, how come the first link does show in IE 8 (my laptop)?
0
 
dkim18Author Commented:
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...
0
 
dkim18Author Commented:
I just tested it thru Citrix and the underline appears for a just split second and then disappears.....weird.
0
 
Kyle HamiltonData ScientistCommented:
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.
0
 
dkim18Author Commented:
border-bottom cheat didn't work either. I don't think any style works for the first contact us link...
0
 
Kyle HamiltonData ScientistCommented:
it sounds like something is covering it. Can you post a link to the actual page?
0
 
dkim18Author Commented:
it is an intranet site...
0
 
Kyle HamiltonData ScientistCommented:
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...
0
 
dkim18Author Commented:
what would you suggest to make the "Contact Us" a link?
I tried <b> around <a href> tag and it worked.
0
 
dkim18Author Commented:
I meant to make looks like a link intuitively...
0
 
Kyle HamiltonData ScientistCommented:
did the underline show up?

if not,

you could always apply a class to the containing element. Use a span if you don't want it to be bold:

<span class="underline"><a href=......

.underline{
   border-bottom:1px solid blue;
   background-color:yellow; /* maybe? */
}
0
 
Kyle HamiltonData ScientistCommented:
or you could do something like add symbols and add the words "click here":

>> click here to email us <<
0
 
dkim18Author Commented:
background-color:yellow worked, but  border-bottom:1px solid blue didn't work.

>> click here to email us <<  is too long.
0
 
Kyle HamiltonData ScientistCommented:
hmmm... there is something on the bottom obscuring it - I don't know...
0
 
dkim18Author Commented:
you tried enough. I will give you points. thanks for your help.
0
 
Kyle HamiltonData ScientistCommented:
:)

hope it works out..
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

  • 15
  • 11
Tackle projects and never again get stuck behind a technical roadblock.
Join Now