CSS - Link Not Being Shown As Visited In Netscape/mozilla

Code:

<style>
<!--
BODY{
	cursor:url("Hand.USA.cur");
	}

a, a:hover {
	cursor:url("Hand.USA.cur");
	}

-->
</style>

I'm using the above code to display an icon that is replacing the default arrow. This only seems to work in Internet Explorer 6+. Would anyone know another way to display an image or icon either through a url (http://www.blah.com/img.jpg) or .cur or .ani that will work in Mozilla, and Netscape ?

Thanks,

Shawn

Just testing this in different browsers and noticed that the image is shown in the background but does not go to the background-position that is specified. This works for IE. Does anyone know if there is a different way of doing this?

<STYLE type="text/css">
BODY { background-image:url(awesome.gif); background-repeat:no-repeat; background-position:50 220; background-attachment:fixed }
</STYLE>

Thank you for an insight into this little glitch.

Hi,
I need some help with understanding why netscape is rendering list items differently to IE

The Embedded (Dreamweaver-wizard-created) style sheet looks like this:
Code:

<style type="text/css">
<!--
.bul-mnu-lst {
	font-family: "Trebuchet MS", "Andale Mono", "Arial Unicode MS", "Eras Medium ITC", "Microsoft Sans Serif";
	font-size: 80%;
	line-height: 140%;
	color: #666666;
	list-style-position: inside;
	display: list-item;
	font-weight: bold;
	vertical-align: text-top;
	list-style-image:  url(hme_imgs/bullits/dottedArrw_bul.jpg);
	list-style-type: none;
}
-->
</style>

the HTML using the sheet looks like this:
Code:

<div id="activitiesMnu" style="position:absolute; width:218px; height:186px; z-index:1; left: 17px; top: 227px; visibility: visible;">
        <p class="bul-mnu-lst">&nbsp;&nbsp;football</p>
        <p class="bul-mnu-lst">&nbsp;&nbsp;rugby</p>
        <p class="bul-mnu-lst">&nbsp;&nbsp;tennis</p>
        <p class="bul-mnu-lst">&nbsp;&nbsp;badminton</p>
        <p class="bul-mnu-lst">&nbsp;&nbsp;swimming</p>
        <p class="bul-mnu-lst">&nbsp;&nbsp;squash</p>
        <p class="bul-mnu-lst">&nbsp;&nbsp;volley-ball</p>
</div>

The problem is, Netscape based browsers are ignoring the, line-height: attribute or just misinterpreting it and using what looks like double spacing between lines. This is causing the layer to overlap other page items and looks aweful.

In I.E, it looks as expected. i've tried changing to percentages instead of pixels for the value as heard percentages are best

Also tried, list-style-position from 'outside' to 'inside' values and, list-style-image: to non and used a default preset setting (square) bullet-style.

- but the problem persists.

any suggs??

Good Morning! First off I am not a professional, not even close. I have been teaching myself html & css on and off for the past 6 months. Ok so here is my issue:

I have a CSS rule:

a:link, a:visited {
display:block;
font-weight:bold;
color:#000;
background-color:#FFF;
width:200px;
text-align:left;
padding:10px;
text-decoration:none;
text-transform:uppercase;

}

The above rule is used on my side nav bar. My issue is now every <a href"etc.." </a> i place on my main page inherits all the above attributes. How can eliminate all the parent stuff. Ive been trying to get this working for the past 2 hours and my brain is fried.!

Thanks for all your help!

-Chris

Thanks for taking the time to read my question.

I have links on my page that when visited, change color. Simple enough. I also have in my css a hover line that says change the color to white. This works on the unvisited links, but not the visited ones. Why?

Here is my css.

@charset "iso-8859-1";
.text {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #ffffff
}
.textCopy {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #CCCCCC;
hover: #ffffff
}
.textbigger {

font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #CCCCCC;
hover: #ffffff
}
a:hover {
color: #ffffff;
}
a:link {
color: #999999;
}

a:visited {
color: #747474;
}

a:active {
color: #CCCCCC;
}

body {
margin-top: 0;
background-color: #000000;

}

You can see this at work at www.pierced.ca

Brad

Hi. Pleeease help!

I've created a CSS for a CMS but I'm having a problem with text color.

I wanted the links to change from black to white text when hovered over. I seem to have achived this . . . until they have been clicked, and then that function is disabled and they just stay black all the time.

I tried deleting cookies and temp internet folders. I tried using the :visited option in the CSS and putting color white in it and that didn't work.

Can anyone help?

Thanks for taking the time to read my question.

It's been a while since I last tried making a page.

I've got some images as href's and want to show a border around them on the hover. It's not working, they're just showing up as purple (default visited). This makes some sense as the links are just bookmarks on the same page. But in my css I have
link, visited, and active all the same color. Only hover is different, and none of them are purple.

