Need help finding CSS bug in Opera

[rhino]

I've put together a prototype of two-tiered CSS tabs that works really well
in IE6, IE7, and FF2. It also works very well in Opera 9.27 _except_ that
the placement of the lower tier of tabs is messed up. Both the XHTML and CSS
validate without any errors or warnings. Can anyone help me figure out what
is wrong?

I'd be especially interested in the technique you used to figure out where
the problem was. I still struggle a lot when I try to figure out why
something is not displaying correctly.

You can see the prototype at http://westown.qqqq.ca/2000a.html.

--
By the way, in case anyone's interested, I have another prototype of two
tiered tabs - this one doesn't use GIFs - at
http://westown.qqqq.ca/2000.html. I'd be interested in critiques or
suggestions for improvement on both prototypes. I'd be especially interested
to know if these pages are easily accessible to the handicapped. I'm really
not sure how to test for that.

--
Rhino

[Ben C]

Re: Need help finding CSS bug in Opera

On 2008-06-14, rhino <No.offline.con tact.please@ano nymous.comwrote :

I've put together a prototype of two-tiered CSS tabs that works really well
in IE6, IE7, and FF2. It also works very well in Opera 9.27 _except_ that
the placement of the lower tier of tabs is messed up. Both the XHTML and CSS
validate without any errors or warnings. Can anyone help me figure out what
is wrong?

It's not a bug: you're setting position: absolute on ul#subnav-2000 but
not setting top.

That means the browser is supposed to position it where it would have
gone if it had been normal-flow, but, according to the spec, it is free
to make a guess at that position.

Opera just guessed differently.

It's not safe to rely on this. If you use position: absolute, I
recommend set at least one of top/bottom and one of left/right.

Not sure why you need position: absolute here anyway-- it stops the
second row of tabs extending the width of the first tab on the first
row, but I don't know why the second row needs to be a child of the
first element of the first row in the HTML.

[rhino]

Re: Need help finding CSS bug in Opera


"Ben C" <spamspam@spam. eggswrote in message
news:slrng570l8 .2lb.spamspam@b owser.marioworl d...

On 2008-06-14, rhino <No.offline.con tact.please@ano nymous.comwrote :

>I've put together a prototype of two-tiered CSS tabs that works really
>well
>in IE6, IE7, and FF2. It also works very well in Opera 9.27 _except_ that
>the placement of the lower tier of tabs is messed up. Both the XHTML and
>CSS
>validate without any errors or warnings. Can anyone help me figure out
>what
>is wrong?

>
It's not a bug: you're setting position: absolute on ul#subnav-2000 but
not setting top.
>
That means the browser is supposed to position it where it would have
gone if it had been normal-flow, but, according to the spec, it is free
to make a guess at that position.
>
Opera just guessed differently.
>
It's not safe to rely on this. If you use position: absolute, I
recommend set at least one of top/bottom and one of left/right.
>
Not sure why you need position: absolute here anyway-- it stops the
second row of tabs extending the width of the first tab on the first
row, but I don't know why the second row needs to be a child of the
first element of the first row in the HTML.

Frankly, I'm not sure why some of the CSS rules are there either. I didn't
create this from scratch. I found an example that came fairly close to what
I wanted to do and tweaked it until it was behaving the way I wanted - aside
from the placement of the second tier of tabs in Opera.

As you can probably see, the prototype is trying to show a two-tiered menu
where the visitor to the site can view various newsletters published by the
site. The user chooses a particular year in the upper tier of tabs, then the
appropriate lower tier is displayed to show the issues published for that
year. (I'm assuming that some years may have more or different issues than
other years). Once the appropriate year has been selected and the issues tab
for that year has been displayed, the user chooses the issue they want.

The HTML for this set of menus contains an unordered list with an <lifor
each year. This list is the #topnav portion of the CSS. Then, for each year
in that outer list, there is another unordered list within it, showing the
issues available in that year. Each issue list has a distinct name, like
subnav-2000. Every webpage concerning the newsletters contains the exact
same nested list showing _all_ of the issues for each year. I use local CSS
within each webpage to turn off all the issue lists except for the
currently-selected year.

I assume the CSS from the original code is trying to make sure that the
issues tabs are immediately below the years tabs. I'm not really sure why
the absolute positioning is being used; perhaps it is to ensure that issues
tabs is situated below the years tabs??

