mozilla border bug?

[Aquila Deus]

http://www.aquila-deus.no-ip.org/AqDHome/

The borders of the menu items are not right. Each menu item consists
of a div and a table inside of the div, and both of the div and the
table have borders. The problem is that the two borders overlap
partially in mozilla/firefox (but not in IE6). Is this a bug? Or did I
do something wrong?

 

[Roy Schestowitz]

http://www.aquila-deus.no-ip.org/AqDHome/

The borders of the menu items are not right. Each menu item consists
of a div and a table inside of the div, and both of the div and the
table have borders. The problem is that the two borders overlap
partially in mozilla/firefox (but not in IE6). Is this a bug? Or did I
do something wrong?

I am looking at this in Konqueror under Linux. I can't see any problem with
the menus and the borders between menu items. However, I see some
distracting spacing where the edges are round. This does _not_ happen under
Firefox. All looks perfect apart from some different shades where the round
pieces are put. There is also some missing piece of line to the right of
'My Works'

Apart from that, great design!

 

[Roy Schestowitz]

http://www.aquila-deus.no-ip.org/AqDHome/

The borders of the menu items are not right. Each menu item consists
of a div and a table inside of the div, and both of the div and the
table have borders. The problem is that the two borders overlap
partially in mozilla/firefox (but not in IE6). Is this a bug? Or did I
do something wrong?

You might also wish to have a look at the spacing between menu items. It
changes when 'Site Info' is selected. The menu appears on the left hand
side of the page under Konqueror.

 

[Toby Inkster]

http://www.aquila-deus.no-ip.org/AqDHome/
The borders of the menu items are not right.

Looks fine in Moz 1.6 here.

In Opera 7.53 though the borders are literally "not right" -- the top,
left and bottom border for each menu item is displayed, but not the right
one. Though to be honest, it's a nice effect either way.

 

[Aquila Deus]

I am looking at this in Konqueror under Linux. I can't see any problem with
the menus and the borders between menu items. However, I see some
distracting spacing where the edges are round. This does _not_ happen under
Firefox. All looks perfect apart from some different shades where the round
pieces are put. There is also some missing piece of line to the right of
'My Works'

I changed menuitems' order and the prob is still there... very weird

Apart from that, great design!

Thank you! this is the first time I try out non-geek graphics design )

 

[Aquila Deus]

Looks fine in Moz 1.6 here.

In Opera 7.53 though the borders are literally "not right" -- the top,
left and bottom border for each menu item is displayed, but not the right
one. Though to be honest, it's a nice effect either way.

ummm... well, but I expect it to be that:
http://www.aquila-deus.no-ip.org/AqDHome.png (IE6)

 

[Toby Inkster]

ummm... well, but I expect it to be that:
http://www.aquila-deus.no-ip.org/AqDHome.png (IE6)

Your screenshot is not what I described.

Notice -- no right borders:
http://examples.tobyinkster.co.uk/not-right

 

[Aquila Deus]

Your screenshot is not what I described.

Notice -- no right borders:
http://examples.tobyinkster.co.uk/not-right

Oh... all right, now I really have to add mozilla/opera-specific code.... ffff!

 

[rf]

Oh... all right, now I really have to add mozilla/opera-specific code....

ffff!

If your HTML and CSS were not so incredibly complex you would not need to.

When I looked at the source to find out what this thread is about I simply
could not believe it. I had to go back to my browser to see if anything was
hiding under the fold. Pages and pages of HTML for what looks to be a quite
simple menu.

 

[Aquila Deus]

I solved it!! YEY!!!

I changed border-collapse from collapse to separate, then use a table
with a td (where outer border is in) as the outer pane to replace the
original div. Now it works perfectly in both of firefox and IE )

Thanks for you guys!!

 

[Aquila Deus]

ffff!

If your HTML and CSS were not so incredibly complex you would not need to.

When I looked at the source to find out what this thread is about I simply
could not believe it. I had to go back to my browser to see if anything was
hiding under the fold. Pages and pages of HTML for what looks to be a quite
simple menu.

Yes, but mozilla and IE handle many CSS properties differently. And W3
doesn't define all details.

 

[rf]

"rf" <[email protected]> wrote in message to.

Yes, but mozilla and IE handle many CSS properties differently.

Yes, we know that. All browsers render things somewhat differently.

And W3
doesn't define all details.

And why should they. They are there to supply the recommendations, not
comment on browser differences. The rest of the web and the newsgroups do
that.

You also entirely missed the point. Your code is *complex*. Way too complex.
Nesting tables within divs within tables within whatever and then throwing
three files full of CSS at the lot is *bound* to make some browser barf. You
have used a whole forest full of trees to construct one simple dog house.

Rewrite it, keeping it real simple. I would not expect more than one
screenfull of HTML and one of CSS and *no* javascript.

If a simple menu takes up so much code space I shudder to think what the
entire page will be like. Start simple now or that page will continue to
bite you

Oh, you might also validate the code. Things like </my:MenuItem> are
probably not helping.

 

[Aquila Deus]

Yes, we know that. All browsers render things somewhat differently.


And why should they. They are there to supply the recommendations, not
comment on browser differences. The rest of the web and the newsgroups do
that.

