CSS - Icon/image Cursor With Mozilla And Netscape ?

I am using an external CSS where I am defining the color of my links when un-visited, visited etc.
The problem is in Netscape 7.1/7.2
those links which are calling my other pages, are being shown up as visited when clicked,.

But those where I say href='javascript:void(0);my js function'

are not being shown with the correct 'visited' link color. They are being shown in the color specified for 'un-visited' links!!

Can someone help??

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??

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?

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

Hello,

I have a table cell which im trying to include an image in. My problem is that it works in IE but not Netscape. Here is the html and css code.

Html:
<td class="td10"></td>

CSS:
.td10 {
height: 24px;
background: #e2eaff url("bar.gif") repeat-x top left;
font: bold x-small Tahoma, Verdana, Arial, Helvetica, sans-serif;
color: #369fff;
padding: 1px 2px 1px 2px;
}

I found that I could get the image to appear in Netcape if I added some text to the cell but, with no text there was not image. Does anyone have an idea?

Thank You,
Brian

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)

Hello friends,

I have created this page

http://www.geocities.com/axe_42k1/index.html

with html and css its working fine with IE but in mozilla firefox, images in center are overlaping on right side images and no round border to themplease help me to solve this problem and i want to insert link to top left hand side image how can i do it with css?.

I've got the following code written for a web site that I'm supposed to look at moving toward CSS. I'm just begining and am already noticing the discrepancies between IE and Mozilla (Firefox).

Mozilla seems to be separating images larger than it should. I know this is(was) a problem with IE, but didn't expect to see it in Mozilla.

Any suggestions? I can supply code and a reference page if needed.

Thanks for any help.

Ok the problem is hard to explain but here it goes:
I have news items that are divs, inside that div i have a floating left image, then i have the news content.

The problem comes when I view it in Firebird. It seems the next news item starts at the bottom of the floating image. This causes serious problems with the text. I tried this .clear css style:
clear: both
height: 0
line-height: 0

but it just seemed to help with one (bringing the second one below the bottom of the page).

Does anyone know what might be the problem?
Here is the link:
http://www.cjweed.com/porttest

As you can see IE displays everything like a champ, mozilla likes to mash it together.

Please help

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

Hi there everyone. I just wanted know how I could put an icon on the address (URL) bar for my webpage like this devshed site? Thanks a lot.

Vinh

how can i change the icon that is displayed at the top of the browser(by default the broswer logo) and the icon that is displayed next to pages in favourites, so that my logo shows up there?

thanks

I am wanting to move the icons underneath the banner centered horizontally. Myself, and a buddy of mine have tried for nearly three hours and still can't get it to work. Can someone look at the code, and the site and see what's going on please?? Thanks.

Site: garou-motw.com

Code:

#kwick {
width : 100%;
align: center;
}
#kwick .kwicks {
background : transparent;
display : block;
height : 70px;
margin : 0;
padding : 0;
}
#kwick li {
float: left;
margin : 0;
padding : 0;
list-style : none;
}
#kwick .kwick {
display : block;
cursor : pointer;
overflow : hidden;
height : 70px;
width : 70px;
}
#kwick .kwick span {
display : none;
}
#kwick .opt0 {
background-color : transparent;
outline : none;
}
#kwick .opt1 {
background-color:transparent;
outline: none
}

#kwick .opt2 {
background-color:transparent;
outline: none
}

#kwick .opt3 {
background-color:transparent;
outline: none
}

#kwick .opt4 {
background-color:transparent;
outline: none
}

#kwick .opt5 {
background-color:transparent;
outline: none
}

#kwick .opt6 {
background-color:transparent;
outline: none;
}

#kwick .opt7 {
background-color:transparent;
outline: none
}

#kwick .opt8 {
background-color:transparent;
outline: none
}

#kwick .opt9 {
background-color:transparent;
outline: none
}

#kwick .opt10 {
background-color:transparent;
outline: none
}

#kwick .opt11 {
background-color:transparent;
outline: none
border-right: 0px none;
}

Thanks for taking the time to read my question.

I cannot figure out how to refer to the <img> that I have inside my <a> tag in my menu so that when the user hovers over the menu item, the icon will move.

I plan on using margin to make it move, I just can't seem to refer to it correctly so that it does something.

Any thoughts would be appreciated.

Brad

HTML:
Code:

<div id="NavContainer">
    <ul id="mainmenu">
        <li id="mainmenu"><a href="grocery.htm">Grocery <img class="menuicon" src="images/shopping_cart_basket_Small.png" /></a></li>
        <li id="mainmenu"><a href="recipe.htm">Recipe <img class="menuicon" src="images/notes_edit_Small.png" /></a></li>
        <li id="mainmenu"><a href="messages.htm">Messages <img class="menuicon" src="images/Post-It_Small.png" /></a></li>
        <li id="mainmenu"><a href="calendar.htm">Calendar <img class="menuicon" src="images/Calendar_Small.png" /></a></li>
        <li id="mainmenu"><a href="phonebook.htm">Phone Book <img class="menuicon" src="images/cellphone_128_Small.png" /></a></li>
        <li id="mainmenu"><a href="email.htm">E-mail <img class="menuicon" src="images/mail_Small1.png" /></a></li>
        <li id="mainmenu"><a href="budget.htm">Budget <img class="menuicon" src="images/PiggyBank_Small.png" /></a></li>
    </ul>
</div>

CSS:
Code:

.menuicon {
float: left;
margin: 10px 0px 0px 10px;
padding: 0px;
}

img {
border-style: none;
}

#NavContainer ul li {
display: inline;
list-style-type: none;
background-color: #00FF00;
height: 115px;
padding: 0px;
margin: 0px;
display: block;
float: left;
}

#mainmenu a {
padding: 5px 0px 0px 10px;
margin: 0px 0px 0px 10px;
height: 105px;
width: 186px;
background-color: #3333FF;
background-image: url(images/Button1.png);
background-repeat: no-repeat;
background-position: top left;
display: block;
}

#mainmenu a:link, #mainmenu a:visited, #mainmenu a:active {
color: #000000;
text-decoration: none;
}

#mainmenu a:hover {
text-decoration: none;
}

/*This does not seem to work*/
#mainmenu a:hover .menuicon {
margin-top: 10px;
}

Hi,

Is their any way to change the cursor color in css or javascript?

Thanks
Rishu