In any case, can you suggest what I should be doing differently. I'm
certainly not wedded to using absolute positioning. I just want the issues
tabs to be immediately under the years tabs.

--
Rhino

[dorayme]

Re: Need help finding CSS bug in Opera

In article <g30m24$iqb$1@n ews.datemas.de> ,
"rhino" <No.offline.con tact.please@ano nymous.comwrote :

>
"Ben C" <spamspam@spam. eggswrote in message
news:slrng570l8 .2lb.spamspam@b owser.marioworl d...

On 2008-06-14, rhino <No.offline.con tact.please@ano nymous.comwrote :

I've put together a prototype of two-tiered CSS tabs that works really
well
in IE6, IE7, and FF2. It also works very well in Opera 9.27 _except_ that
the placement of the lower tier of tabs is messed up. Both the XHTML and
CSS
validate without any errors or warnings. Can anyone help me figure out
what
is wrong?

It's not a bug: you're setting position: absolute on ul#subnav-2000 but
not setting top.

>...

Not sure why you need position: absolute here anyway-- it stops the
second row of tabs extending the width of the first tab on the first
row, but I don't know why the second row needs to be a child of the
first element of the first row in the HTML.

>
Frankly, I'm not sure why some of the CSS rules are there either. ...
>
In any case, can you suggest what I should be doing differently. I'm
certainly not wedded to using absolute positioning. I just want the issues
tabs to be immediately under the years tabs.

There's a sort of two-tiered menu that seems to work in Opera OK at

<http://tvrs.org.au/disability/children.html>

Might give you an idea for a different approach?

--
dorayme

[rhino]

Re: Need help finding CSS bug in Opera


"dorayme" <doraymeRidThis @optusnet.com.a uwrote in message
news:doraymeRid This-AC06CE.09500715 062008@news-vip.optusnet.co m.au...

In article <g30m24$iqb$1@n ews.datemas.de> ,
"rhino" <No.offline.con tact.please@ano nymous.comwrote :
>

>>
>"Ben C" <spamspam@spam. eggswrote in message
>news:slrng570l 8.2lb.spamspam@ bowser.mariowor ld...

On 2008-06-14, rhino <No.offline.con tact.please@ano nymous.comwrote :
>I've put together a prototype of two-tiered CSS tabs that works really
>well
>in IE6, IE7, and FF2. It also works very well in Opera 9.27 _except_
>that
>the placement of the lower tier of tabs is messed up. Both the XHTML
>and
>CSS
>validate without any errors or warnings. Can anyone help me figure out
>what
>is wrong?
>
It's not a bug: you're setting position: absolute on ul#subnav-2000 but
not setting top.
>

>>...

Not sure why you need position: absolute here anyway-- it stops the
second row of tabs extending the width of the first tab on the first
row, but I don't know why the second row needs to be a child of the
first element of the first row in the HTML.

>>
>Frankly, I'm not sure why some of the CSS rules are there either. ...
>>
>In any case, can you suggest what I should be doing differently. I'm
>certainly not wedded to using absolute positioning. I just want the
>issues
>tabs to be immediately under the years tabs.

>
There's a sort of two-tiered menu that seems to work in Opera OK at
>
<http://tvrs.org.au/disability/children.html>
>
Might give you an idea for a different approach?
>

Thank you. I've bookmarked that example and will consider using it if I
can't make my prototype work.

But, given that my current prototype is working perfectly in three major
browsers and only has one specific problem in Opera, I'd really like to
figure out what to change to make it work. I have to believe I only need to
change one or two small things to resolve this problem. That ought to be a
_lot_ less work than starting again.

--
Rhino

[dorayme]

Re: Need help finding CSS bug in Opera

In article <g321hu$ovr$1@n ews.datemas.de> ,
"rhino" <No.offline.con tact.please@ano nymous.comwrote :

"dorayme" <doraymeRidThis @optusnet.com.a uwrote in message
news:doraymeRid This-AC06CE.09500715 062008@news-vip.optusnet.co m.au...

In article <g30m24$iqb$1@n ews.datemas.de> ,
"rhino" <No.offline.con tact.please@ano nymous.comwrote :

