Terrible Display in Firefox

[ilan]

Hi All,

I have created a site, using a combination of a CMS and also a
altering the code myself to clean up a few things. I have been doing
this on two different computers, one with IE6 and one with IE7. The
display works well on both browsers.

The website is: www.ilandesign.com.au

However, I just did a test on Mozilla, and can see that the display is
really bad... It mainly relates to the membership image going off the
page (I made its positioning absolute so I could have it spanning
across a number of columns), and the images down the bottom, which
don't all display next to each other, but some on top and some next
to.

I would appreciate it if anyone could provide guidance on how to keep
it looking the same for windows, but make it also compatible for
firefox...

Thanks in advance,

Ilan

 

[David Dorward]

The website is: www.ilandesign.com.au

However, I just did a test on Mozilla, and can see that the display is
really bad...

I'm not going to do an in depth check, but you use a Doctype that triggers
Quirks mode in IE, so it gets some parts of CSS seriously wrong (such as
the meaning of "width").

Also, you should be using 4.01 not 4.0 (bug fix releases) and Strict, not
Transitional (since there shouldn't be any need to Transition from pre-1997
code on a new webpage).

You should also make use of http://validator.w3.org/ as, despite the claim
that the document is HTML 4.0 Transitional, it has 97 syntax errors in it.

See also: http://www.allmyfaqs.net/faq.pl?Tableless_layouts

 

[Jonathan N. Little]

Hi All,

I have created a site, using a combination of a CMS and also a
altering the code myself to clean up a few things. I have been doing
this on two different computers, one with IE6 and one with IE7. The
display works well on both browsers.

The website is: www.ilandesign.com.au

However, I just did a test on Mozilla, and can see that the display is
really bad... It mainly relates to the membership image going off the
page (I made its positioning absolute so I could have it spanning
across a number of columns), and the images down the bottom, which
don't all display next to each other, but some on top and some next
to.

I would appreciate it if anyone could provide guidance on how to keep
it looking the same for windows, but make it also compatible for
firefox...

It is chock full of errors to start. Just a couple I noticed looking
quickly art the source

LINK and SCRIPT elements *between* HEAD and BODY. FORM element *between*
TABLE and TR ...

Mozilla will not make heroic efforts to fix your tag soup. Fix your
markup errors first then see if you still have a proble,

BTW: the stylesheet is over-the-top on over-managed Need to streamline a
bit!

