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 15  1942 
On 2008-06-14, rhino <No***********************@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.
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.
"Ben C" <sp******@spam.eggswrote in message
news:sl*********************@bowser.marioworld...
On 2008-06-14, rhino <No***********************@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.
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
In article <g3**********@news.datemas.de>,
"rhino" <No***********************@anonymous.comwrote:
>
"Ben C" <sp******@spam.eggswrote in message
news:sl*********************@bowser.marioworld...
On 2008-06-14, rhino <No***********************@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.
...
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
"dorayme" <do************@optusnet.com.auwrote in message
news:do**********************************@news-vip.optusnet.com.au...
In article <g3**********@news.datemas.de>,
"rhino" <No***********************@anonymous.comwrote:
>>
"Ben C" <sp******@spam.eggswrote in message
news:sl*********************@bowser.marioworld. ..
On 2008-06-14, rhino <No***********************@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.
...
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
In article <g3**********@news.datemas.de>,
"rhino" <No***********************@anonymous.comwrote:
"dorayme" <do************@optusnet.com.auwrote in message
news:do**********************************@news-vip.optusnet.com.au...
In article <g3**********@news.datemas.de>,
"rhino" <No***********************@anonymous.comwrote:
>
"Ben C" <sp******@spam.eggswrote in message
news:sl*********************@bowser.marioworld...
On 2008-06-14, rhino <No***********************@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.
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
On 2008-06-14, rhino <No***********************@anonymous.comwrote:
>
"Ben C" <sp******@spam.eggswrote in message
news:sl*********************@bowser.marioworld...
>On 2008-06-14, rhino <No***********************@anonymous.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.
>
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
"Ben C" <sp******@spam.eggswrote in message
news:sl*********************@bowser.marioworld...
On 2008-06-14, rhino <No***********************@anonymous.comwrote:
>>
"Ben C" <sp******@spam.eggswrote in message
news:sl*********************@bowser.marioworld. ..
>>On 2008-06-14, rhino <No***********************@anonymous.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.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
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
On 2008-06-15, rhino <No***********************@anonymous.comwrote:
>
"Ben C" <sp******@spam.eggswrote in message
news:sl*********************@bowser.marioworld...
>On 2008-06-14, rhino <No***********************@anonymous.comwrote:
>>>
"Ben C" <sp******@spam.eggswrote in message
news:sl*********************@bowser.marioworld.. .
On 2008-06-14, rhino <No***********************@anonymous.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.
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.
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
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
"Ben C" <sp******@spam.eggswrote in message
news:sl*********************@bowser.marioworld...
On 2008-06-15, rhino <No***********************@anonymous.comwrote:
>>
"Ben C" <sp******@spam.eggswrote in message
news:sl*********************@bowser.marioworld. ..
>>On 2008-06-14, rhino <No***********************@anonymous.comwrote:
"Ben C" <sp******@spam.eggswrote in message
news:sl*********************@bowser.marioworld. ..
On 2008-06-14, rhino <No***********************@anonymous.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
On 2008-06-16, rhino <No***********************@anonymous.comwrote:
>
"Ben C" <sp******@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.
"Ben C" <sp******@spam.eggswrote in message
news:sl*********************@bowser.marioworld...
On 2008-06-16, rhino <No***********************@anonymous.comwrote:
>>
"Ben C" <sp******@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.
Sorry for the delay in getting back here. I re-added the position: absolute
as per your suggestion and now the prototype works perfectly in IE7, Opera,
and FF. It's still messed up in IE6.
[...]
>>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.
I have a decision to make:
1. Keep the original version which works fine in IE6, IE7, and FF but breaks
in Opera.
2. Keep the current version which works fine in IE7, FF, and Opera but
breaks in IE6.
3. Go back to the drawing board and try to find something that works in all
4.
I'm leaning towards the 3rd option but won't have time for that for a bit
yet.
Thanks for all your suggestions.
--
Rhino This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: Rune Steffensen |
last post by:
I've been lurking c.l.p for a while now, and find the amount of messages
a bit annoying. To solve this, I suggest the creation of the new group
"comp.lang.pyhon.discussions".
So when people post...
|
by: Spijon |
last post by:
Seems opera can not work normally with javascript, does anyone knows how to fix it?
Thanks in advance.
|
by: TheMartian |
last post by:
Opera is driving me nuts, I am trying to get it to actually render a
table the full width of the browser window
sounds easy, but no, Opera and only Opera leaves a 16px margin on the
right edge
...
|
by: Ken Kast |
last post by:
I have a frameset page with the following code snippets:
..
..
..
<script type="text/javascript">
<!--
var bannerFrame;
function load () {
var bannerDoc = bannerFrame.document;
|
by: Kai-Mikael Jää-Aro |
last post by:
AIUI, there are no global style defaults for HTML tags, i e the W3C
does not enforce that e g an <H1> should have a specific type-face,
size, and so on, but rather this is decided by the browser. ...
|
by: U S Contractors Offering Service A Non-profit |
last post by:
Brilliant technology helping those most in need Inbox
Reply
U S Contractors Offering Service A Non-profit
show details
10:37 pm (1 hour ago)
Brilliant technology helping those most in need ...
|
by: Christopher Nelson |
last post by:
I've been developing a little web page full of JavaScript while using
Firefox and it works well but when I try to view it in Opera and IE,
it's incomplete. I suspect cross-browser issues in the...
|
by: lolly |
last post by:
hi i recently used a virtual keyboard from www.codeproject.com/jscript/jvk.asp.
However this part of the code
function keyb_callback(ch)
{
var text =...
|
by: Faith0G |
last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome former...
|
by: taylorcarr |
last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
|
by: ryjfgjl |
last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
|
by: ryjfgjl |
last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
| |
