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

css links IE vs Firefox...

2 part question for the following code.

webpage piece:
<ul class="oTriList">
          <li><a href="cat_1421.jsp" class="newsLinks">EXCITING NEWS: gIDE is NOW an ADA CERP Recognized Provider</a></li>
</ul>

linked css piece:  
a.loginout:visited { font-family: Verdana, Arial, Helvetica, sans-serif, Tahoma; font-size:10pt; color: #f3901d; font-weight: bold; cursor: pointer; text-decoration: none;}
a.newsLinks:hover { font-family: Verdana, Arial, Helvetica, sans-serif, Tahoma; font-size:7pt; color: #666666; font-weight: bold; cursor: pointer; text-decoration:underline;}
a.newsLinks:link {  font-family: Verdana, Arial, Helvetica, sans-serif, Tahoma; font-size:7pt; color: #4e8abe; font-weight: bold; cursor: pointer; text-decoration: none;}
ul.oTriList li { list-style-type: none; margin-left: -30px; padding-left:10px; background-image: url(http://216.150.213.182/servlet/ImageServer/anonymous_hotdesk_4/@gide/arr_o_small.gif); background-repeat: no-repeat; background-position: 0% 50%;}

the page can be viewed at www.gide.htsp.com

First,
The hover for the link doesn't work in Firefox but it works in IE.  However, hover doesn't work at all in either IE or Firefox  if the link has been visited.  Can I make the hover work in Firefox and once it's been visited in both IE & Firefox.

Second,
Is there anyway with css to make my triangle bullet be centered to the first line of the text (the text wraps) instead of it being centered to both lines or do I need to put the bullet and the text in a table aligned properly?
0
one2goofy
Asked:
one2goofy
  • 4
  • 2
2 Solutions
 
GrandSchtroumpfCommented:
for part 1, change the order to this:

a.newsLinks:link { ... }
a.loginout:visited { ... }
a.newsLinks:hover { ... }

All these selectors have the same specificty, so it's the last one that will override the others in case of conflicts.

for part 2, it cannot be done in a simple way...  i'll see if i can come up with something though.
0
 
GrandSchtroumpfCommented:
oops, i copied the error from your post... should have been:

a.newsLinks:link { ... }
a.newsLinks:visited { ... }
a.newsLinks:hover { ... }
0
 
one2goofyAuthor Commented:
right - that is what I meant to post
0
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

 
GrandSchtroumpfCommented:
ul.oTriList li {
  list-style-type: none;
  margin-left: -30px;
  padding-left: 10px;
  background-image: url(http://216.150.213.182/servlet/ImageServer/anonymous_hotdesk_4/@gide/arr_o_small.gif);
  background-repeat: no-repeat;
  background-position: 0 .6em;
  padding-top: 5px;
  line-height: 1.2em;
}

The idea is to shift the text down half the height of the background image and shift the background down half the line-height:

  padding-top: 5px;    -> 5px = half the height of the image
  background-position: 0 .6em;    -> .6em = half the line-height
0
 
one2goofyAuthor Commented:
Works great!  Thanks!
0
 
GrandSchtroumpfCommented:
it works fine in firefox, but you set your font-size in "px" in IE, so it looks strange when you change the text-size.
it's better to use percentage values or "em" values for the font-size.
:)
0

Featured Post

2018 Annual Membership Survey

Here at Experts Exchange, we strive to give members the best experience. Help us improve the site by taking this survey today! (Bonus: Be entered to win a great tech prize for participating!)

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now