Terrible Display in Firefox

Discussion in 'HTML' started by ilan, Feb 15, 2007.

  1. ilan

    ilan Guest

    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
     
    ilan, Feb 15, 2007
    #1
    1. Advertising

  2. ilan wrote:
    > 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

    --
    David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
    Home is where the ~/.bashrc is
     
    David Dorward, Feb 15, 2007
    #2
    1. Advertising

  3. ilan wrote:
    > 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;cursor:pointer;cursor:hand;padding:1px;text-decoration:none;}

    ..TopMenuItemOneOver{height:25;border:0px solid
    #FF9900;font-family:Verdana;color:#00C0F3;cursor:pointer;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;cursor:pointer;cursor:hand;padding:1px;text-decoration:none;}

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

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

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

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

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

    ....


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Feb 15, 2007
    #3
  4. ilan

    ilan Guest

    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
     
    ilan, Feb 15, 2007
    #4
  5. ilan

    John Hosking Guest

    ilan wrote:
    > 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. ;-)

    --
    John
     
    John Hosking, Feb 15, 2007
    #5
  6. ilan

    ilan Guest

    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
     
    ilan, Feb 15, 2007
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. neverstill

    resizing image has terrible quality

    neverstill, Dec 17, 2003, in forum: ASP .Net
    Replies:
    6
    Views:
    482
    neverstill
    Dec 17, 2003
  2. Dannie Juge

    TERRIBLE BUG IN ASP SERVER!!!

    Dannie Juge, Dec 19, 2003, in forum: ASP .Net
    Replies:
    4
    Views:
    2,904
    Guest
    Dec 19, 2003
  3. =?Utf-8?B?xZ5lbm9sIEFrYnVsYWs=?=

    Designing on VS.2003 is terrible

    =?Utf-8?B?xZ5lbm9sIEFrYnVsYWs=?=, Mar 18, 2005, in forum: ASP .Net
    Replies:
    6
    Views:
    414
    Mythran
    Mar 18, 2005
  4. Tomas Penc
    Replies:
    3
    Views:
    35,957
  5. Mickey Segal

    Terrible re-display problem in 1.4.x

    Mickey Segal, Nov 25, 2003, in forum: Java
    Replies:
    6
    Views:
    384
    Mickey Segal
    Dec 1, 2003
Loading...

Share This Page