Need help finding CSS bug in Opera

Originally Posted by

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?

Originally Posted by

On 2008-06-14, rhino <No.offline.contact.please@anonymous.comwrote:

Quote: Originally Posted by >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.

Originally Posted by

>
"Ben C" <spamspam@spam.eggswrote in message
news:slrng570l8.2lb.spamspam@bowser.marioworld...

Quote: Originally Posted by On 2008-06-14, rhino <No.offline.contact.please@anonymous.comwrote: Quote: Originally Posted by 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.

>...

Quote: Originally Posted by 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.

Originally Posted by

In article <g30m24$iqb$1@news.datemas.de>,
"rhino" <No.offline.contact.please@anonymous.comwrote:
>

Quote: Originally Posted by >> >"Ben C" <spamspam@spam.eggswrote in message >news:slrng570l8.2lb.spamspam@bowser.marioworld... Quote: Originally Posted by On 2008-06-14, rhino <No.offline.contact.please@anonymous.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. > >>... Quote: Originally Posted by 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?
>

Originally Posted by

"dorayme" <doraymeRidThis@optusnet.com.auwrote in message
news:doraymeRidThis-AC06CE.09500715062008@news-vip.optusnet.com.au...

Quote: Originally Posted by In article <g30m24$iqb$1@news.datemas.de>, "rhino" <No.offline.contact.please@anonymous.comwrote: Quote: Originally Posted by > "Ben C" <spamspam@spam.eggswrote in message news:slrng570l8.2lb.spamspam@bowser.marioworld... On 2008-06-14, rhino <No.offline.contact.please@anonymous.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.

Originally Posted by

Quote: Originally Posted by Quote: Originally Posted by 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.
>

Originally Posted by

>
"Ben C" <spamspam@spam.eggswrote in message
news:slrng570l8.2lb.spamspam@bowser.marioworld...

Quote: Originally Posted by >On 2008-06-14, rhino <No.offline.contact.please@anonymous.comwrote:

Originally Posted by

Quote: Originally Posted by Quote: Originally Posted by >>[re: http://westown.qqqq.ca/2000a.html]

Originally Posted by

Quote: Originally Posted by Quote: Originally Posted by >>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.

Originally Posted by

>
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

Originally Posted by

On 2008-06-14, rhino <No.offline.contact.please@anonymous.comwrote:

Quote: Originally Posted by >> >"Ben C" <spamspam@spam.eggswrote in message >news:slrng570l8.2lb.spamspam@bowser.marioworld... Quote: Originally Posted by >>On 2008-06-14, rhino <No.offline.contact.please@anonymous.comwrote:

>

Quote: Originally Posted by Quote: Originally Posted by >>>[re: http://westown.qqqq.ca/2000a.html]

>

Quote: Originally Posted by Quote: Originally Posted by >>>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.

Originally Posted by

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.

Originally Posted by

>
"Ben C" <spamspam@spam.eggswrote in message
news:slrng59ufg.681.spamspam@bowser.marioworld...

Quote: Originally Posted by >On 2008-06-14, rhino <No.offline.contact.please@anonymous.comwrote: Quote: Originally Posted by >>> >>"Ben C" <spamspam@spam.eggswrote in message >>news:slrng570l8.2lb.spamspam@bowser.marioworld... >>>On 2008-06-14, rhino <No.offline.contact.please@anonymous.comwrote: >> Quote: Originally Posted by >>>>[re: http://westown.qqqq.ca/2000a.html]

Originally Posted by

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

Originally Posted by

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?

Originally Posted by

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

Originally Posted by

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

Originally Posted by

Candoer wrote:
>

Quote: Originally Posted by >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...

Originally Posted by

Beauregard T. Shagnasty wrote:

Quote: Originally Posted by >Candoer wrote: Quote: Originally Posted by >>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. ;)

Originally Posted by

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

Originally Posted by

On 2008-06-15, rhino <No.offline.contact.please@anonymous.comwrote:

Quote: Originally Posted by >> >"Ben C" <spamspam@spam.eggswrote in message >news:slrng59ufg.681.spamspam@bowser.marioworld... Quote: Originally Posted by >>On 2008-06-14, rhino <No.offline.contact.please@anonymous.comwrote: >>>> >>>"Ben C" <spamspam@spam.eggswrote in message >>>news:slrng570l8.2lb.spamspam@bowser.marioworld... >>>>On 2008-06-14, rhino <No.offline.contact.please@anonymous.comwrote: >>> >>>>>[re: http://westown.qqqq.ca/2000a.html]

[...]

Quote: Originally Posted by >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.
>

Quote: Originally Posted by >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.
>

Originally Posted by

Quote: Originally Posted by >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?

Originally Posted by

>

Quote: Originally Posted by >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.

Originally Posted by

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

Originally Posted by

Quote: Originally Posted by >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....

Originally Posted by

Quote: Originally Posted by >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.

Originally Posted by

On 2008-06-16, rhino <No.offline.contact.please@anonymous.comwrote:

Quote: Originally Posted by >> >"Ben C" <spamspam@spam.eggswrote in message

[...]

Quote: Originally Posted by Quote: Originally Posted by >>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.
>

Originally Posted by

[...]

Quote: Originally Posted by Quote: Originally Posted by >>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.