My site looks rubbish in Firefox

[BJG]

I don't regard myself as a web-design expert by any means. I just do my best as a self-taught Dreamweaver user. However, I thought I'd got the school website looking reasonably OK, until I switched to Firefox. Now I find gaps opening up between the rows of the main menu which looks a bit rubbish. Eg, note the gap between "Welcome" and "Headteacher" on the front page, and the way the menu skips about, eg by clicking between "Business" and "PE" on the "Subjects" page. This all looks fine in IE7.

I know it's difficult to say without seeing how I've set it up, but I was just wondering if anyone could guess what the problem might be...? Some incompatibility between IE and Firefox on the tables front, or issues with Firefox and Dreamweaver 8. (All the layout is done with tables and a few shims because I don't know better, but I'm not about to attempt a complete redesign.)

www.disshigh.norfolk.sch.uk

Any suggestions appreciated...

[p858snake]

Can you take screenshots, i see the same in the latest stable firefox and ie6.

[ICT_GUY]

Its the way IE and Firefox read blank spaces, look for  

delete the  

[BJG]

Thanks for the suggestions. I just tried deleting every occurrence of &nbsp on the "PE" page in Subjects, then previewed in IE 7:



...and Firefox 3.0.8:



I always seem to have had a slight issue with menu spacing, and the IE one doesn't look perfect, but Firefox really exaggerates it. Here's the source for that page.

http://www.disshigh.norfolk.sch.uk/downloads/source.doc

[ICT_GUY]

Seems to look ok in my version of firefox.

[BJG]

OK, thanks for checking. Seems OK in Google Chrome as well, though Chrome and Firefox both agree on the space between the top two entries which didn't exist in IE. I'll keep meddling...

[plexer]

Yes the space is still there in 3.0.8 here.

Ben

[localzuk]

The reason for this is you have your first link in a

<p>

tag, whilst the rest don't.

eg.

<p><strong><font color="#000066" face="Arial, Helvetica, sans-serif">Welcome</font></strong></p>

compared to

<a href="headmessage.htm" target="_self">Headteacher</a>

EDIT: Just had a look at the code for another page, and it doesn't have that. So, it isn't the p tag. I'll look again.

EDIT 2: Ok. Had a look. It is to do with the way you're using tables. You have the top item of your menu list on the same table row as the heading for the main content. This means that the row auto-sizes for the largest item in the row - namely the heading.

My suggestion... Instead of using a new row for each menu item in the side bar, use a single cell, spanning the rows needed for the other part of the site. This will mean the layout is entirely within a single cell.

Also, the code for your site does not comply with any standards, and as it's a school you'd be falling foul of disability rules by not making it accessible to all users. http://validator.w3.org/check?uri=ht...Inline&group=0

[CESIL]

As localzuk says you have missed a <p> tag on the first menu link.
[EDIT] Just realised that I didn't read the layout correctly either...still that sort of proves my point about the complexity of the layout

The way you have laid out the pages has made it quite hard to keep control of the content.

If you are going to use tables then it is better (IMHO) to start with a table that establishes a framework for the rest of the content to fit into.



You can then build a table for the menu etc in this framework.

Having said all that...moving to a page layout using css and divs would make things much easier to control...
[EDIT] Using css would also make it easier to keep fonts, colours etc consistent across the pages...

[BJG]

My suggestion... Instead of using a new row for each menu item in the side bar, use a single cell, spanning the rows needed for the other part of the site. This will mean the layout is entirely within a single cell.

Sorted. Thanks!