>
"Ben C" <spamspam@spam. eggswrote in message
news:slrng570l8 .2lb.spamspam@b owser.marioworl d...
On 2008-06-14, rhino <No.offline.con tact.please@ano nymous.comwrote :
I've put together a prototype of two-tiered CSS tabs that works really
well
in IE6, IE7, and FF2. It also works very well in Opera 9.27 _except_
that
the placement of the lower tier of tabs is messed up. Both the XHTML
and
CSS
validate without any errors or warnings. Can anyone help me figure out
what
is wrong?

It's not a bug: you're setting position: absolute on ul#subnav-2000 but
not setting top.

Frankly, I'm not sure why some of the CSS rules are there either. ...
>
In any case, can you suggest what I should be doing differently. I'm
certainly not wedded to using absolute positioning. I just want the
issues
tabs to be immediately under the years tabs.

There's a sort of two-tiered menu that seems to work in Opera OK at

<http://tvrs.org.au/disability/children.html>

Might give you an idea for a different approach?

Thank you. I've bookmarked that example and will consider using it if I
can't make my prototype work.
>
But, given that my current prototype is working perfectly in three major
browsers and only has one specific problem in Opera, I'd really like to
figure out what to change to make it work. I have to believe I only need to
change one or two small things to resolve this problem. That ought to be a
_lot_ less work than starting again.
>

OK. I understand. In that case, have you tried Ben's suggestion and
attended to giving a "top: xunits" along with your "position: absolute"?

In my opinion you are buying trouble using abs positioning here. This
positioning is tricky business!

Even in Firefox and the browsers you mention, have you seen what happens
to your menus and page when the text is enlarged? Try it and see.
Perhaps you might consider not using abs position and consider
establishing your menu system of a more fluid basis that takes account
of users changing their text size preferences.

--
dorayme

[Ben C]

Re: Need help finding CSS bug in Opera

On 2008-06-14, rhino <No.offline.con tact.please@ano nymous.comwrote :

>
"Ben C" <spamspam@spam. eggswrote in message
news:slrng570l8 .2lb.spamspam@b owser.marioworl d...

>On 2008-06-14, rhino <No.offline.con tact.please@ano nymous.comwrote :

>>[re: http://westown.qqqq.ca/2000a.html]

>>I've put together a prototype of two-tiered CSS tabs that works really
>>well
>>in IE6, IE7, and FF2. It also works very well in Opera 9.27 _except_ that
>>the placement of the lower tier of tabs is messed up. Both the XHTML and
>>CSS
>>validate without any errors or warnings. Can anyone help me figure out
>>what
>>is wrong?

>>
>It's not a bug: you're setting position: absolute on ul#subnav-2000 but
>not setting top.
>>
>That means the browser is supposed to position it where it would have
>gone if it had been normal-flow, but, according to the spec, it is free
>to make a guess at that position.
>>
>Opera just guessed differently.
>>
>It's not safe to rely on this. If you use position: absolute, I
>recommend set at least one of top/bottom and one of left/right.
>>
>Not sure why you need position: absolute here anyway-- it stops the
>second row of tabs extending the width of the first tab on the first
>row, but I don't know why the second row needs to be a child of the
>first element of the first row in the HTML.

>
Frankly, I'm not sure why some of the CSS rules are there either. I didn't
create this from scratch. I found an example that came fairly close to what
I wanted to do and tweaked it until it was behaving the way I wanted - aside
from the placement of the second tier of tabs in Opera.
>
As you can probably see, the prototype is trying to show a two-tiered menu
where the visitor to the site can view various newsletters published by the
site. The user chooses a particular year in the upper tier of tabs, then the
appropriate lower tier is displayed to show the issues published for that
year. (I'm assuming that some years may have more or different issues than
other years). Once the appropriate year has been selected and the issues tab
for that year has been displayed, the user chooses the issue they want.
>
The HTML for this set of menus contains an unordered list with an <lifor
each year. This list is the #topnav portion of the CSS. Then, for each year
in that outer list, there is another unordered list within it, showing the
issues available in that year. Each issue list has a distinct name, like
subnav-2000. Every webpage concerning the newsletters contains the exact
same nested list showing _all_ of the issues for each year. I use local CSS
within each webpage to turn off all the issue lists except for the
currently-selected year.
>
I assume the CSS from the original code is trying to make sure that the
issues tabs are immediately below the years tabs. I'm not really sure why
the absolute positioning is being used; perhaps it is to ensure that issues
tabs is situated below the years tabs??
>
In any case, can you suggest what I should be doing differently. I'm
certainly not wedded to using absolute positioning. I just want the issues
tabs to be immediately under the years tabs.

The reason they're using absolute positioning is to stop the subnavs
affecting the widths of their containers.

The CSS is quite ingenious because it looks like its author has set
themselves the challenge of not altering the HTML in any way for mere
styling purposes. They have also not set width or height on any of the
tabs, therefore presupposing nothing about what text they contain or
what the user's font size is.

All this is good in theory, so we'll try not to break it too much.

Here is a way to make it work in Opera (as well as Firefox and other
reasonably conforming browsers) with relatively few compromises and
without touching the HTML:

1. Add position: relative to #topnav li. We'll use that as the container
for the positioned subnav (rather than trying to get an offset from
the top of the viewport).
2. Remove position: relative from #topnav a (because it's pointless and
does nothing), and add height: 1.2em. This way we set the height but
it grows and shrinks with the user's font size so it's not too bad.
3. Change the margins on "#topnav ul#subnav-2000, #topnav
ul#subnav-2004" to 9px 0 0 0. 9px is the total vertical padding on
#topnav a minus one.
4. Change "left: 10px" to "left: 0" and add "top: 1.2em;" to that
selector as well. So now we position the subnav 1.2em + 9px from the
top of the li, cleverly mixing top and margin-top so we can add
amounts in two different units. It no longer needs to be offset from
the left because it's already relative to the left edge of the li,
not to the left edge of the viewport.
5. Finally we need to change background: #ddd in that selector to
background: transparent and to add min-width: 800px. Otherwise the
subnav menu stacks up vertically because its containing width is now
just the width of the li. But the original design breaks horribly for
narrow viewports anyway, so we aren't really losing anything by using
min-width.

