css and firefox - driving me nuts

G'day,

I am attempting to get this working in Firefox, and I have run into problems, and it wont work, ive tried going through it here at the validator and it confuses me.

http://jigsaw.w3.org/css-validator/

Code (markup):

.

The website is here :

http://www.anchordriver.com.au

Code (markup):

The menu works fine in IE, but not in Firefox.

Here is the 2 sections of the css :

BODY
{
}
.menuBar
{
    POSITION: relative;
    BACKGROUND-COLOR: transparent;
    TEXT-ALIGN: center
}
.Bar
{
	BORDER-RIGHT: #FFFFFF 2px outset;
	BORDER-TOP: #FFFFFF 1px outset;
	FLOAT: left;
	BORDER-LEFT: #FFFFFF 2px outset;
	WIDTH: 99px;
	CURSOR: hand;
	TEXT-INDENT: 5px;
	BORDER-BOTTOM: #FFFFFF 1px outset;
	POSITION: relative;
	BACKGROUND-COLOR: #FFFFFF;
	TEXT-ALIGN: center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: normal;
	font-color: #FF3300;
	height: 19px;

}
.menu
{
    BORDER-RIGHT: buttonhighlight thin outset;
    BORDER-TOP: buttonhighlight thin outset;
    VISIBILITY: hidden;
    BORDER-LEFT: buttonhighlight thin outset;
    WIDTH: 150px;
    LINE-HEIGHT: 140%;
    BORDER-BOTTOM: buttonhighlight thin outset;
    POSITION: absolute;
    BACKGROUND-COLOR: #FF3300;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: normal;
	font-color: #FF3300;
	COLOR: #FFFFFF
}
.menuItem
{
    PADDING-RIGHT: 15px;
    PADDING-LEFT: 10px;
    WIDTH: 100%;
    CURSOR: hand;
    LINE-HEIGHT: 20px;
    BORDER-BOTTOM: white 1px solid
}
.ItemMouseOver
{
    PADDING-RIGHT: 15px;
    PADDING-LEFT: 10px;
    WIDTH: 100%;
    CURSOR: hand;
    COLOR: #FFFFFF;
    LINE-HEIGHT: 20px;
    BORDER-BOTTOM: white 1px solid;
    BACKGROUND-COLOR: #990000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: normal;
	font-color: #FFFFFF
}
.ItemMouseOut
{
    WIDTH: 100%
}
.Arrow
{
    FLOAT: right;
    FONT-FAMILY: Webdings;
    POSITION: absolute;
    TEXT-ALIGN: left
}
.barOver
{
    BORDER-RIGHT: #FFFFFF 2px outset;
    BORDER-TOP: #FFFFFF 1px outset;
    FLOAT: left;
    BORDER-LEFT: #FFFFFF 2px outset;
    WIDTH: 100px;
    CURSOR: hand;
    TEXT-INDENT: 5px;
    BORDER-BOTTOM: #FFFFFF 1px outset;
    POSITION: relative;
    BACKGROUND-COLOR: #FF3300;
    TEXT-ALIGN: center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: normal;
	font-color: #FFFFFF
}

Code (markup):

and the other :

.head {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: normal;
	top: 9px;
	bottom: 9px;
}
.body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: normal;
	top: 9px;
	bottom: 9px;
}
.medium{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	font-weight: normal;
	font-color: #FFFFFF;
	top: 3px;
	bottom: 3px;
}
.small{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	font-style: normal;
	font-weight: normal;
	font-color: #FFFFFF;
	top: 3px;
	bottom: 3px;
}

Code (markup):

Hopefully someone can shed some light on what I am doing wrong so I know not to make the same mistake again, thank you.

Jf3000

 

I think you need a better book on css, I'd recommend anything by Eric Meyer.

The results your getting from the validator are not too confusing eg:

Should be
color:#ff3300

 

Thank you ill make those quick changes, any ideas why the menu doesnt work in Firefox, but IE?

 

if you post a url, I can have a look

 