No, I mean W3's CSS should be very very clear. There should not be
anything vague or undefined. We all know IE isn't standard-compatible,
but it would be worse if other browsers which try to be compatible
can't find way to go.

You also entirely missed the point. Your code is *complex*. Way too complex.
Nesting tables within divs within tables within whatever and then throwing
three files full of CSS at the lot is *bound* to make some browser barf. You
have used a whole forest full of trees to construct one simple dog house.

complex code is not a problem, since it's not really plain html but
ASP.NET code. You could view the code at
http://cvs.sourceforge.net/viewcvs.py/aqdhome/AqDHome/

Rewrite it, keeping it real simple. I would not expect more than one
screenfull of HTML and one of CSS and *no* javascript.

If a simple menu takes up so much code space I shudder to think what the
entire page will be like. Start simple now or that page will continue to
bite you

Oh, you might also validate the code. Things like </my:MenuItem> are
probably not helping.

Ah, I have removed it

 

[rf]

"rf" <[email protected]> wrote in message complex.

complex code is not a problem, since it's not really plain html but
ASP.NET code. You could view the code at
http://cvs.sourceforge.net/viewcvs.py/aqdhome/AqDHome/

But complex code *is* your problem. Why are you here asking why your borders
don't work in certain browsers? The answer is because you have complex code.
The fact that it is spat out by asp is irrelevant, it *is* "plain HTML" by
the time it gets to the browser.

You have complex nested tables and divs and it is upsetting the browsers. If
you had *simple* code then the browsers would not get upset, your borders
would not break and you would not be here asking for help.

Simpify the HTML. Simplify the CSS. When you do that your problem will
disappear.

Can it be any more simple than that?

 

[Toby Inkster]

Simpify the HTML. Simplify the CSS. When you do that your problem will
disappear.

Tada!

Original:
http://www.aquila-deus.no-ip.org/AqDHome/

Rewrite:
http://examples.tobyinkster.co.uk/aqdhome/page

Simple HTML. Mainly pretty simple CSS (though there's a lot of it). No
javascript.

Tested in:

- Opera 7 for Windows
- Opera 7.5 for Linux
- Mozilla 1.0 for Windows
- Mozilla 1.6 for Linux
- Firefox 0.9 for Windows
- Internet Explorer 6 for Windows

Works in all of them.

 

[rf]

Tada!

You beat me to it :-(

Original:
http://www.aquila-deus.no-ip.org/AqDHome/

Rewrite:
http://examples.tobyinkster.co.uk/aqdhome/page

Simple HTML. Mainly pretty simple CSS (though there's a lot of it). No
javascript.

Very well done sir!

A quarter of a page of HTML and only two of CSS.

Tested in:

FWIW IE5.5 has a problem with the content. It's all wordwrapped to one word
per line. Nothing insurmountable though, the odd IE hack would fix it. Also
a couple of artifacts in IE 5.01, some blank space in the graphics. Once
again no problem and, probably, who cares.

An aging opera 6 doesn't like it but who cares.

It linearizes quite properly, and very neatly, in IE3 and lynx, something
the original does *not* do.

I wonder now how the value of "simple code" will be apreciated

 

[Aquila Deus]

Tada!

Original:
http://www.aquila-deus.no-ip.org/AqDHome/

Rewrite:
http://examples.tobyinkster.co.uk/aqdhome/page

Simple HTML. Mainly pretty simple CSS (though there's a lot of it). No
javascript.

Tested in:

- Opera 7 for Windows
- Opera 7.5 for Linux
- Mozilla 1.0 for Windows
- Mozilla 1.6 for Linux
- Firefox 0.9 for Windows
- Internet Explorer 6 for Windows

Works in all of them.

Very nice

But I can't accept, because padding and margin may be screwed under
some conditions, and I can't predict what there will be in the left
content pane. (even the menu pane may have other things)... that's why
I use <td> with <img> everywhere instead, to enforce the final layout.

 

[rf]

Very nice

But I can't accept,

Then you are a bloody idiot and your problems will remain until your web
site dies.

 

[Toby Inkster]

It linearizes quite properly, and very neatly, in IE3 and lynx, something
the original does *not* do.

Of course it does. Minus tables and some such, I tend to do most of my
initial HTML testing in Lynx (then I do most of my initial CSS and
Javascript testing in Opera).

My favourite bit is the sneaky dual use of the skiplink class.

Yeah, I know about the Opera 6 and IE 5.x problems. It's a shame. I do try
to get most of my CSS layouts working in Opera 3.62+, but it's not always
possible. IE 5.x can be worked around with one or two tiny hacks, but I
wanted to keep the example as simple as possible.

(There's only one thing in it that I'd class as a hack -- the last 4 lines
of the CSS. IE doesn't like the right margin -- prefers padding; Moz
doesn't like right padding -- prefers margin; Opera doesn't mind either.)

 

[Toby Inkster]

But I can't accept, because padding and margin may be screwed under
some conditions, and I can't predict what there will be in the left
content pane.

But it ought to give you some ideas on how your menu can be simplified.

I'm sure there is some kind of compromise to which you can come -- e.g. a
single layout table to create the initial two-column effect, but then CSS
to layout the menu *within* that column.