[Candoer]

Re: Need help finding CSS bug in Opera

>
There's a sort of two-tiered menu that seems to work in Opera OK at
>
<http://tvrs.org.au/disability/children.html>
>
Might give you an idea for a different approach?
>
--
dorayme

Dorayme

Thanks for the suggestion! Will take a look at it and see if I can adopt
it. I have a LOT to learn about CSS. Have never tried using it before. It
is hard to teach a 70 year old dog new tricks.

Bob Catlin, also known as CANDOER Cat

[rhino]

Re: Need help finding CSS bug in Opera


"Ben C" <spamspam@spam. eggswrote in message
news:slrng59ufg .681.spamspam@b owser.marioworl d...

On 2008-06-14, rhino <No.offline.con tact.please@ano nymous.comwrote :

>>
>"Ben C" <spamspam@spam. eggswrote in message
>news:slrng570l 8.2lb.spamspam@ bowser.mariowor ld...

>>On 2008-06-14, rhino <No.offline.con tact.please@ano nymous.comwrote :

>

>>>[re: http://westown.qqqq.ca/2000a.html]

>

>>>I've put together a prototype of two-tiered CSS tabs that works really
>>>well
>>>in IE6, IE7, and FF2. It also works very well in Opera 9.27 _except_
>>>that
>>>the placement of the lower tier of tabs is messed up. Both the XHTML
>>>and
>>>CSS
>>>validate without any errors or warnings. Can anyone help me figure out
>>>what
>>>is wrong?
>>>
>>It's not a bug: you're setting position: absolute on ul#subnav-2000 but
>>not setting top.
>>>
>>That means the browser is supposed to position it where it would have
>>gone if it had been normal-flow, but, according to the spec, it is free
>>to make a guess at that position.
>>>
>>Opera just guessed differently.
>>>
>>It's not safe to rely on this. If you use position: absolute, I
>>recommend set at least one of top/bottom and one of left/right.
>>>
>>Not sure why you need position: absolute here anyway-- it stops the
>>second row of tabs extending the width of the first tab on the first
>>row, but I don't know why the second row needs to be a child of the
>>first element of the first row in the HTML.

>>
>Frankly, I'm not sure why some of the CSS rules are there either. I
>didn't
>create this from scratch. I found an example that came fairly close to
>what
>I wanted to do and tweaked it until it was behaving the way I wanted -
>aside
>from the placement of the second tier of tabs in Opera.
>>
>As you can probably see, the prototype is trying to show a two-tiered
>menu
>where the visitor to the site can view various newsletters published by
>the
>site. The user chooses a particular year in the upper tier of tabs, then
>the
>appropriate lower tier is displayed to show the issues published for that
>year. (I'm assuming that some years may have more or different issues
>than
>other years). Once the appropriate year has been selected and the issues
>tab
>for that year has been displayed, the user chooses the issue they want.
>>
>The HTML for this set of menus contains an unordered list with an <li>
>for
>each year. This list is the #topnav portion of the CSS. Then, for each
>year
>in that outer list, there is another unordered list within it, showing
>the
>issues available in that year. Each issue list has a distinct name, like
>subnav-2000. Every webpage concerning the newsletters contains the exact
>same nested list showing _all_ of the issues for each year. I use local
>CSS
>within each webpage to turn off all the issue lists except for the
>currently-selected year.
>>
>I assume the CSS from the original code is trying to make sure that the
>issues tabs are immediately below the years tabs. I'm not really sure why
>the absolute positioning is being used; perhaps it is to ensure that
>issues
>tabs is situated below the years tabs??
>>
>In any case, can you suggest what I should be doing differently. I'm
>certainly not wedded to using absolute positioning. I just want the
>issues
>tabs to be immediately under the years tabs.

>
The reason they're using absolute positioning is to stop the subnavs
affecting the widths of their containers.
>
The CSS is quite ingenious because it looks like its author has set
themselves the challenge of not altering the HTML in any way for mere
styling purposes. They have also not set width or height on any of the
tabs, therefore presupposing nothing about what text they contain or
what the user's font size is.
>
All this is good in theory, so we'll try not to break it too much.
>
Here is a way to make it work in Opera (as well as Firefox and other
reasonably conforming browsers) with relatively few compromises and
without touching the HTML:
>
1. Add position: relative to #topnav li. We'll use that as the container
for the positioned subnav (rather than trying to get an offset from
the top of the viewport).
2. Remove position: relative from #topnav a (because it's pointless and
does nothing), and add height: 1.2em. This way we set the height but
it grows and shrinks with the user's font size so it's not too bad.
3. Change the margins on "#topnav ul#subnav-2000, #topnav
ul#subnav-2004" to 9px 0 0 0. 9px is the total vertical padding on
#topnav a minus one.
4. Change "left: 10px" to "left: 0" and add "top: 1.2em;" to that
selector as well. So now we position the subnav 1.2em + 9px from the
top of the li, cleverly mixing top and margin-top so we can add
amounts in two different units. It no longer needs to be offset from
the left because it's already relative to the left edge of the li,
not to the left edge of the viewport.
5. Finally we need to change background: #ddd in that selector to
background: transparent and to add min-width: 800px. Otherwise the
subnav menu stacks up vertically because its containing width is now
just the width of the li. But the original design breaks horribly for
narrow viewports anyway, so we aren't really losing anything by using
min-width.

