CSS - Margins "escaping" In Mozilla Firefox

Hi,

I'm trying to build a nav using css, I need to style each <li> within the nav becuase they need to be different lengths on the page. I have had it working fine on IE but I can'#t get it working for for any other browser.

Does soneone know how I can style each of my list items accordingly, notice the different block lengths for each one which is very important.

I have tried both id="Style" and class="Style" and no joy, I have also tried #nav ul li li li li li a:hover in my style without id or class in my HTML

Here is my Html

PHP Code:
<DIV id="nav"> 
              <ul>
                <li id="1"><a href="Home">Home</a></li>
                <li id="2"><a href="About-us">About us</a></li>
                <li id="3"><a href="FlexNews">FlexNews</A></li>
                 <li id="4"><a href="Careers">Careers</A></li>
                <li id="5"><a href="Contact">Contact</A></li>
              </ul>
</div> 





Pretty straight forward, now my css


PHP Code:
#nav
{
    width:1005px;
    vertical-align: middle;
    text-align: left;
} 
#nav ul
{
    list-style: none;
    padding: 0;
    margin: 0;
} 
#nav li
{
    float: left;
    text-align: left;
} 
 
#1 a{
    line-height: 20px;
    float: left;
    width: 215px;
    display: block;
    color: #000000;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
} 
#1 a:hover
{
    line-height: 20px;
    float: left;
    width: 215px;
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #33A02C;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
}

#2 a{
    line-height: 20px;
    float: left;
    width: 211px;
    display: block;
    color: #000000;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;



} 
#2 a:hover
{
    line-height: 20px;
    float: left;
    width: 211px;
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #33A02C;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
}
#3 a
{
    line-height: 20px;
    float: left;
    width: 211px;
    display: block;
    color: #000000;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
} 
#3 a:hover
{
    line-height: 20px;
    float: left;
    width: 211px;
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #33A02C;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
}
#4 a
{
    line-height: 20px;
    float: left;
    width: 184px;
    display: block;
    color: #000000;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
} 
#4 a:hover
{
    line-height: 20px;
    float: left;
    width: 184px;
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #33A02C;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
}
#5 a
{
    line-height: 20px;
    float: left;
    width: 183px;
    display: block;
    color: #000000;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-indent: 17px;

} 
#5 a:hover
{
    line-height: 20px;
    float: left;
    width: 183px;
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #33A02C;
    text-indent: 17px;

} 






Here is an exmple link http://dev.121design.co.uk/flextrade2/

Works fine in IE but not in Firefox, heres hopling someone can help.

Thanks in Advance, tried so many different methods and none seem to work.

Cheers,
Stuart

on a page i have a <input type="file"> tag for upload purposes. I want that thing have the following look: no borders 'Courier New' font a height of 16 pixels a font-size of 14 pixels a special background color and a paddin of 0 pixels I have made the apropriate CSS definitions:
Code:

		<style type="text/css">
input {
	height: 16px;
	border-width: 0px;
	background: #e0e0e0;
	padding: 0px;
	font-size: 14px;
	font-family: Courier New;
}
		</style>

The problem is that Mozilla does not fully implement these definitions. Mozilla makes the height and the background of the textfield-part the way i specified. The rest is left the way it is.

I would appreciate any help you could give me.

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

what is the equivilant to <table border="1" cellpadding="2" cellspacing="0"> in css?

i've tried
PHP Code:
 table
{
    border-spacing: 0px;
    padding: 0px;
    border-colapse: colapse;
    border-style: solid;
    border-width: 1px;
}
td
{
    border-style: solid;
    border-width: 1px;
    padding: 2px;
} 





That makes the width 2px wide though. I want it to only be one. And the padding seems to be messed up as well.

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'm using the CakePHP framework to build my site.

I hope I'm not asking an impossible question and being since I'm new an all.. Anyways I finished a simple design well I thought it was simple anyway until I tried to make the content box to be a fluid width.

