Help looks ok in IE but naff in Moz

Discussion in 'HTML' started by mark | r, Jan 7, 2004.

  1. mark | r

    mark | r Guest

    anyone help me debug this? it looks fine in ie but damned nasty in mozilla
    (xhtml 1 strict)


    mark | r, Jan 7, 2004
    1. Advertisements

  2. Toby A Inkster, Jan 7, 2004
    1. Advertisements

  3. Mark Parnell

    Mark Parnell Guest

    On Wed, 7 Jan 2004 09:27:16 -0000, mark | r declared in alt.html:

    > anyone help me debug this? it looks fine in ie but damned nasty in mozilla
    > (xhtml 1 strict)
    > thanks
    > mark

    You have a couple of errors in your XHTML, but I doubt they are related
    to the layout problems.

    It could be your CSS, but the validator won't check that until your
    XHTML validates.

    Hmmm....beyond that:

    Seems to be a fixed-width layout.

    The actual structure of the code looks good - no tables for layout,
    seems to be appropriate use of lists, your have used fieldset and legend
    for your form, etc.

    Why are you doing the hover changes on the links with Javascript? Why
    not do it in CSS? Without Javascript, the text changes to white, but the
    background doesn't change - makes the text disappear. :)

    Mark Parnell
    Mark Parnell, Jan 7, 2004
  4. rf

    rf Guest

    "mark | r" <> wrote in message
    > anyone help me debug this? it looks fine in ie but damned nasty in mozilla
    > (xhtml 1 strict)

    It looks pretty ordinary in IE as well:

    A quick look at your CSS reveals two things:

    It is far too complex.

    You are trying way too hard to defeat the browsers build in layout engine.

    It really looks like you have been given a design on a peice of paper and
    are trying to reproduce it exactly in a non-paper medium.

    Take for instance the div that your first lot of services live in. You give
    this a predefined background (like every other div on the page).

    As soon as anything changes, like font size or the exact way the browser
    likes to lay things out or even the DPI setting of the viewers computer
    (something over which you have no control) then this design will break

    I suspect you hand crafted this page for IE. I would not expect it to work
    on any other browser. On the other hand, if you had hand crafted the page
    using Mozilla then it would work in Mozilla but then I would not expect it
    to work in IE, or any other non-gecko based browser.


    Simplify the CSS dramatically.

    Don't use background images. To achieve those boxes, use CSS borders on the
    divs. That way if the layout changes then the borders will change as well.
    Never rely on content fitting exactly into a background image, it wont.

    You *can* use a non-repeating background for that arrow in a circle thing
    but why bother, just plonk the image in with the content.

    You also seem to be using background images just to colour things in:

    or worse,

    Don't do this. use background-color: Every time you specify an image in your
    CSS there is another round trip back to the server to get the image (the
    first time anyway). This really slows down the loading of your page.

    rf, Jan 7, 2004
    1. Advertisements

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. Terry
    mark | r
    Jan 7, 2004
  2. Geoff Hague
  3. Domenico Andreoli

    it looks good but doesn't compile :(

    Domenico Andreoli, Aug 8, 2003, in forum: C++
    Victor Bazarov
    Aug 8, 2003
  4. John  Fullman
    Sep 22, 2005
  5. Jeffrey Friedl
    Jeffrey Friedl
    Jan 18, 2004

Share This Page