Mozilla + CSS problem

Discussion in 'HTML' started by Marc, Sep 7, 2003.

  1. Marc

    Marc Guest

    Hi, I'm having a problem with a site displaying properly in Mozilla. In IE,
    it's fine, but Mozilla has obvious problems.

    http://hairyfruit.com

    The main problems are the nav (big empty space inside the inner div), and
    the content div, which in Mozilla is much farther from the top than it
    should be. I've tried for hours to fix these, but can't. Can anyone see
    what I've done wrong?

    If needs be, I can detect the browser server side and specify the CSS
    dependant on that.

    Any help would be much appreciated.

    Thanks,
    Marc
     
    Marc, Sep 7, 2003
    #1
    1. Advertising

  2. Marc

    SteW Guest

    Marc wrote:
    > Hi, I'm having a problem with a site displaying properly in Mozilla. In IE,
    > it's fine, but Mozilla has obvious problems.
    >
    > http://hairyfruit.com
    >
    > The main problems are the nav (big empty space inside the inner div), and
    > the content div, which in Mozilla is much farther from the top than it
    > should be. I've tried for hours to fix these, but can't. Can anyone see
    > what I've done wrong?
    >
    > If needs be, I can detect the browser server side and specify the CSS
    > dependant on that.
    >
    > Any help would be much appreciated.
    >
    > Thanks,
    > Marc
    >


    Can't see a 'inner div'. If you are talking about your innernav, ie6 and
    moz 1.4 both show an identical gap between the two divs; this is to be
    expected since you have a 10px margin-bottom in innernav.

    As for the space between the top and h1 in your content div, this is
    normal - ie6 is probably at fault and moz users who notice it at all
    will probably realise the page has been designed for ie. I would just
    ignore it, the trouble of making both look the same is not worth it, and
    you shouldn't try to get all browsers looking the same - getting your
    page to look _good_ in all recent browsers and readable in ancient and
    all other browsers should be the aim.

    Ste W
     
    SteW, Sep 7, 2003
    #2
    1. Advertising

  3. Marc

    Marc Guest

    > > The main problems are the nav (big empty space inside the inner div),
    and
    > > the content div, which in Mozilla is much farther from the top than it
    > > should be. I've tried for hours to fix these, but can't. Can anyone

    see
    > > what I've done wrong?


    > Can't see a 'inner div'. If you are talking about your innernav, ie6 and
    > moz 1.4 both show an identical gap between the two divs; this is to be
    > expected since you have a 10px margin-bottom in innernav.


    No, the navigation menu is made up of 3 <div>s: #nav, .innernav, and
    ..innernav. The problem that in Mozilla, there is a big empty blue space on
    the left side of the #nav <div>, although the space is the background colour
    of the .innernav <div>s, so i suppose it is the <li> or the <a> that is at
    fault. Hmm...

    > As for the space between the top and h1 in your content div, this is
    > normal - ie6 is probably at fault and moz users who notice it at all
    > will probably realise the page has been designed for ie. I would just
    > ignore it, the trouble of making both look the same is not worth it, and
    > you shouldn't try to get all browsers looking the same - getting your
    > page to look _good_ in all recent browsers and readable in ancient and
    > all other browsers should be the aim.


    I realise this isn't a major problem, but I'd still like to reduce the top
    space in Mozilla without reducing it in IE if possible.

    Thanks,
    Marc
     
    Marc, Sep 7, 2003
    #3
  4. Marc

    Marc Guest

    > > > The main problems are the nav (big empty space inside the inner div),
    and
    > > > the content div, which in Mozilla is much farther from the top than it
    > > > should be. I've tried for hours to fix these, but can't. Can anyone

    see
    > > > what I've done wrong?

    >
    > > Can't see a 'inner div'. If you are talking about your innernav, ie6 and
    > > moz 1.4 both show an identical gap between the two divs; this is to be
    > > expected since you have a 10px margin-bottom in innernav.

    >
    > No, the navigation menu is made up of 3 <div>s: #nav, .innernav, and
    > .innernav. The problem that in Mozilla, there is a big empty blue space

    on
    > the left side of the #nav <div>, although the space is the background

    colour
    > of the .innernav <div>s, so i suppose it is the <li> or the <a> that is at
    > fault. Hmm...
    >
    > > As for the space between the top and h1 in your content div, this is
    > > normal - ie6 is probably at fault and moz users who notice it at all
    > > will probably realise the page has been designed for ie. I would just
    > > ignore it, the trouble of making both look the same is not worth it, and
    > > you shouldn't try to get all browsers looking the same - getting your
    > > page to look _good_ in all recent browsers and readable in ancient and
    > > all other browsers should be the aim.

    >
    > I realise this isn't a major problem, but I'd still like to reduce the top
    > space in Mozilla without reducing it in IE if possible.


    Ok, I fixed the latter problem:

    #content {
    position: absolute;
    left: 60px;
    top: 30px;
    right: 210px;
    }

    html>body #content {
    top: 10px;
    }

    IE does not understand the html>body method, so obeys the 30px ruling, where
    as Mozilla does, and as the 10px ruling is defined later, it obeys it.

    But I still can't figure the problem in mozilla with the navigation. Anyone
    got any ideas?

    Thanks,
    Marc
     
    Marc, Sep 7, 2003
    #4
  5. Marc

    Els Guest

    Marc wrote:

    >>>>The main problems are the nav (big empty space inside the inner div),

    >
    > and
    >
    >>>>the content div, which in Mozilla is much farther from the top than it
    >>>>should be. I've tried for hours to fix these, but can't. Can anyone

    >
    > see
    >
    >>>>what I've done wrong?

    >>
    >>>Can't see a 'inner div'. If you are talking about your innernav, ie6 and
    >>>moz 1.4 both show an identical gap between the two divs; this is to be
    >>>expected since you have a 10px margin-bottom in innernav.

    >>
    >>No, the navigation menu is made up of 3 <div>s: #nav, .innernav, and
    >>.innernav. The problem that in Mozilla, there is a big empty blue space

    >
    > on
    >
    >>the left side of the #nav <div>, although the space is the background

    >
    > colour
    >
    >>of the .innernav <div>s, so i suppose it is the <li> or the <a> that is at
    >>fault. Hmm...
    >>
    >>
    >>>As for the space between the top and h1 in your content div, this is
    >>>normal - ie6 is probably at fault and moz users who notice it at all
    >>>will probably realise the page has been designed for ie. I would just
    >>>ignore it, the trouble of making both look the same is not worth it, and
    >>>you shouldn't try to get all browsers looking the same - getting your
    >>>page to look _good_ in all recent browsers and readable in ancient and
    >>>all other browsers should be the aim.

    >>
    >>I realise this isn't a major problem, but I'd still like to reduce the top
    >>space in Mozilla without reducing it in IE if possible.

    >
    >
    > Ok, I fixed the latter problem:
    >
    > #content {
    > position: absolute;
    > left: 60px;
    > top: 30px;
    > right: 210px;
    > }
    >
    > html>body #content {
    > top: 10px;
    > }
    >
    > IE does not understand the html>body method, so obeys the 30px ruling, where
    > as Mozilla does, and as the 10px ruling is defined later, it obeys it.
    >
    > But I still can't figure the problem in mozilla with the navigation. Anyone
    > got any ideas?
    >



    I can't see the rest of the thread anymore, don't know if
    anyone else can. Could you mention the url again, please?


    --
    Els

    Mente humana é como pára-quedas; funciona melhor aberta.
     
    Els, Sep 7, 2003
    #5
  6. Marc

    SteW Guest

    Marc wrote:
    The problem that in Mozilla, there is a big empty blue space on
    > the left side of the #nav <div>, although the space is the background colour
    > of the .innernav <div>s, so i suppose it is the <li> or the <a> that is at
    > fault. Hmm...
    >
    >


    I see it - .innernav ul {padding-left: 0; ...}

    >>As for the space between the top and h1 in your content div, this is
    >>normal - ie6 is probably at fault and moz users who notice it at all
    >>will probably realise the page has been designed for ie. I would just
    >>ignore it, the trouble of making both look the same is not worth it, and
    >>you shouldn't try to get all browsers looking the same - getting your
    >>page to look _good_ in all recent browsers and readable in ancient and
    >>all other browsers should be the aim.

    >
    >
    > I realise this isn't a major problem, but I'd still like to reduce the top
    > space in Mozilla without reducing it in IE if possible.
    >


    I'm still ignoring it ;-) but could mess about with padding-top and
    margin-top.

    Ste W
     
    SteW, Sep 7, 2003
    #6
  7. Marc

    SteW Guest

    SteW wrote:

    >>
    >> I realise this isn't a major problem, but I'd still like to reduce the
    >> top
    >> space in Mozilla without reducing it in IE if possible.
    >>


    I've just carefully lined up the page in ie and moz - there is only
    about 2 pixel difference!!! It's hard enough to notice even with them
    side-by-side.

    Ste W
     
    SteW, Sep 7, 2003
    #7
  8. Marc

    Marc Guest

    > >> I realise this isn't a major problem, but I'd still like to reduce the
    > >> top
    > >> space in Mozilla without reducing it in IE if possible.

    >
    > I've just carefully lined up the page in ie and moz - there is only
    > about 2 pixel difference!!! It's hard enough to notice even with them
    > side-by-side.


    That's because I fixed it about two minutes after I made the second post! I
    did post to say that I had moved the Mozilla top margin up 20px and it looks
    fine in both now...

    Marc
     
    Marc, Sep 7, 2003
    #8
  9. Marc

    Marc Guest

    > > But I still can't figure the problem in mozilla with the navigation.
    Anyone
    > > got any ideas?

    >
    > I can't see the rest of the thread anymore, don't know if
    > anyone else can. Could you mention the url again, please?


    http://hairyfruit.com

    Thanks
     
    Marc, Sep 7, 2003
    #9
  10. Marc

    Marc Guest

    > The problem that in Mozilla, there is a big empty blue space on
    > > the left side of the #nav <div>, although the space is the background

    colour
    > > of the .innernav <div>s, so i suppose it is the <li> or the <a> that is

    at
    > > fault. Hmm...

    >
    > I see it - .innernav ul {padding-left: 0; ...}


    Yup, that seems to have fixed it, thanks!

    Marc
     
    Marc, Sep 7, 2003
    #10
  11. Marc

    SteW Guest

    >Yup, that seems to have fixed it, thanks!

    Glad it helped, thanks for the thanks!

    From your post (22:05 by my reader):
    >I can't see the rest of the thread anymore, don't know if
    > anyone else can. Could you mention the url again, please?


    Nope, don't see the original of this. Regarding my post about 2 px
    difference (shows as 17:28 on my newsreader), I obviously tried this
    after you fixed it, but didn't see your 16:18 post until after my 17:28
    post. I know usenet is not an immediate communication system but it can
    get confusing at times.

    Ste W
     
    SteW, Sep 8, 2003
    #11
    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. Christopher M. Balz

    CSS MIME type: Is it Tomcat or Mozilla?

    Christopher M. Balz, Sep 11, 2003, in forum: Java
    Replies:
    1
    Views:
    5,517
    Christopher M. Balz
    Sep 11, 2003
  2. David Graham

    Re: CSS positioning help - Mozilla

    David Graham, Jun 28, 2003, in forum: HTML
    Replies:
    1
    Views:
    5,539
    Lorne Cameron
    Jun 28, 2003
  3. brucie
    Replies:
    8
    Views:
    2,056
    Wipkip
    Jun 29, 2003
  4. Robert Frost-Bridges

    Re: Mozilla / CSS problem

    Robert Frost-Bridges, Jul 30, 2003, in forum: HTML
    Replies:
    2
    Views:
    437
    Robert Frost-Bridges
    Aug 1, 2003
  5. Henri
    Replies:
    9
    Views:
    1,891
    Toby Inkster
    Feb 22, 2005
Loading...

Share This Page