firefox incompatibility with new site design

  kiz 14:19 09 Apr 07
Locked

I have just started to put together a site in dreamweaver and have checked the first page in IE7. All OK and then looked at in Firefox - yuck.
Can anyone help as I am new to this. I tried to keep it all very simple, using a table layout. Site can be seen at click here
Thanks in advance for any solution.
PS I realise images, nav bars etc have still work to do on them but dont want to go any further till I sort this out.

  CodeMeister 16:12 09 Apr 07

Hi Kiz,

First of all, have a look at the following link:-

click here

Secondly, seriously consider using DIVs instead of TABLEs.

Rename CSS classes to something more meaningfull than "style2", "style3" etc.

Use an external CSS document file.

I noticed that the HTML contains the following that looks dodgy to me:-

class="style11 style12 style4 style2"

  Eric10 17:30 09 Apr 07

Whilst I agree with CodeMeister that DIVs could do a better job, you can put most of it right in Firefox with minimum effort. Check for all instances in your code where a background colour (bgcolor) is specified. Several of them have the hash (#) missing that should proceed the colour number. e.g. bgcolor="#8adbb9" not bgcolor="8adbb9". IE is more forgiving of such errors than some other browsers.
Also to avoid the black area underneath and to the right of the upper photo you should specify the bgcolor for the cell containing it and unless you are intentionally stretching the bottom photo you should specify the correct width for the image.
Also, although it is permissible to specify multiple classes as in class="style11 style12 style4 style2" some of these do contradict the others. You will get the same effect using simply class="style4 style12".
Finally, give your page a meaningful title instead of the default 'Untitled Document'.

  PurplePenny 17:39 09 Apr 07

Thats OK: you can have more than one style assigned.

Try this style:

.red {color: red;}

.large{font-size: 200%;}

With this HTML (opening angle brackets removed in case the forum does something with the code):
p>This is some text</p>
p class="red">This is red text</p>
p class="large">This is big text</p>
p class="red large">This is big red text</p>

  PurplePenny 17:39 09 Apr 07

It's OK: you can have more than one style assigned.

Try this style:

.red {color: red;}

.large{font-size: 200%;}

With this HTML (opening angle brackets removed in case the forum does something with the code):
p>This is some text</p>
p class="red">This is red text</p>
p class="large">This is big text</p>
p class="red large">This is big red text</p>

  kiz 17:55 09 Apr 07

Thanks so much both of you.
eric10: Your tip about the missing #'s has done the trick in Firefox. As for the images, they are not the correct ones but just put in to start me off, so I will adjust those in due course. And I will look into your other tips.
Codemeister: I've taken in your advice and will try to learn more (not easy!!). Are you saying use CSS as the basis of the site? I havent quite mastered that yet which is why I've stuck with tables.
thanks alot again. I'll click this as resolved.

  CodeMeister 18:59 09 Apr 07

Hi Kiz,

Yes, try to create a central CSS document which is then referenced by each page and create a class for each HTML tag that needs to be styled. If at a later date, you wish to change the colours of your site, then you can do this by simply changing the appropriate values within your central CSS document instead of having to edit every HTML page.

Have a look at click here especially the "Features" and "CSS Reference" sections.

  CodeMeister 22:00 09 Apr 07

Hi again Kiz,

Here's another site that might be useful to you:-

click here

This thread is now locked and can not be replied to.

What is Amazon Go and will it come to the UK? The store without checkouts or queues

1995-2015: How technology has changed the world in 20 years

Hands-on with the Star Wars fighting drones you can fly yourself

iPhone 9 and beyond: 32 amazing future smartphone developments - graphene, supercapacitor…