CSS - Help -- Site Looks Different In Ie And Netscape And Mozilla

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

Hi,
This is the first day i am tackling css. Please Explain why my site is looking different in netscape as opposed to IE, (ie is the correct look).
This is the link http://www.eac.net.au/remax/template1/new_apartment.htm .

I am also attaching my css file, let me know if i am on the right track for using CSS

THANKYOU

uno_turko

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 everyone,
I am having some problems making my website show the same in all browsers (this is not a doctype problem, I am using a proper one).

My problem is with float:left, and here is how I am using it on my website at the moment:

Code:

#ctr1{float:left;width:189px;}
#ctr2{float:left;width:590px;}

<div id="ctr1">blahblahblah</div>
<div id="ctr2">blahblahblah</div>

This shows fine with IE, but with all the Netscape based browsers (NS, Mozilla, Moz Firefox).. and also in Opera, it shows wrong.

Is there anything I can use instead of float:left? Thanks.

I'm working on a site: www.wirelessguy.net

I've been told that it looks fine in IE, but not mozilla. Is there something that I need to do with my CSS to get it to work with mozilla?

Here is my css code so far:
Code:

/*Main Section*/
html, body
{
	padding: 0;
	font-family: Arial;
}

.bodyMain
{
	font-family: Arial;
	margin-left: 12%;
	margin-right: 12%;
	background: silver;
}

/*Site Template Section*/
.verticalText
{
	writing-mode: tb-rl;
	filter: flipv fliph shadow;
	width: 10px;
	position: absolute;
	color: #FF9933;
	padding:10px;
}

.leftBoxText
{
	top:20%;
	font:18px;
	left: 10%;
	letter-spacing:16px;
}

.leftBoxTextUnder
{
	top:30%;
	font:14px;
	left:45%;
	letter-spacing:12px;
}

div#leftBox
{
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:12%;
	border-right:3px solid black;
	background-color:#333399;
}

div#rightBox
{
	position:absolute;
	top:0;
	right:0;
	height:100%;
	width:12%;
	border-left:3px solid black;
	background-color:#333399;
}

div#content
{
	position: absolute;
	top: 17%;
	bottom: 11%;
	height: 76%;
	width:100%;
	border: 1.5px solid #333399;
}

#titleBar
{
	background-color: #333399;
	text-align: center;	
	width: 100%;
	position: absolute;
	top: 0;
	height: 11%;
	border-top: 1px solid Black;
	border-left: 1px solid Black;
	border-right: 1px solid Black;
}

#titleBar table
{
	text-align:center;
	color: #FF9933;
	width:100%
}

#titleBar th
{
	font: bold 30px;
	letter-spacing: 10px;
}

#titleBar td
{
	font: normal 11px;
	letter-spacing: 6px;
	font-style: italic;
	padding: 7px;
}

#titleBar img
{
	width:50px;
	height:50px;
}

#bottomBar
{
	background-color: #333399;
	text-align: center;
	height: 3%;
	padding: 5px;
	border: 1px solid black;
	color: #FF9933;
	position: absolute;
	bottom: 0;
	width: 100%;
	vertical-align: middle;
}

#bottomBar table
{
	height=100%;
}

#bottomBar td 
{
	font-size: 12px;
	padding-left: 30px;
}

#bottomBar a:link
{
	display: inline;
	text-decoration: none;
	color:#FF9933;
	line-height: normal;				
}

#bottomBar a:visited 
{
	text-decoration: none;
	color: #FF9933;
}

#bottomBar a:hover 
{
	color:white;
	border-top: 1px solid #FF9933;
	border-bottom:1px solid #FF9933;	
}

#navBar
{
	background-color: #FF9933;
	border: 1px solid Black;
	color: #333399;
	text-align: center;
	height: 4%;
	position: absolute;
	top:11%;
	width: 100%;
	font-weight: normal;
}

#navBar table
{
	height=100%;
}

#navBar td
{
	font-size: 12px;
	padding-left: 30px;
}

#navBar a:link 
{
	display: inline;
	text-decoration: none;
	color:#333399;
	line-height: normal;				
}

#navBar a:visited 
{
	text-decoration: none;
	color: #333399;
}

#navBar a:hover 
{
	color:white;
	border-top: 1px solid #333399;
	border-bottom:1px solid #333399;	
}

/*iFrame Pages Section*/
body#content
{
	background:white;
}

Greetings... I've looked all around for a solution, and can't find one. Any help that anyone could provide would so greatly appreciated.

My site http://www.baltimoregamers.com displays the div boxes incorectly in Firefox. I am using quite an unusual layout with one big picture as a plate for the entire site...

I then lay div boxes/layers ontop of the plate to position text exactly where I want it to go. It works flawlessly in IE, but displays a too far down and to the right in FF/Mozilla.

I am new to using CSS and I'm sure that something is off somewhere in the code.

Thank in advance for any help.

Feel free to e-mail me he dekay@baltimoregamers.com

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

Alright.. so I made a site, and have been trying to optimize it in FF, IE6, IE7, NS, and Opera. It works fine in all except NS. Well, the only thing not working in NS is the background-image:

Code:

.navbar {background-image:url('images/navbar.jpg');
				 text-align:center; 
				 margin:auto; 
				 width:635px;	
				 font-size:16px;
				 font-family:Times New Roman;
				 }

Is there a hack for NS that I haven't been able to find? Or am I just missing something.

Thanks.

When I use padding in a box it increases the width of the box by the amount of the padding when viewed in NS. IE won't.
Anybody know of a good solution to this problem?
Code:

<html>
<head>

<style type="text/css">
.box1{
position: absolute;
top: 20px;
left: 40px;
width: 50px;
height: 30px;
border-width: 1px;
border-style: solid;
}

.box2{
position: absolute;
top: 55px;
left: 40px;
width: 50px;
height:30px;
border-width: 1px;
border-style: solid;
padding-left: 10px;
}
</style>

</head>

<body>
<div class = 'box1'>
box 1
</div>
<div class = 'box2'>
box 2
</div>
</body>
</html>

Thanks

Hello,

I am having problems sorting out my css. It all looks good but when i look at the css it has 21 browser errors in different browsers. Mainly it is padding errors for netscape 4.0. Is there a way round this please? Cheers

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,
i have used nested divs and with overflow: scrolll and it works perfectly fine in IE but it has no effect in Netscape. how do i achieve the same in netscape without using iframes?
thanks in advance...