One step forward, one step back. Or thereabouts.

IE7, FF2, and Opera now all behave identically - but not quite right. And
IE6 is badly broken.

In the HTML, the only tabs which take you to a "real" newsletter are Jan-Feb
2000, May-Jun 2000, Jan 2004, and Jun 2004. All the other tabs take you to
"nopagea.ht ml", which is effectively an "under-construction" page.

For IE7, FF2, and Opera, everything is fine for the year 2000 and also for
the years where all the issues are under construction. But when you choose
2004, you see that the issues tabs are indented to begin at the same point
as the 2004 tab rather than left to start at the 2000 tab. Re-reading your
fourth suggestion, that appears to be what you want but I'd prefer to leave
the issues tab so that it always begins at the same point as the 2000 tab.
How do I do that?

IE6 is so badly broken with this CSS that I don't know where to begin with
sorting it out.

Am I asking too much in trying to get this to work in all 4 of the browsers
I want to support?

By the way, thanks VERY much for your help with this. I feel like we're
making progress, even if IE6 is not very good right now.

--
Rhino

[Beauregard T. Shagnasty]

Re: Need help finding CSS bug in Opera

Candoer wrote:

Thanks for the suggestion! Will take a look at it and see if I can
adopt it. I have a LOT to learn about CSS. Have never tried using
it before. It is hard to teach a 70 year old dog new tricks.

That's like 10 in human years, eh? :-)

C'mon, you're only three years older than me, and I have no problem
using CSS...

--
-bts
-Friends don't let friends drive Windows

[Ben C]

Re: Need help finding CSS bug in Opera