The url is posted in the first post if you read it.

 

no, i can't be bothered to read it

 

Can anyone else shed some light on this please?

 

The problem is quite possibly the JavaScript instead. I got the following errors.

Warning: Element referenced by ID/NAME in the global scope. Use W3C standard document.getElementById() instead.
Source File: http://www.anchordriver.com.au/cascademenu.js
Line: 5
Error: bar has no properties
Source File: http://www.anchordriver.com.au/cascademenu.js
Line: 7

Edit
You haven't defined the variable menuBar to be anything.

 

Seriously, I would get one of eric meyers books on css - he has a great method of css drop down menus that don't require javascript

 

So these books on css will work with firefox stuw?

 

yep - you can see it in use here
www.bellissimo.co.nz

 

Always good on the rare occasion to see a nice Web site made with very nice coding techniques.

 

After using HTML (teaching myself so don't claim to be an expert) for the past 7 years I am finally branching into CSS. What a nightmare thus far, but have been told "If I can learn it myself anyone can learn it!" thus making me feel like a real dummy.

I bought a book by Elizabeth Castro called "HTML for the world wide web, with XHTML and CSS." And while it is helping me with some things, I have to admit that I am completely stumped.

My problem is this: I have a layout that I would like to at least start out with, it looks very basic and "easy" to alter down the road. It shows up GREAT in Internet Explorer, just how I want it to appear. Problem is, the top header does not show up "correctly" in Firefox. Can anyone shed some light on this for me? I am very new to this board (this being my first post here ever) so hope I'm not repeating someone else's problem.

Here is the url, hopefully someone has both browsers and will see what I mean.

http://www.hummingbirdcreations.ca/css/index.html

Thank you!!

Matinee

 

you don't really want to be putting a <h4> tag within a <h2>. They are really suposed to denote a heading.

I would do something like this - and I haven't tested it so it may not be right.
<div class="header">
<h2>Hummingbird Creations</h2>
<h4>.....creativity & ingenuity at it's best</h4>
</div>

Then as your css something like:
div.header {color:tan;background:#FFFED8 url(/images/flyinghummingbird);border:5px dotted tan}
h2 {padding:0;padding 20px 0 0 20px}
h4 {text-align:right}

There's a bit missing out of there - but I'm sure you can get the formatting.

Another top tip is to add things like border:1px solid red and background:green so you can see what area your css is effecting and how.

Good luck!


Also books by Eric Meyer are a must for great css - go to a book store and leaf through one.

 

This is me dancing - THANK YOU!!!!!! Like I said, just starting out with this, had my first taste of CSS when I was approached to do an event calendar...that looked LIKE a calendar for a local event. I will admit freely that I cheated big time to get it done.....stole the code from another site that had what I was looking for, and edited the CSS file to fit with the colour scheme for the site I did, and of course changed the content too ;-). While editing the CSS for the calendar, it looked very interesting and thought it would be easy to learn and would make life very much easier for me when I did all my own pages. That was just the beginning of my adventure.

Thank you again for the help!!

Matinee
ps - I live in a rural town so don't have immediate access to a "big" bookstore, but next time I go to the Big City, will make a point of looking for Eric Meyer. - Thanks for the tip

 

Yeah, that is what firefox does. Problems.

 

As far as I'm aware firefox is more standards complient than internet explorer. If your following w3c guidelines (like we all should be http://www.w3.org/) then you will find that your pages work beatifully in firefox, and only need a little tweaking to work in ie.

It's just a shame that a lot of the world is using a not so good browser

 

Do you have an exaplme of code for a menu like the one I was using please that was using javascript?

 

Hi JF3000, check out http://www.alistapart.com and do a search for sukerfish menus. Or just Google Sukerfish

Uses a very se friendly list based structure that is easy for you to mod, its just a <ul> list, the css does the rest. You need a bit of Javascript to get the hover action to work in IE but its exactly what you are looking for.

If you get stuck I give you exclusive permission to steal the menu css from my site www.building-site.co.uk