hi...i have a problem...

i made a web site last year for my programming class...it just had to suit the teachers standards and had to work on IE6 with the resolution of 1280x1024...so here's the website i made:
http://hakim.nsitweb.net/majorproject/index2.html

it works perfectly on IE6 on all the computers i've tried...it just messes up in Firefox...what have i done wrong? i always assumed it was firefox's fault...but after about a year of using firefox, viewing other people's websites, i realized how arrogant i was...could someone have a look at the code and tell me the problem?

the only lil problem i noticed with IE7 is that the menu is slightly lower than it was on IE6...what's the reason behind that?

thanks in advance...

pz/

This could be a case for the argument that validation isn't everything. Your page validates xhtml 1.0 Strict... sure enough. Even though it validates, it looks like hell in Firefox.

I'm not sure what the problem is though. I'm assuming it is some sort of javascript error.

The problem is not Firefox. As you have no doubt learned IE 6 (and below) has a ton of bugs and non-standard ways of rendering CSS. FF, Opera and Safari are at the top of the list of most-standards-compliant browsers. If it works in IE but not in FF, then IE is doing it wrong.

Why on earth are you using that mass of tables ?? Now that you're going back to this, remove the tables and use XHTML and CSS for layout the proper way. I'll never understand the point of using a DTD of XHTML Strict then using tables for layout.

Ok. first of all, this code sends IE 6 (and below) into Quirks mode:
<?xml version="1.0" encoding="UTF-8"?>
Take it out, at least for IE but unless you're serving XHTML as anything other than text, you don't need it.

Z-index only works with absolute and relative positioning, it's pointless otherwise.
The absolutely positioned element is positioned relative to it's nearest positioned ancestor. FF rightly see the top:53px for your menu table to be 53px from the very top of your page, rather than under the header where IE puts it (incorrectly).

Correct your positioning and use conditional comments to target IE and you'll fix your problem.

I would say have a look at your CSS.

Originally Posted by LadynRed

The problem is not Firefox. As you have no doubt learned IE 6 (and below) has a ton of bugs and non-standard ways of rendering CSS. FF, Opera and Safari are at the top of the list of most-standards-compliant browsers. If it works in IE but not in FF, then IE is doing it wrong.

Why on earth are you using that mass of tables ?? Now that you're going back to this, remove the tables and use XHTML and CSS for layout the proper way. I'll never understand the point of using a DTD of XHTML Strict then using tables for layout.

Ok. first of all, this code sends IE 6 (and below) into Quirks mode:
<?xml version="1.0" encoding="UTF-8"?>
Take it out, at least for IE but unless you're serving XHTML as anything other than text, you don't need it.

Z-index only works with absolute and relative positioning, it's pointless otherwise.
The absolutely positioned element is positioned relative to it's nearest positioned ancestor. FF rightly see the top:53px for your menu table to be 53px from the very top of your page, rather than under the header where IE puts it (incorrectly).

Correct your positioning and use conditional comments to target IE and you'll fix your problem.

i am sorta new to this whole xhtml thing...so you're gonna have to bare with me...

the reason why i put <?xml version="1.0" encoding="UTF-8"?> in my code is because my teacher told me to...i didn't ask why...i just did it and assumed it was correct...

i used a lot of tables because thats how i organize things...i have a bit of background knowledge with html, and used tables to make my layout of previous websites [before i had any knowledge of xhtml and before firefox existed], regardless of how messy the coding was...
i also needed those tables to create that sliding effect for the menus...how else can i do that without the tables?
i also used z-indexing because i wanted the menu's links to be hidden until someone placed their mouse over the specific cell [ie. Account, Products, etc]...

oh and i have no idea what DTD is...

i did understand what you meant about the absolute/relative positions...i changed some things around and it works a lot better on firefox, but i'm sure it's not really well done...[i cant show you my changes because i no longer have access to that website...my account expired last year]...

but i would still like to know how i could have my sliding menus, without tables...could you explain that please?

Have a read through http://alistapart.com/articles/dropdowns/ for slide out menus without tables.

i also needed those tables to create that sliding effect for the menus...how else can i do that without the tables?

Blue-dreamer is correct, you do NOT need tables for that kind of menu. CSS does it very nicely.

i also used z-indexing because i wanted the menu's links to be hidden until someone placed their mouse over the specific cell [ie. Account, Products, etc]..

It can still be done with CSS and NO TABLES. Absolutely positioning the menu container itself may be necessary, but not in a table.

oh and i have no idea what DTD is...

http://www.w3schools.org
DTD= DOCTYPE - ie. XHTML Strict, HTML 4.01, etc.

The XML statement is fine -IF you're going to serve your XHTML AS XML - 99.9% of people don't, they serve it as text. Unfortunately, there are far too many teachers and schools who are teaching antiquated methods and are not sufficiently aware of the numerous bugs and problems (mostly with IE). What your teacher told you was not wrong, per se, but without telling you that it throws IE into Quirks mode (which he probably didn't teach you either) or telling you WHY that statement should be used, he wasn't really doing his students a favor.

You want to see what's possible for menus with CSS, peruse this site:
http://www.cssplay.co.uk/menus/index.html

Originally Posted by LadynRed

Unfortunately, there are far too many teachers and schools who are teaching antiquated methods and are not sufficiently aware of the numerous bugs and problems (mostly with IE).

lol... there's a college in my town that still uses Frontpage in their web design courses

wow i really appreciate all the help guys...i'm checking out both links posted and i'll try their methods out...

What your teacher told you was not wrong, per se, but without telling you that it throws IE into Quirks mode (which he probably didn't teach you either) or telling you WHY that statement should be used, he wasn't really doing his students a favor.

yeah he didn't teach us what Quirks meant, but to be honest, he probably thought it wasn't relevant...after all it was a Programming class...we were just supposed to learn [basic] Perl and JavaScript...the class was only half a semester...learning a bit of xhtml was only required because he wanted us to implement Perl and JavaScript onto our websites...

well anyway, thanks again...i'll use those websites now...



edit: i've just looked at http://www.cssplay.co.uk/menus/index.html and didn't find the sliding menus i wanted, like the one on my site...i'm gonna keep looking around on other sites...i'll come back here if i can't find anything ...

edit again: nevermind...i'll just do it myself using your tips LadynRed, thanks again...

Use tables properly. U have to redesign your tables again. Use % in tables width and height.

No.... NO TABLES FOR LAYOUT !! Bad.. bad....

Using tables for design is like using a tshirt as a pair of pants. It sort of works, but isn't intended like that.

Originally Posted by MJM_RDS

Using tables for design is like using a tshirt as a pair of pants. It sort of works, but isn't intended like that.

Well tables for tabular data. Nothing more... It's all about meaningful markup.