On 2008-06-15, rhino <No.offline.con tact.please@ano nymous.comwrote :

>
"Ben C" <spamspam@spam. eggswrote in message
news:slrng59ufg .681.spamspam@b owser.marioworl d...

>On 2008-06-14, rhino <No.offline.con tact.please@ano nymous.comwrote :

>>>
>>"Ben C" <spamspam@spam. eggswrote in message
>>news:slrng570 l8.2lb.spamspam @bowser.mariowo rld...
>>>On 2008-06-14, rhino <No.offline.con tact.please@ano nymous.comwrote :

>>

>>>>[re: http://westown.qqqq.ca/2000a.html]

[...]

One step forward, one step back. Or thereabouts.
>
IE7, FF2, and Opera now all behave identically - but not quite right. And
IE6 is badly broken.
>
In the HTML, the only tabs which take you to a "real" newsletter are Jan-Feb
2000, May-Jun 2000, Jan 2004, and Jun 2004. All the other tabs take you to
"nopagea.ht ml", which is effectively an "under-construction" page.
>
For IE7, FF2, and Opera, everything is fine for the year 2000 and also for
the years where all the issues are under construction. But when you choose
2004, you see that the issues tabs are indented to begin at the same point
as the 2004 tab rather than left to start at the 2000 tab. Re-reading your
fourth suggestion, that appears to be what you want

Sort of. I hadn't thought of what would happen with the other tabs. I
see what you mean, of course they all want to start at the left.

but I'd prefer to leave the issues tab so that it always begins at the
same point as the 2000 tab. How do I do that?

Make the ul the container instead.

1. Make ul#topnav position: relative.
2. Remove position: relative from everything else.
3. Also give ul#topnav 1px of top padding. This is to prevent margins
collapsing.

The sub-menus should now all start in the same place over to the left.

IE6 is so badly broken with this CSS that I don't know where to begin with
sorting it out.

Did the original version, which didn't work in Opera, work in IE6?

Am I asking too much in trying to get this to work in all 4 of the browsers
I want to support?

It's quite lucky that it seems to be working in IE7. I don't know the
quirks and deficiencies of IE6 so I don't know what you can do there.

The obvious compromise is to allow yourself to change the HTML a bit. If
the subnavs weren't nested inside the li's they're the submenus of it
would be easier I think.

Nesting them like that is a sort of meaningful structure in HTML, but it
makes it a lot harder to style.

[Blinky the Shark]

Re: Need help finding CSS bug in Opera

Beauregard T. Shagnasty wrote:

Candoer wrote:
>

>Thanks for the suggestion! Will take a look at it and see if I can
>adopt it. I have a LOT to learn about CSS. Have never tried using
>it before. It is hard to teach a 70 year old dog new tricks.

>
That's like 10 in human years, eh? :-)
>
C'mon, you're only three years older than me, and I have no problem
using CSS...

I had no idea you were in your sixties, Gramps. ;)

(I'm right behind you; I turn 61 this month. In human years, I mean.)


--
Blinky
Is your ISP dropping Usenet?
Need a new feed?

http://blinkynet.net/comp/newfeed.html

[Beauregard T. Shagnasty]

Re: Need help finding CSS bug in Opera

Blinky the Shark wrote:

Beauregard T. Shagnasty wrote:

>Candoer wrote:

>>Thanks for the suggestion! Will take a look at it and see if I can
>>adopt it. I have a LOT to learn about CSS. Have never tried using
>>it before. It is hard to teach a 70 year old dog new tricks.

>>
>That's like 10 in human years, eh? :-)
>>
>C'mon, you're only three years older than me, and I have no problem
>using CSS...

>
I had no idea you were in your sixties, Gramps. ;)

"Gramps" ... my grandbabies are coming to visit today. One just turned
four, and the other is eleven weeks.

(I'm right behind you; I turn 61 this month. In human years, I
mean.)

Yep. Actually, 67 comes in August for me. I remember your big six-oh
celebration last summer...

--
-bts
-Friends don't let friends drive Windows

[rhino]

Re: Need help finding CSS bug in Opera


"Ben C" <spamspam@spam. eggswrote in message
news:slrng5b1u2 .681.spamspam@b owser.marioworl d...

On 2008-06-15, rhino <No.offline.con tact.please@ano nymous.comwrote :

