CSS List bug in Mozilla

[the_ainbinders]

This site http://www.nczoo.org has a nagging bug. In Mozilla the left
nav list expands into the content area. Opera and IE (MAC/WIN) seem
fine. Any advice would be appreciated.

[Steve Pugh]

"th************@nospam.yahoo.com" <th************@yahoo.com> wrote:

This site http://www.nczoo.org has a nagging bug. In Mozilla the left
nav list expands into the content area. Opera and IE (MAC/WIN) seem
fine. Any advice would be appreciated.

The links within #mainnav are wider than their container because you
tell them to be.

ul#mainnav li a {
display: block;
margin: 0px 0px 0px 0px;
padding: 6px 6%;
width: 100%;
}

100% + 6% + 6% = 112% so the links will be wider than their container
so it should be no surprise that they spill over into the adjacent
blocks.

Because you have no doctype Opera 7, Mac IE5 and Win IE5 go into
Quirks mode where they emulate the bugs of Win IE5 and older and
incorrectly place the padding inside the width. Even in Quirks mode
Mozilla gets this right and places the padding outside the width.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>

[Richard]

On 2 Feb 2005 06:44:37 -0800 th************@nospam.yahoo.com wrote:

This site http://www.nczoo.org has a nagging bug. In Mozilla the left
nav list expands into the content area. Opera and IE (MAC/WIN) seem
fine. Any advice would be appreciated.

First thing I dislike is the fact that I have no right click.
Guess what? I don't need it that bad.
ctrl+u allows me to see your source code anyway.
Whilst moving my mouse about the screen, I note various blank spaces have
links.
As my cursor becomes a hand instead of an arrow.

As steve pointed out, you can't have a width greater than 100% inside a
container and expect the contents to remain inside.

Also, I noted you have a spacer of 1 pixel. Why?
A totally useless idea.
If you want space, define the line height for greater seperation, or define
the division differently, or include some other text tricks.

[the_ainbinders]

Steve Pugh wrote:

"th************@nospam.yahoo.com" <th************@yahoo.com> wrote:

This site http://www.nczoo.org has a nagging bug. In Mozilla the leftnav list expands into the content area. Opera and IE (MAC/WIN) seem
fine. Any advice would be appreciated.

The links within #mainnav are wider than their container because you
tell them to be.

ul#mainnav li a {
display: block;
margin: 0px 0px 0px 0px;
padding: 6px 6%;
width: 100%;
}

100% + 6% + 6% = 112% so the links will be wider than their container
so it should be no surprise that they spill over into the adjacent
blocks.

Because you have no doctype Opera 7, Mac IE5 and Win IE5 go into
Quirks mode where they emulate the bugs of Win IE5 and older and
incorrectly place the padding inside the width. Even in Quirks mode
Mozilla gets this right and places the padding outside the width.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>

Steve-

Thanks for your reply. Being a little new to CSS, I appreciate the time
to look over the CSS for what might seem to be a obvious error to
someone more experienced.

I made the change recommened. While not pixel perfect, it's passable.