....
..TopMenuItemOne:Visited:Hover{height:25;border-style:0px solid
#FF9900;font:Bold 13px
Verdana;color:#00C0F3;cursorointer;cursor:hand;padding:1px;text-decoration:none;}

..TopMenuItemOneOver{height:25;border:0px solid
#FF9900;font-family:Verdana;color:#00C0F3;cursorointer;cursor:hand;padding:1px;font-size:13px;font-weight:Bold;text-decoration:none;}

..TopMenuItemOneClicked{height:25;border:0px solid #FF9900;font:Bold 13px
Verdana;color:#ffffff;cursorointer;cursor:hand;padding:1px;text-decoration:none;}

..TopMenuItemOneClicked:Visited{height:25;border:0px solid
#FF9900;font:Bold 13px
Verdana;color:#ffffff;cursorointer;cursor:hand;padding:1px;text-decoration:none;}

..TopMenuItemOneClicked:Hover{height:25;border:0px solid
#FF9900;font:Bold 13px
Verdana;color:#00C0F3;cursorointer;cursor:hand;padding:1px;text-decoration:none;}

..TopMenuItemOneClicked:Visited:Hover{height:25;border:0px solid
#FF9900;font:Bold 13px
Verdana;color:#00C0F3;cursorointer;cursor:hand;padding:1px;text-decoration:none;}

..TopMenuItemTwo{height:0;border:0px solid #FF9900;font:Normal 11px
Verdana;color:#ffffff;cursorointer;cursor:hand;padding:0px;text-align:left;text-decoration:none;}

..TopMenuItemTwo:Visited{height:0;border:0px solid #FF9900;font:Normal
11px
Verdana;color:#ffffff;cursorointer;cursor:hand;padding:0px;text-align:left;text-decoration:none;}

....

 

[ilan]

Thanks for your help guys.

Here is my problem. Whilst I can make sense of coding to a degree, I
am by no means a pro. Also, one big problem that I have is that
because I am using a CMS I really only have control over the htlm that
dictates how the section of the homepage with a white background
behaves. Incase that's not clear, it is the section between the orange
menu at the top and the green bar at the bottom.

I guess what I want to know is; just by editing that section, is it
possible to fix it up so it will still look the same in IE, and get it
looking at least reasonable in Firefox. In the code that I have access
to edit, it looks fairly innocent - i.e. it is tables, links, images,
etc, and I can't really see any control over things like CSS. I also
unfortunately have no idea what 4.0 and 4.01 are, and also don't know
what Strict or Transitional is.

I understand that if I was to do this 'the right way', I perhaps would
have designed it for Firefox and then tweaked it for IE (as is
suggested in another posting). Unfortunately, I did not anticipate
these problems, and so I really just want to know if there is any type
of a rescue job I can do to salvage those people viewing in Firefox to
some degree.

Again, thanks for all of your help.

Ilan

 

[John Hosking]

Here is my problem. Whilst I can make sense of coding to a degree, I
am by no means a pro. Also, one big problem that I have is that
because I am using a CMS I really only have control over the htlm that
dictates how the section of the homepage with a white background
behaves. Incase that's not clear, it is the section between the orange
menu at the top and the green bar at the bottom.

Your problems start before (outside of) that section. You'd want to make
that white section wider (but then the green part above would be too
narrow) or the sunset image narrower.

I guess what I want to know is; just by editing that section, is it
possible to fix it up so it will still look the same in IE, and get it
looking at least reasonable in Firefox. In the code that I have access
to edit, it looks fairly innocent - i.e. it is tables, links, images,
etc, and I can't really see any control over things like CSS. I also
unfortunately have no idea what 4.0 and 4.01 are, and also don't know
what Strict or Transitional is.

It has to do with the doctype at the beginning of your HTML page (which
you may or may not have the ability to view in your CMS. It's actually
not your biggest problem.

[...]I really just want to know if there is any type
of a rescue job I can do to salvage those people viewing in Firefox to
some degree.

Salvage, huh? Hmmm[1]. Well, you might try changing one of the widths to
be obstinately large (and specific) as for example:

<td id="Module93_TDHTML" class="clsnormal" width="100%">
<table style="width: 735px; height: 34px;"
^^^^^

This would force one part of your content (a table I picked at
semi-random) to be larger than Firefox is currently trying to render it.
With bigger content inside (and inside your sphere of influence), FF
will (apparently) expand the outer table(s) with results somewhat like
those you seek.

But BE WARNED:
It's tested only in FF (quickly) and not IE 6 or 7;
Will not necessarily be flexible when visitors use different font sizes;
Will be a mystery value after next week when you or somebody else wants
to change something on the page;
Will mask (somewhat) yet not actually heal the multitudinous problems on
the page, for which you should (brace yourself!) either start over,
without the CMS; get professional (or at least experienced) assistance;
or both.

Good luck, Ilan!

[1] Like Travis McGee, I expect half of the proceeds of whatever we
salvage. Except, uh, I don't really want any of that code. ;-)

 

[ilan]

Hi All,

Just thought I would let you know that I seem to have 'fixed' the
problem. I basically recoded the homepage from scratch, but planned
out a table structure that would support what I wanted to do. Took me
a little while, but I did manage to get it working. The main
difference was that the subscription image became relative rather than
absolute, which fixed the other major problems (the real problem was
finding a way to do this without messing up the rest of the pages
structure).

I understand that it isn't perfect, althought it will do, and at least
people using Firefox will be able to view the contents in a way that
makes sense.

Thanks for all of your help.

Ilan