Mozilla + CSS problem

[Marc]

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

 

[SteW]

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

 

[Marc]

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

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

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]

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

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

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

 

[Els]

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?

 

[SteW]

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; ...}

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]

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

 

[Marc]

I realise this isn't a major problem, but I'd still like to reduce the

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]

But I still can't figure the problem in mozilla with the navigation.
Anyone

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]

The problem that in Mozilla, there is a big empty blue space on

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

Yup, that seems to have fixed it, thanks!

Marc

 

[SteW]

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