Here's what it's supposed to look like.
http://planet-rpg(dot)com/PR_style.png // yes I know I'm a new user..

Here's what I currently have.
http://planet-rpg(dot)com

Here's my coding.

html
Code:

<?php echo $html->docType('xhtml-trans'); ?>
<html>
<head>
      <title>Planet RPG::. Imagine a creative universe : <?php echo $title_for_layout; ?></title>
      <?php echo $html->css('styles'); ?>
</head>
<body>
<div id="top_bar">
<p>top bar</p>
</div>
<div id="body">
<div id="header">
<p>Header</p>
</div>
<div id="page-wrap">
<ul id="navigation">
<li class="first"><a href="/games/">Games</a></li>
</ul>
  <div id="frame">
     <div id="container">
       <div id="main_content">
            <p>Content area</p>
       </div>
     </div>
  </div>
</div>
</div>
<div id="footer">
<p>footer coding</p>
</div>
</body>
</html>

css
Code:

html {
	background: #2b435d;
}

html, body {
	margin: 0;
}

body, table {
	color: #303030;
	
}

img { border: 0; }

#body {
	background: #d8dde8;

	padding: 0 0 16px;
}

#page-wrap {
	min-width: auto;
	margin: 10px auto;
	}

#frame {
    margin: 0 auto;
    padding: 0px 1170px 0px 220px;
    margin-top: -17px;

}
#main_content {
	background-color: #fff;
}


#header {
	background: url("../img/header.png") repeat-x bottom left;
	height: 64px;
	margin-top: 36px;
}
#navigation {
   background: url("../img/navigation.png") repeat-x bottom left;
   height: 31px;
   margin-top: -20px;
   font-family: "Arial", sans-serif !important;
   font-size: 14px;
   color: #fff;
   text-shadow:-1px -1px 0 black;
   list-style-type: none;
   padding:1px 5px 1px 220px;
}
#navigation li {
	float: left;
}

#navigation li a {
	border-left: 2px solid #303030;
    text-shadow:-1px -1px 0 black;
	color: #D0D0D0;
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;

	display: block;
	height: 21px;
	padding: 6px 12px 1px;
}

#navigation li a:hover {
	color: white;
	text-shadow:-1px -1px 0 black;
}

#navigation li.first {

	padding-left: 236px;
	margin-left: -236px;
	text-shadow:-1px -1px 0 black;
}

#navigation li.first a {
	background: url("../img/cursor.png")bottom center no-repeat; height:24px;
	color: #6193c7;
	border: 0;
	text-shadow:-1px -1px 0 black;
}

#logo {
	width: 166px;
	height: 50px;
	margin-top: -32px;
	margin-left: 20px;

	position: absolute;
	z-index: 2;
}

#footer {
	background: #607080 url("../img/footer.png") repeat-x;
	height: 60px;
	padding: 30px 0;

	clear: both;
}

#top_bar {
	background: url("../img/top_bar.png") repeat-x bottom left;
    height: 36px;
	font-family: "Arial", sans-serif !important;
	font-size: 12px !important;
	font-weight: normal !important;

    height: 36px;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 5;
}

I haven't used CSS/html in awhile but if anyone can help me either "fix" the content box so it appears like mockup which would be centered on my screen as my resolution is 2560X1600(30") and just repeat the <div's> when needed.

Hope someone can help me with my question.

http://stuweb.cms.gre.ac.uk/~as234/full/full.htm

some problems:

in IE the menu at the top is "block" level but i want it to be in a line? whereas in ff its ok!

in ff, one of the menu image (called "main" on the left of review) doesnt appear but if u hover over it, u will see the rollover image!

the background colour should be grayish however that DOESNT happen!

Hi all

I'm working on the following XHTML/CSS2 page:

http://www.josh.ch/files/temp/strange_ff_effect

