fire fox and mozilla css problem

Discussion in 'Firefox' started by Mark Nenadov, Feb 4, 2005.

  1. Mark Nenadov

    Mark Nenadov Guest

    Hello all,

    I'm a long time mozilla/firefox user, but I have a question concerning the
    CSS rendering on a particular page. The page is
    http://www.windsorarea.com/. The design is simple and not really that
    flashy. It is laid out via CSS (http://www.windsorarea.com/style.css).

    The page generally renders quite well in Mozilla and Internet Explorer,
    with one major and very annoying exception. On most versions of Fire Fox
    and Mozilla, I notice that the first time the page is loaded, the design
    gets all cramped and the elements of the page overlap each other. When I
    hit "Reload", the problem goes away and the design looks like it should.

    I grant that this is more likely an error in my CSS as opposed to an error
    in the browser, though I'm not really sure because of the browsers
    inconsistency. This happens in FireFox 0.8 and 1.0 and also various
    versions of the original Mozilla browser. I've been working on fixing
    this for a while and haven't been successful. I've put it through CSS
    validators, and there definately are some warnings, but I'm not sure how
    they relate to this problem.

    I'd appreciate it if anyone could give me any tips/pointers on how to
    change my CSS to avoid this problem.

    - -
    Mark Nenadov
    Python Byte Solutions
    http://www.pythonbyte.com/
     
    Mark Nenadov, Feb 4, 2005
    #1
    1. Advertisements

  2. Mark Nenadov

    Smiley Guest

    Just install the WebDeveloper plugin. It has a CSS validator which I ran
    for your page. Here are the results:

    W3C CSS Validator Results for http://www.windsorarea.com/

    To work as intended, your CSS style sheet needs a correct document parse
    tree. This means you should use valid HTML.
    Errors
    URI : http://www.windsorarea.com/sites/WindsorArea/style.css

    * Line: 59 Context : .top_menu

    Invalid number : paddingonly 0 can be a length. You must put an
    unit after your number : 8

    Warnings
    URI : http://www.windsorarea.com/sites/WindsorArea/style.css

    * Line : 21 font-family: You are encouraged to offer a generic
    family as a last alternative
    * Line : 31 font-family: You are encouraged to offer a generic
    family as a last alternative


    Hth,

    :)
     
    Smiley, Feb 5, 2005
    #2
    1. Advertisements

  3. I am not a css expert by any means. However, play around with the
    absolute positioning. You have absolute positioning expressed in
    percentages. That's like saying "I want abosolte positioning,but it must
    be relative." I think that's where Mozilla is getting confused on the
    first go.

    Try expressing the positioning in pixels, or try relative positioning.

    Lee
     
    Leonidas Jones, Feb 5, 2005
    #3
  4. Mark Nenadov

    Mark Nenadov Guest


    Thanks for your advice. I already mentioned that I put my CSS through a
    validator and I know about those warnings. I'm going to fix them, but they
    don't seem to have anything to do with the question I asked about (they
    seem to only involve padding and text style, not general layout).

    - -
    Mark Nenadov
    Python Byte Solutions
    http://www.pythonbyte.com/
     
    Mark Nenadov, Feb 5, 2005
    #4
  5. Mark Nenadov

    Mark Nenadov Guest

    Lee,

    Thanks. Good observation! This sounds like it might be what it is. I'm
    going to try to fix that.

    - -
    Mark Nenadov
    Python Byte Solutions
    http://www.pythonbyte.com/
     
    Mark Nenadov, Feb 5, 2005
    #5
  6. Good luck, let us know how it turns out!

    Lee
     
    Leonidas Jones, Feb 5, 2005
    #6
  7. Mark Nenadov

    Jeff Evans Guest

    I'm not sure that's the issue... at least it shouldn't be. position:
    absolute only means the element breaks from the normal "flow" layout of
    the page and does not cause other elements to move around it. 14%
    should still be an acceptable way of setting the offset. In fact W3's
    own examples do this:

    http://www.w3.org/TR/REC-CSS2/visuren.html#absolute-positioning
     
    Jeff Evans, Feb 15, 2005
    #7
    1. Advertisements

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.