CSS - Netscape/mozilla And Style/css

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

I posted this by accident in the html forum , so im asking he

I have this in my CSS page:

Code:

a.mainlevell:link, a.mainlevel:visited {
	display: block;
	color: #FFFFFF;
	font-weight: bold;
	text-decoration: none;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	margin-bottom: 1px;
	font-size: 12px;
}
a.mainlevell:hover {
color: #FFFF00;
font-size: 12px;
}

And I use this style for four links:
Code:

<a href="mobile.html" class="mainlevell">Home</a>
<a href="m_about.html" class="mainlevell">About Us</a>
<a href="m_games.html" class="mainlevell">Games</a>
<a href="m_links.html" class="mainlevell">Links</a>

When viewing in IE, all the URL's using m_* in the file name works with the CSS; the one referencing mobile.html doesn't.

However, putting an m_ in front of the mobile.html makes the link work.

Why?

This happens only in IE. firefox/opera/netscape/etc ; the links all show up fine and work as supposed to.

However, I have a similar set up for another menu that does almost the same CSS as the above:

Code:

<table width="100%" border="0" cellspacing="2" cellpadding="3">
                  <tr>
                    <td align="center" bgcolor="#990000"><img src="images/dmp_off.gif" name="home" width="14" height="14" id="home"></td>
                    <td bgcolor="#990000"><a href="mobile.html" class="menulevel" onMouseOver="MM_swapImage('home','','images/dmp_on.gif',1)" onMouseOut="MM_swapImgRestore()">Home</a></td>
                  </tr>
                  <tr> 
                    <td width="18" align="center" bgcolor="#990000"><img src="images/dmp_off.gif" name="one" width="14" height="14" id="one"></td>
                    <td bgcolor="#990000"><a href="m_blah.html" class="menulevel" onMouseOver="MM_swapImage('one','','images/dmp_on.gif',1)" onMouseOut="MM_swapImgRestore()">Blah</a></td>
                  </tr>
                  <tr> 
                    <td width="18" align="center" bgcolor="#990000"><img src="images/dmp_off.gif" name="two" width="14" height="14" id="two"></td>
                    <td bgcolor="#990000"><a href="m_blah.html" class="menulevel" onMouseOver="MM_swapImage('two','','images/dmp_on.gif',1)" onMouseOut="MM_swapImgRestore()">Blah</a></td>
                  </tr>
                  <tr> 
                    <td width="18" align="center" bgcolor="#990000"><img src="images/dmp_off.gif" name="three" width="14" height="14" id="three"></td>
                    <td bgcolor="#990000"><a href="m_blah.html" class="menulevel" onMouseOver="MM_swapImage('three','','images/dmp_on.gif',1)" onMouseOut="MM_swapImgRestore()">Blah</a></td>
                  </tr>
                  <tr> 
                    <td width="18" align="center" bgcolor="#990000"><img src="images/dmp_off.gif" name="four" width="14" height="14" id="four"></td>
                    <td bgcolor="#990000"><a href="m_blah.html" class="menulevel" onMouseOver="MM_swapImage('four','','images/dmp_on.gif',1)" onMouseOut="MM_swapImgRestore()">Blah</a></td>
                  </tr>
                  <tr> 
                    <td width="18" align="center" bgcolor="#990000"><img src="images/dmp_off.gif" name="five" width="14" height="14" id="five"></td>
                    <td bgcolor="#990000"><a href="m_blah.html" class="menulevel" onMouseOver="MM_swapImage('five','','images/dmp_on.gif',1)" onMouseOut="MM_swapImgRestore()">Blah</a></td>
                  </tr>
                  <tr> 
                    <td width="18" align="center" bgcolor="#990000"><img src="images/dmp_off.gif" name="six" width="14" height="14" id="six"></td>
                    <td bgcolor="#990000"><a href="m_blah.html" class="menulevel" onMouseOver="MM_swapImage('six','','images/dmp_on.gif',1)" onMouseOut="MM_swapImgRestore()">Blah</a></td>
                  </tr>
                </table>

and this one works fine ( even with the mobile.html)

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

I have designed one page. I am getting correct behavior in IE but there is some problem with Mozilla.

Here is the code sample:

<DIV class=ColumnHeader><SPAN class=noSort style="WIDTH: 6%; TEXT-ALIGN: center"><input type=checkbox id=chkSelAllAvail value="" name=chkSelAllAvail></SPAN> <SPAN style="WIDTH: 20%">Year</SPAN> <SPAN style="WIDTH:36%">Type of Report</SPAN> <SPAN style="WIDTH:24%">End Date</SPAN></DIV>

I have attached both screen shots of IE and Mozilla.

Can anyone help me ??

Hello everybody,

I used the following line

<td width="8" background="<?php print $image; ?>" height="15" style="background-repeat: no-Repeat"></td>

and it worked well for IE, but in Mozilla the image wasn't displayed properly, so I used the following line for Mozilla:

<td width="8"> <img src="<?php print $image; ?>" width="8" height="15" style="background-repeat: no-Repeat"> </img>

but now the "style" property does not work, and there is a back ground repeat, how can I avoid the background repeat in Mozilla?

