 | |
Need help finding CSS bug in Opera
Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)
 |
| | Thread Tools | Display Modes |
#1
 
| |||
| |||
|
Need help finding CSS bug in Opera -
06-14-2008
, 12:22 AM
#2
| |||
| |||
|
|
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? |
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.
#3
| |||
| |||
|
|
On 2008-06-14, rhino <No.offline.contact.please (AT) anonymous (DOT) 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. |
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
#4
| |||
| |||
|
|
"Ben C" <spamspam (AT) spam (DOT) eggs> wrote in message news:slrng570l8.2lb.spamspam (AT) bowser (DOT) marioworld... On 2008-06-14, rhino <No.offline.contact.please (AT) anonymous (DOT) 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. |
<http://tvrs.org.au/disability/children.html>
Might give you an idea for a different approach?
--
dorayme
#5
| |||
| |||
|
|
In article <g30m24$iqb$1 (AT) news (DOT) datemas.de>, "rhino" <No.offline.contact.please (AT) anonymous (DOT) com> wrote: "Ben C" <spamspam (AT) spam (DOT) eggs> wrote in message news:slrng570l8.2lb.spamspam (AT) bowser (DOT) marioworld... On 2008-06-14, rhino <No.offline.contact.please (AT) anonymous (DOT) 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 |
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
#6
| |||
| |||
|
|
"dorayme" <doraymeRidThis (AT) optusnet (DOT) com.au> wrote in message news:doraymeRidThis-AC06CE.09500715062008 (AT) news-vip (DOT) optusnet.com.au... In article <g30m24$iqb$1 (AT) news (DOT) datemas.de>, "rhino" <No.offline.contact.please (AT) anonymous (DOT) com> wrote: "Ben C" <spamspam (AT) spam (DOT) eggs> wrote in message news:slrng570l8.2lb.spamspam (AT) bowser (DOT) marioworld... On 2008-06-14, rhino <No.offline.contact.please (AT) anonymous (DOT) 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
#7
| |||
| |||
|
|
"Ben C" <spamspam (AT) spam (DOT) eggs> wrote in message news:slrng570l8.2lb.spamspam (AT) bowser (DOT) marioworld... On 2008-06-14, rhino <No.offline.contact.please (AT) anonymous (DOT) com> wrote: [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. |
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.
#8
| |||
| |||
|
|
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 |
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
#9
| |||
| |||
|
|
On 2008-06-14, rhino <No.offline.contact.please (AT) anonymous (DOT) com> wrote: "Ben C" <spamspam (AT) spam (DOT) eggs> wrote in message news:slrng570l8.2lb.spamspam (AT) bowser (DOT) marioworld... On 2008-06-14, rhino <No.offline.contact.please (AT) anonymous (DOT) com> wrote: [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. |
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 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
#10
| ||||
| ||||
|
|
"Ben C" <spamspam (AT) spam (DOT) eggs> wrote in message news:slrng59ufg.681.spamspam (AT) bowser (DOT) marioworld... On 2008-06-14, rhino <No.offline.contact.please (AT) anonymous (DOT) com> wrote: "Ben C" <spamspam (AT) spam (DOT) eggs> wrote in message news:slrng570l8.2lb.spamspam (AT) bowser (DOT) marioworld... On 2008-06-14, rhino <No.offline.contact.please (AT) anonymous (DOT) com> wrote: [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 |
see what you mean, of course they all want to start at the left.
Quote:
|
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? |
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.
Quote:
|
IE6 is so badly broken with this CSS that I don't know where to begin with sorting it out. |
Quote:
|
Am I asking too much in trying to get this to work in all 4 of the browsers I want to support? |
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.
|
« Previous Thread
|
Next Thread »
| Thread Tools | |
| Display Modes | |
Linear Mode
| |
Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.
Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.