>>
>"Ben C" <spamspam@spam. eggswrote in message
>news:slrng59uf g.681.spamspam@ bowser.mariowor ld...

>>On 2008-06-14, rhino <No.offline.con tact.please@ano nymous.comwrote :
>>>>
>>>"Ben C" <spamspam@spam. eggswrote in message
>>>news:slrng57 0l8.2lb.spamspa m@bowser.mariow orld...
>>>>On 2008-06-14, rhino <No.offline.con tact.please@ano nymous.comwrote :
>>>
>>>>>[re: http://westown.qqqq.ca/2000a.html]

[...]

>One step forward, one step back. Or thereabouts.
>>
>IE7, FF2, and Opera now all behave identically - but not quite right. And
>IE6 is badly broken.
>>
>In the HTML, the only tabs which take you to a "real" newsletter are
>Jan-Feb
>2000, May-Jun 2000, Jan 2004, and Jun 2004. All the other tabs take you
>to
>"nopagea.html" , which is effectively an "under-construction" page.
>>
>For IE7, FF2, and Opera, everything is fine for the year 2000 and also
>for
>the years where all the issues are under construction. But when you
>choose
>2004, you see that the issues tabs are indented to begin at the same
>point
>as the 2004 tab rather than left to start at the 2000 tab. Re-reading
>your
>fourth suggestion, that appears to be what you want

>
Sort of. I hadn't thought of what would happen with the other tabs. I
see what you mean, of course they all want to start at the left.
>

>but I'd prefer to leave the issues tab so that it always begins at the
>same point as the 2000 tab. How do I do that?

>
Make the ul the container instead.
>
1. Make ul#topnav position: relative.
2. Remove position: relative from everything else.
3. Also give ul#topnav 1px of top padding. This is to prevent margins
collapsing.
>
The sub-menus should now all start in the same place over to the left.
>

Things are more messed up now, not less. Have a look....

>IE6 is so badly broken with this CSS that I don't know where to begin
>with
>sorting it out.

>
Did the original version, which didn't work in Opera, work in IE6?

The original version worked perfectly in IE7, IE6 and Firefox. Only Opera
had a problem and that problem was only that the issues tabs was at the top
of the page, rather than under the years tabs where I wanted it.

Frankly, Opera is more a "nice-to-have" than an essential for me so I'm
starting to think I'll go back to the version that I originally posted about
and live with the ugliness in Opera. Chances are that little of my audience
will be affected anyway.

>

>Am I asking too much in trying to get this to work in all 4 of the
>browsers
>I want to support?

>
It's quite lucky that it seems to be working in IE7. I don't know the
quirks and deficiencies of IE6 so I don't know what you can do there.
>
The obvious compromise is to allow yourself to change the HTML a bit. If
the subnavs weren't nested inside the li's they're the submenus of it
would be easier I think.
>
Nesting them like that is a sort of meaningful structure in HTML, but it
makes it a lot harder to style.

That's a semantic compromise in the HTML that I'm not crazy about but I'll
consider it for a few days.

The other option, of course, is that I can use the GIF-less version of the
two-tiered tabs, found at http://westown.qqqq.ca/2000.html, which works
perfectly in all four browsers.

--
Rhino

[Ben C]

Re: Need help finding CSS bug in Opera

On 2008-06-16, rhino <No.offline.con tact.please@ano nymous.comwrote :

>
"Ben C" <spamspam@spam. eggswrote in message

[...]

>Make the ul the container instead.
>>
>1. Make ul#topnav position: relative.
>2. Remove position: relative from everything else.
>3. Also give ul#topnav 1px of top padding. This is to prevent margins
> collapsing.
>>
>The sub-menus should now all start in the same place over to the left.
>>

Things are more messed up now, not less. Have a look....

It looks like you've removed position: absolute from #topnav
ul#subnav-2000, #topnav ul#subnav-2004. Put it back.

[...]

>Did the original version, which didn't work in Opera, work in IE6?

>
The original version worked perfectly in IE7, IE6 and Firefox. Only Opera
had a problem and that problem was only that the issues tabs was at the top
of the page, rather than under the years tabs where I wanted it.
>
Frankly, Opera is more a "nice-to-have" than an essential for me so I'm
starting to think I'll go back to the version that I originally posted about
and live with the ugliness in Opera. Chances are that little of my audience
will be affected anyway.

And Opera might fix it anyway, although it's not strictly a bug.