I am just wondering if there is a way to simply extend a style rule from one previously defined. For instance, if I have this rule:
Code:

 .textarea-box {
	color: #990000;
	background-color: #fff;
	width: 375px;
	height: 200px;
	border: #000 solid 1px;
	} 

...if I want another text area rule to be the same except for one difference, the height should be 80px, do I have to write the rule out again with a new name, incorporating the new height, or is there some nifty way to just change the height in the new rule?
Thanks for help with this.
j9

I have a menu bar made up of <a href> elements that have a hover style of: PHP Code:
#mainMenu a:hover {
    color:#000000;
    background-color: #66c74c;
    padding: 1px 4px 1px 4px;
    margin: 1px 1px 1px 1px;
} 



This will provide a green colored rollover visual as the user moves their mouse over the menu bar.

I just added some JS today that will highlight the clicked (selected) menu so there is visual feedback of the section the user is in. For some reason, after setting the background color of the <a href> and color attributes, the HOVER: no longer functions. Here is the code to do the hilite where I pass the ID of the <a href> menu selection in the variable "menu": PHP Code:
//--- Simplify setup by creating an array of the menus and hilight ID's ---
    var menus = ["menu1","menu2","menu3","menu4","menu5",
                "menu6","menu7","menu8","menu9","menu10"];
    
    function J_hiliteMenu(menu) {
        //--- first make sure all the menu are hidden and unhilited ---
        for(i=0; i < menus.length; i++) {
            if (menus[i] == menu) theIndex = i; // Hold on to the chosen index position
            var obj = document.getElementById(menus[i]);
            if (obj == null) continue;             // if menu is not available skip it
            obj.style.color = "#ffffff";
            obj.style.backgroundColor = "#234fd7";
        }
        //--- hilite the menu we're interested in ---
        var obj = document.getElementById(menu);
        obj.style.color = "#000000";
        obj.style.backgroundColor = "#f8f400";
    } 



Prior to hiliting the menu I un-hilite all the menus (since we may be switching from another). I think this is where the problem is. Maybe I need to redefine the rollover "hover" attribute for all elements during the un-hilite loop? Does anyone know how to set a HOVER: attribute using JavaScript?

Thanks!

i'm new at CSS, and the width works fine in IE but not in Netscape. I'm trying to get #bottomLeftFirst1 to be the same width as #bottomLeft, but for some reason #bottomLeftFirst1 is wider in Netscape. Thanks!

#bottomLeft
{
position: absolute;
width: 175px;
height: 100%;
padding: 0;
margin: 0;
}

#bottomLeftFirst1
{
border-width: 1.5px;
border-style: none none none none;
width: 175px;
margin: 0;
padding: 5px 0 5px 10px;

}

I have made some pages with css styling.

This works perfect with IE, but he just ignores the css styling in netscape.

An example, I made an tumbnail from a picture, set the size in css, works perfect in IE, but he ignores it in netscape.

See example
http://www.bvkb.be/BVKB/Sportklimme...finale/test.php

Can anywhone help me how this comes.
On another page he takes some of the css, en some not.


Thanks

Hi,

I'm trying to set a box to be offset over a table that contains a jpg. My code is:

Code:

.holder {
    position: relative;
}


.offset {
	position: absolute;
    top: 60px;
    left: 50px;
	height: 140px;
	width: 203px;
	padding: 8px;
	background-color: #FE9900;
	color: #003366;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 9px;
}



<div class="holder">
			
				<table align="center" width="100%" cellspacing="0" cellpadding="0" border="0">
				<tr>
					<td><img src="images/homepage_flyerdeals_pic.jpg" alt="" width="71" height="71" border="0"></td>
					<td><img src="images/homepage_flyerdeals_header.gif" alt="" width="127" height="31" border="0"></td>
				</tr>
				</table>
		
				<div class="offset">
				text here				</div>
			
			</div>

My problem is, the offset box is too high and wide in Netscape. It looks fine and lines up perfectly in IE. How can I get it to look the same in Netscape??

is there anything special i need to do to get CSS to work with IE?

Here is what i have above the </head> tag
Code:

<link rel="stylesheet" type="text/css" href="layout.css">

the layout.css has:

Code:

catheader { 
color:#ffffff;
font-size: 14px;
font-weight: bold; 
font-family: verdana;
}

then in the <body> i have
Code:

<catheader>My New Category</catheader>

In netscape it shows correctly, in IE it doesnt read it at all.

any ideas?

hi,

ive been creating a website for a project and ive used css throughout. Im not experienced with css but managed to develop a decent front end. My problem is that although it displays perfectly in IE it messes up in netscape. Im not sure which parts of the css conflict. Can anyone suggest anything or point me to some website that may help? Cheers

The screenshot from netscape is below, its mainly the footer top line and the navbar which fails to span the full screen width.

Netscape screenshot

This is one of the pages for comparison
Main site

Thanks in advance for any help

Hi,
I was curious to know why only the background shows up in Netscape. In IE this site works good. I had it working on Netscape before but now it doesnt.

Thanks

Greetings Yall,

I am having a big problem, I am woeking on a site for a huge client and in netscape approx. 50px is cut off the top of the page and my tables sized to 100% cut off approx. 50px from the bottom.

I have no idea why or if it is evan a CSS problem at all....

Can anyone give some insight.

here is a link:
http://www.slbdrivingcentre.ca/dev/