It's very clean XHTML and CSS2 in my opinion, and it's displayed correctly in Firefox, Opera and Safari.
However, I experience a very strange bug in Firefox2/OSX! When single clicking with the mouse somewhere on the white ground in the header area, all text on the page is selected! Try it! Click on the "Kanton Aargau" logo or anywhere in the same area, and tell me if you experience this, too.

I never had an error like this, and I have no idea what could cause the problem. Any ideas?

Thanks a lot
Josh

I am trying to centre my web contents with the following code via css:

.fixcenter {
width: 775px;
margin: 0px auto;
background: #ffffff;
color: #000000;
text-align: center;
}

It is working fine in both IE and Firefox.

Problem [FireFox Only]:
It center's the content in firefox, but when scroll bar appears, my contents jumps to left a little.
It looks bad that , contents jumps little left after loading.

Is there any solution:

Hi,
Im using CSS, and have included the code in a separate .css file.

The whole website uses DIVs and is displaying correctly in both I.E. and Firefox.

Now, I need to generate a dynamic DIV using PHP, so I did this to test it out,

Code:

<div style="{ background: #00cc00; width:100%; height:100%;}">abc</div>

But the problem is that it displays correctly in I.E. but not in FIREFOX, all the attributes that I have specified within the style="{}" tag are NOT at all applied in FIREFOX.

Only the text "abc" is displayed in firefox and the style, including the background colour is not applicable at all!

Please tell me what Firefox is upto?

Thanks!

Your sisncerely,
mbk,
mbkweb.

Hi guys,

For a pure CSS site, is it still necessary to have height="82" and width="82" in <img ... /> ?


Moreover, is it depreciated to have a size="25" tag in <input elements? (I know it could ba handled in CSS but nice to have directly in the html).

Thank you

Take a look <link removed... no longer valid>

If you have I.E. and Firefox available... notice the differences... Take a look at the source... I.E. appears to display this "more correctly"... it's certainly more visually appealling. I want the border to go all the way around the calendar in FF (it already does in I.E.), and in FF the first week is messed up (probably has something to do with no information within the divs, but why does it do that?

Bryan

<edit>I'd also like to fix the gap on the right side between the days and the calendar border, but just making it 15% for the last one doesn't work.</edit>

I'm trying to build a template-based site where I have to have as complete control over the DIV's as possible.

The page in question is this:
Problematic page

If you look at this in FireFox, the DIV in question will not be shown. This is the behavior I'm looking for.
Now, if you look at the same page in IE, it will render a, roughly, 10px high white space where the DIV is located.

How can I make the DIV disappear in both IE and FireFox with CSS-code?

The DIV's CSS-code is currently:
Code:

  div#header2 {
    height: 0;
    color: #fff;
    text-align: left;
  }

On a sidenote; I'd like to be as W3C CSS-validation friendly as possible. So if you've got a way of making the solution validation-proof too, that would be marvelous.
I'm glad for any suggestion though, be it validation-friendly or not.

One more thing; You might wonder why I'm not simply loading another php-page for the specific templates.
Well, I'd just like to keep the index-page count down. If it's possible to have only one page taking care of the layout and just keep editing the CSS, that would make me a very happy developer. I use PHP-includes to throw out the text and contents and making several index-pages seems to me a bit unnecessary if I can take care of the layour in CSS.

I'm not a newbie in most aspects and I'm glad for anything you can throw at me.

that is basically the question. I have a main div, where content will dynamically be placed, so it will change height frequently.

However, It has rounded corners, so either side of it I have 3 images, 2 of which are the corners, and one is a repeating y image.

If i set a fixed size for the containing div's height(<div id="submaincontainer">), everything will jump to that.(everything else is set to inherit) However, if it's height is set to auto (which is really what I want) everything will be 1px tall.

(URL address blocked: See forum rules)/cv/cv.html

This is my first project with trying to strictly use div tags and CSS rather than a table. A table seems like it would be incredibly easier. Anyone know how to make this work?