Need help finding CSS bug in Opera
in [CSS]
|
From: Ben C on 14 Jun 2008 04:34 On 2008-06-14, rhino <No.offline.contact.please(a)anonymous.com> wrote: > 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.
From: rhino on 14 Jun 2008 10:54 "Ben C" <spamspam(a)spam.eggs> wrote in message news:slrng570l8.2lb.spamspam(a)bowser.marioworld... > On 2008-06-14, rhino <No.offline.contact.please(a)anonymous.com> wrote: >> 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. -- Rhino
From: dorayme on 14 Jun 2008 19:50 In article <g30m24$iqb$1(a)news.datemas.de>, "rhino" <No.offline.contact.please(a)anonymous.com> wrote: > > "Ben C" <spamspam(a)spam.eggs> wrote in message > news:slrng570l8.2lb.spamspam(a)bowser.marioworld... > > On 2008-06-14, rhino <No.offline.contact.please(a)anonymous.com> wrote: > >> 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
From: rhino on 14 Jun 2008 23:16 "dorayme" <doraymeRidThis(a)optusnet.com.au> wrote in message news:doraymeRidThis-AC06CE.09500715062008(a)news-vip.optusnet.com.au... > In article <g30m24$iqb$1(a)news.datemas.de>, > "rhino" <No.offline.contact.please(a)anonymous.com> wrote: > >> >> "Ben C" <spamspam(a)spam.eggs> wrote in message >> news:slrng570l8.2lb.spamspam(a)bowser.marioworld... >> > On 2008-06-14, rhino <No.offline.contact.please(a)anonymous.com> wrote: >> >> 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
From: dorayme on 15 Jun 2008 02:05
In article <g321hu$ovr$1(a)news.datemas.de>, "rhino" <No.offline.contact.please(a)anonymous.com> wrote: > "dorayme" <doraymeRidThis(a)optusnet.com.au> wrote in message > news:doraymeRidThis-AC06CE.09500715062008(a)news-vip.optusnet.com.au... > > In article <g30m24$iqb$1(a)news.datemas.de>, > > "rhino" <No.offline.contact.please(a)anonymous.com> wrote: > > > >> > >> "Ben C" <spamspam(a)spam.eggs> wrote in message > >> news:slrng570l8.2lb.spamspam(a)bowser.marioworld... > >> > On 2008-06-14, rhino <No.offline.contact.please(a)anonymous.com> wrote: > >> >> 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 |