I've read this http://www.w3schools.com/css/css_pseudo_classes.asp and I think I've got it, but it's not working.

HTML
Code:

<a class"NavButtons" href="AssetDataDBHelpFile.htm#AssetForm"><img src="Computer.jpg" width="133" height="84" alt="Asset Management Form"></a>
<a class"NavButtons" href="AssetDataDBHelpFile.htm#PeripheralForm"><img src="Peripheralbutton.jpg" width="133" height="84" alt="Peripherals Management Form"></a>
<a class"NavButtons" href="AssetDataDBHelpFile.htm#ReportCenter"><img src="Report.jpg" width="133" height="84" alt="Report Center Form"></a>

CSS
Code:

a.NavButtons:link {
border-color: green;
border-width: 2px;	  
border-style: solid;
}     /* unvisited link */

a.NavButtons:visited {
border-color: green;
border-width: 2px;	  
border-style: solid;
}  /* visited link */

a.NavButtons:hover {
border-color: Red;
border-width: 2px;	  
border-style: solid;
}   /* mouse over link */

a.NavButtons:active {
border-color: green;
border-width: 2px;	  
border-style: solid;
}   /* selected link */

I have my links, and a:hover does not activate when the link has been visited. Is there any special for a hover visted link or any way to fix this?

Whew, it's been a while sin'ce i've been here. Thanks in advance!

~Brendan

I have another problem with IE for Windows:
I have several links which should not appear as links but should inherate the colors (grey or black) and decoration (none) from their parents ... works fine every where except MSIE for windows (where the usual red and blue - but no underline - appear)

the relevant styles:

<style type="text/css">

a:link {
text-decoration: none;
color: inherit;
}

a:visited {
text-decoration: none;
color: inherit;
}
</style>

the relevant html:

<h3 style="padding: 0; margin: 0.25em;color:#000000; ">Some <a href="http://www.theDanceGypsy.com/danceFinder.shtml" target="viewFrame">Dance Events</a> near you:</h3>
<ul class="newsList">
<li><a href="http://www.thedancegypsy.com/danceList.php?dance=dance-26:6-4" target="viewFrame"><span class ="unconfirmed">6/25: Bernardston~ <cite>Eastern Squares</cite>
</span></a></li>
<li><a href="http://www.thedancegypsy.com/danceList.php?dance=dance-30:6-4" target="viewFrame">6/26: Brattleboro~ <cite>Paneurhythmy</cite>
</a></li>

anyone have any idea for a workaround?
Thanx

my layout is pretty simple...

Code:

<div class="container">
 	<div class="topbar">
 	<div class="list">
 		<div class="gametitle"></div>
 		<div class="percentage"></div>
 		<div class="system"></div>
 	</div>
 </div>

i have the following CSS applied to gametitle, percentage and system... for somereason, gametitle doesnt work...

Code:

.gametitle {
 float:left;
 width:250px;
 color:#FFF;
 }
 .gametitle a:link,
 .gametitle a:visted,
 .gametitle a:hover {color:#FFF;}
 .percentage {
 float:left;
 color:#FFF;
 }
 .percentage a:link,
 .percentage a:visited,
 .percentage a:hover {color:#FFF;}
 .system {
 float:right;
 color:#FFF;
 }
 .system a:link,
 .system a:visited,
 .system a:hover {color:#FFF;}

here is the page where all this code is going down...

Mini Catalog

Hi there,

I'm back again I'm afriad with another minor problem with my new site design.

Have a look at the test version of my website he
http://www.eveythingfree.buildtolearn.net/classifieds/

If you are looking at it in Internet Explorer it should look fine, but if you try it in Mozilla Firefox or Netscape it looks badly messed up.

The problem is with the 2 boxes near the top of the page, the "latest forum posts" one and the "search box". The whole page (from bellow the navbar) is laid out by the php script that generates most of the content of the site. Thus I am limited in what I can adjust but I can use .css to layout these two boxes. Here is the css that controls the forum and search boxes:


Code:

.forums { 
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 10px; 
color: #666666; 
text-decoration: none; 
border: 1px solid #666666; 
padding: 5px 10px 10px; 
background-color: #F9F9F9; 
position: relative; 
width: 453px; 
height: 100px; 
left: 10px; 
top: 10px;  
vertical-align: top; 
margin-bottom: 10px;
float: left;
}

.searchbox {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #666666;
	text-decoration: none;
	border: 1px solid #666666;
	background-color: #F9F9F9;
	width: 230px;
	height: 100px;
	left: 20px;
	vertical-align: top;
	margin-bottom: 10px;
	padding-top: 15px;
	top: 10px;
	position: relative;
  
} 

.listings {
	position: relative;
	top: 10px;
}

Now I'm pretty sure that the problem lies with the "float" property in .forums. I seem to recall Mozilla and Netscape don't recognise this in the same way IE does.

Is there a way of making the site look the same in other browsers as it does in IE? Without the "float" property I have failed to get it to look right, but there must be some way around this problem.

I'd really appreciate any help, as this one thing has been holding me back for ages!


Thanks,
Robert

Oh, to say I'm gutted is under-rated, I thought I had mastered what is CSS design for one of my sites, that was until I decided to test it at work on FireFox, Netscape and Mozilla. For a start the content isn't in the center of the page, and some of the div's seem to be constrained into the right hand column, not sure why.

The page looks perfect in IE. But messed up in the others, I am kicking myself I have left it so late to check.

If any very nice person/people can help me sort this out I would be sooo happy, especially if I can understand why it is so messed up. I'm not really that technical, I'm a graphic designer so if you can help, keep it fairly simple please.

The link is: http://www.gladiatorszone.co.uk/main_new1.shtml

I think it might be a position element wrong or a float?

Just when I think I've finally seen it all, every way these browsers can **** up, there's always one more. This morning I discovered that Netscape 7 / Win does not properly render an a element with image content.

My example demonstrates that both IE 6 / Win and Netscape 7 / Win both have issues rendering a elements with text content also.

This seems like really basic stuff . . . how, HOW could Netscape 7 not be able to render the a with image content correctly???

(Another good question is why this forum doesn't allow you to upload HTML files . . . WTF?? -- you'll have to rename the file to .html)

I got this snippet from the Whateverhover website ... Code:

li.folder:hover   { z-index: 10 }		
ul ul, li:hover ul ul   { display: none }
li:hover ul, li:hover li:hover ul   { display: block }

I've managed to get it to work properly in IE and Firefox, but not in Netscape. The problem (rather, the symptom) in Netscape is that when one hovers an anchor that's inside a line item (<li><a ...></a></li>), the submenues don't pop up, but when the line item that contains the anchor is hovered, the menu pops up but won't stay up as the mouse pointer is moved from the line item to the submenu's line item. Again, this works fine in IE and Firefox.

Here's how I've used it: Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<style type="text/css">
body		{ margin: 0; behavior: url("../htcmime.php?file=csshover2.htc") }
*		{ font-family: Tahoma,Arial,Verdana,Helvetica,sans-serif; font-size: 10px }
table.nav	{ border-width: 1px; border-color: #000000; background-color: #FFFFFF }
td.links	{ vertical-align: top; width: 155px }
ul,li,a		{ margin: 0; padding: 0; border: 0 }
ul		{ width: 155px; background-color: #E2E2EF; list-style: none }
li		{ position: relative; border: 1px solid #FFFFFF; text-indent: 3px; padding: 1px; z-index: 9 }
li.folder	{  }		
li.folder ul	{ position: absolute; left: 150px; /* IE */ top: 0px }		
li.folder>ul	{ left: 145px /* others */ }
a		{  }
a.submenu	{  }
li>a		{ width: auto } /* others */
li a.submenu	{  }
/* regular hovers */
a:hover		{ color: #FFFFFF; letter-spacing: 1px; font-variant: small-caps }
li.folder a:hover	{ background-color: #000080 }
/* hovers with specificity */
li.folder:hover				{ z-index: 10 }
ul ul, li:hover ul ul			{ display: none }
li:hover ul, li:hover li:hover ul	{ display: block }</style>
</head>

<body>
<table class="nav">
   <tr>
      <td class="links">
      <!-- Start Navigation Menues -->
      <table>
         <tr>
            <td nowrap>
            <ul>
               <li class="folder">
               <a class="submenu" href="#">Kitchenware ></a> 
               <ul>
                  <li class="folder">
                  <a href="#" class="submenu">Cutlery ></a> 
                  <ul>
                     <li><a class="submenu" href="#">Cased Sets</a> </li>
                     <li><a class="submenu" href="#">Poultry Shears</a> </li>
                     <li><a class="submenu" href="#">Scissors</a> </li>
                     <li><a class="submenu" href="#">Sets</a> </li>
                  </ul>
               </li>
               </ul>
            </li>
            </ul>
            </td>
         </tr>
      </table>
      </td>
   </tr>
</table>

</body>
</html>

I've replace the URLs with #s for readbility. How can I make it so that Netscape knows the mouse pointer is over the line item when it's hovering the anchor?

Hi,

I'm using html:link with a background image. This works fine on IE and Firefox, but the link won't show in Mozilla. Could changes to the css fix this? Does anyone know how to solve this?

Regards,
Nina