[css-d] position: absolute; width: 100%, IE width not 100%

2005-12-20 Thread Paul Walker 
I have unordered list that is absolutely positioned within another unordered 
list.  The display is defined to block and the width is set to 100%, but in IE 
the width is not quite reaching 100%.  It works fine in Firefox and I have not 
tested in other browsers.

The example file can be seen here.
http://www.paulwalker.tv/tabs.htm

I welcome any other general comments regarding my markup and css.  

Thanks,
~PJ
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] position: absolute; width: 100%, IE width not 100%

2005-12-23 Thread Ingo Chao 
Paul Walker wrote:
> I have unordered list that is absolutely positioned within another unordered 
> list.  The display is defined to block and the width is set to 100%, but in 
> IE the width is not quite reaching 100%.  It works fine in Firefox and I have 
> not tested in other browsers.
> 
> The example file can be seen here.
> http://www.paulwalker.tv/tabs.htm
> 
> I welcome any other general comments regarding my markup and css.  


I cannot provide a solution within your design, but I'll try to explain 
why not, if its of interest.

See this example
http://www.satzansatz.de/cssd/tmp/apboxpercentagewidth.html

In IE, the red a.p. child is offset with reference to its ancestor, but 
its width is calculated with respect to its parent.
That's wrong according to CSS2.1. Compare in Fx to see.

That is what we've mentioned in
http://www.satzansatz.de/cssd/onhavinglayout.html#cb
The a.p. element is offset with respect to its nearest layout positioned
ancestor, but the percentage dimension relates to the next layout
ancestor.

Transferred to your example, the #menu .selected ul is absolutely
positioned and offsets with respect to body, but its width is calculated
on the basis of #menu li, because this li is floated (give this li a
width of 200px to see).

Now IE tries to calculate the 100% width of the second level ul with 
respect to the width of this li. But li.selected has no given width, so 
IE determines the maximum width available from its origin to the edge of 
the viewport.

Apply position:relative to this li.selected to see: the a.p. second 
level ul will start from this origin and the width will perfectly fit 
the remaining space.

So, basically your design requires the li  to be floated, but this float 
triggers inevitably haslayout, therefore, its a.p. child will calculate 
its 100% width with respect to it.

Hope someone else has a solution.

Ingo

-- 
http://www.satzansatz.de/css.html


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] position: absolute; width: 100%, IE width not 100%

2005-12-26 Thread francky 
Ingo Chao wrote:

>Paul Walker wrote:
>  
>
>>I have unordered list that is absolutely positioned within another unordered 
>>list.  The display is defined to block and the width is set to 100%, but in 
>>IE the width is not quite reaching 100%.  It works fine in Firefox and I have 
>>not tested in other browsers.
>>
>>The example file can be seen here.
>>http://www.paulwalker.tv/tabs.htm
>>
>>I welcome any other general comments regarding my markup and css.  
>>
>>
>
>
>I cannot provide a solution within your design, but I'll try to explain 
>why not, if its of interest.
>
>See this example
>http://www.satzansatz.de/cssd/tmp/apboxpercentagewidth.html
>
>In IE, the red a.p. child is offset with reference to its ancestor, but 
>its width is calculated with respect to its parent.
>That's wrong according to CSS2.1. Compare in Fx to see.
>
>That is what we've mentioned in
>http://www.satzansatz.de/cssd/onhavinglayout.html#cb
>The a.p. element is offset with respect to its nearest layout positioned
>ancestor, but the percentage dimension relates to the next layout
>ancestor.
>
>Transferred to your example, the #menu .selected ul is absolutely
>positioned and offsets with respect to body, but its width is calculated
>on the basis of #menu li, because this li is floated (give this li a
>width of 200px to see).
>
>Now IE tries to calculate the 100% width of the second level ul with 
>respect to the width of this li. But li.selected has no given width, so 
>IE determines the maximum width available from its origin to the edge of 
>the viewport.
>
>Apply position:relative to this li.selected to see: the a.p. second 
>level ul will start from this origin and the width will perfectly fit 
>the remaining space.
>
>So, basically your design requires the li  to be floated, but this float 
>triggers inevitably haslayout, therefore, its a.p. child will calculate 
>its 100% width with respect to it.
>
>Hope someone else has a solution.
>
>Ingo
>
>  
>
Ingo Chao wrote:

>Paul Walker wrote:
>  
>
>>I have unordered list that is absolutely positioned within another unordered 
>>list.  The display is defined to block and the width is set to 100%, but in 
>>IE the width is not quite reaching 100%.  It works fine in Firefox and I have 
>>not tested in other browsers.
>>
>>The example file can be seen here.
>>http://www.paulwalker.tv/tabs.htm
>>
>>I welcome any other general comments regarding my markup and css.  
>>
>>
>
>
>I cannot provide a solution within your design, but I'll try to explain 
>why not, if its of interest.
>
>See this example
>http://www.satzansatz.de/cssd/tmp/apboxpercentagewidth.html
>
>In IE, the red a.p. child is offset with reference to its ancestor, but 
>its width is calculated with respect to its parent.
>That's wrong according to CSS2.1. Compare in Fx to see.
>
>That is what we've mentioned in
>http://www.satzansatz.de/cssd/onhavinglayout.html#cb
>The a.p. element is offset with respect to its nearest layout positioned
>ancestor, but the percentage dimension relates to the next layout
>ancestor.
>
>Transferred to your example, the #menu .selected ul is absolutely
>positioned and offsets with respect to body, but its width is calculated
>on the basis of #menu li, because this li is floated (give this li a
>width of 200px to see).
>
>Now IE tries to calculate the 100% width of the second level ul with 
>respect to the width of this li. But li.selected has no given width, so 
>IE determines the maximum width available from its origin to the edge of 
>the viewport.
>
>Apply position:relative to this li.selected to see: the a.p. second 
>level ul will start from this origin and the width will perfectly fit 
>the remaining space.
>
>So, basically your design requires the li  to be floated, but this float 
>triggers inevitably haslayout, therefore, its a.p. child will calculate 
>its 100% width with respect to it.
>
>Hope someone else has a solution.
>
>Ingo
>
>  
>
I remarked some other things in http://www.paulwalker.tv/tabs.htm: in FF 
there is a scrollbar left-right at the bottom (about 5px scrollable, but 
nevertheless), in Opera the submenu-items stay vertical, and (in all 
browsers) things go wrong when trying to enlarge the fontsize 
(clientside). The last because of the fixed format of the bg-image.

So I tried to build it up from scratch, to see where the ship would go 
down; with one of the Suckerfishes as a save harbour to start (omitting 
the vertical sublisting when hovering - in the same time no 
sf-javascript for hovering in IE needed).
With trial and error (not so good in the theory ;-), I found that it has 
also to do with the doctype: in FF in some doctypes you cannot (anyway: 
I couldn't) get rid of the margin between an omitted list-img and the 
starting of the text (at list-style-type: none).
The problem is to get the whole thing liquid and getting the subitems 
horizontal as well. In Firefox I had it working, but I didn't succeed in 
IE and Opera.

Then I decided to separate the

Re: [css-d] position: absolute; width: 100%, IE width not 100%

2005-12-27 Thread francky 
Hallo Paul,
This was my response to your first question about the same topic; posted 
in Holland on Mon Dec 26 02:07:04 CST 2005 (time notation in my 
send-box: Mon, 26 Dec 2005 09:07:04 +0100).

I tried to forward it to you (only) on Tue, 27 Dec 2005 05:39:35 +0100.

It seems it did not reach you in the one or other way.
My suggestion was to start a whole new , illustrated with working 
test page for IE, FF and Opera.

Hope you can use my remarks & alternative. Or do you think it's not good 
enough for your purpose?

francky

>
 >Tue Dec 20 20:26:15 CST 2005
 >Paul Walker wrote:
>  
>I have unordered list that is absolutely positioned within another 
 >unordered list. The display is defined to block and the width is
 >set to 100%, but in IE the width is not quite reaching 100%.
 >It works fine in Firefox and I have not tested in other browsers.
>>
>>The example file can be seen here.
>>http://www.paulwalker.tv/tabs.htm
>>
>>I welcome any other general comments regarding my markup and css.  

I remarked some other things in http://www.paulwalker.tv/tabs.htm: in FF
there is a scrollbar left-right at the bottom (about 5px scrollable, but
nevertheless), in Opera the submenu-items stay vertical, and (in all
browsers) things go wrong when trying to enlarge the fontsize
(clientside). The last because of the fixed format of the bg-image.

So I tried to build it up from scratch, to see where the ship would go
down; with one of the Suckerfishes as a save harbour to start (omitting
the vertical sublisting when hovering - in the same time no
sf-javascript for hovering in IE needed).

With trial and error (not so good in the theory ;-), I found that it has
also to do with the doctype: in FF in some doctypes you cannot (anyway:
I couldn't) get rid of the margin between an omitted list-img and the
starting of the text (at list-style-type: none).
The problem is to get the whole thing liquid and getting the subitems
horizontal as well. In Firefox I had it working, but I didn't succeed in
IE and Opera.

Then I decided to separate the subitems within the 's of the items.
I made separate 's for all the subitems. This way the subitems can
be made horizontally again in IE and Opera. Not for the css beauty
top-100, but as long as you have static pages (and don't need a show of
the subitems by hovering the items), it doesn't matter for the effect on
screen.

 * That can be a problem for no-style readers: the submenu-items show
   on the same level as the menu-items, without any correspondency.
   But with some extra  skip-/go to-links (with margin-left -px
   hided for normal seeing) I think this problem can be reduced.

Well, in the end I got a "working draft" (a bit "nightly build" too ;-),
without using position:absolute:

http://home.tiscali.nl/developerscorner/css-discuss/paulwalker-francky.htm

Perhaps this is something in the good direction, I hope you can use it
for further development.

franky

ps: last times I could not reach the original anymore; happily I did not
empty my cache !
Cannot send to Paul Walker  at the moment: server 
down?
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] position: absolute; width: 100%, IE width not 100%

2005-12-28 Thread Allison Bloodworth 
Hi Franky, 

I was trying to do something similar to what you were, and was watching this
thread for a solution to the IE using the wrong width problem. I got
everything working in FF & Opera without having to change the nesting of the
lists (thus, keeping it more accessible):
http://mms.media.berkeley.edu:8901/UCBCNUsabilityMockups/Gateway/New/sports-
ucb-nested.htm. Thought I'd post it in case it was helpful to you.

However, I was never able to get the proper width in IE...I'd love to hear
any ideas anyone has on that!

Thanks,
Allison 

-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of francky
Sent: Monday, December 26, 2005 12:07 AM
To: Ingo Chao
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] position: absolute; width: 100%, IE width not 100%

Ingo Chao wrote:

>Paul Walker wrote:
>  
>
>>I have unordered list that is absolutely positioned within another
unordered list.  The display is defined to block and the width is set to
100%, but in IE the width is not quite reaching 100%.  It works fine in
Firefox and I have not tested in other browsers.
>>
>>The example file can be seen here.
>>http://www.paulwalker.tv/tabs.htm
>>
>>I welcome any other general comments regarding my markup and css.  
>>
>>
>
>
>I cannot provide a solution within your design, but I'll try to explain 
>why not, if its of interest.
>
>See this example
>http://www.satzansatz.de/cssd/tmp/apboxpercentagewidth.html
>
>In IE, the red a.p. child is offset with reference to its ancestor, but 
>its width is calculated with respect to its parent.
>That's wrong according to CSS2.1. Compare in Fx to see.
>
>That is what we've mentioned in
>http://www.satzansatz.de/cssd/onhavinglayout.html#cb
>The a.p. element is offset with respect to its nearest layout positioned
>ancestor, but the percentage dimension relates to the next layout
>ancestor.
>
>Transferred to your example, the #menu .selected ul is absolutely
>positioned and offsets with respect to body, but its width is calculated
>on the basis of #menu li, because this li is floated (give this li a
>width of 200px to see).
>
>Now IE tries to calculate the 100% width of the second level ul with 
>respect to the width of this li. But li.selected has no given width, so 
>IE determines the maximum width available from its origin to the edge of 
>the viewport.
>
>Apply position:relative to this li.selected to see: the a.p. second 
>level ul will start from this origin and the width will perfectly fit 
>the remaining space.
>
>So, basically your design requires the li  to be floated, but this float 
>triggers inevitably haslayout, therefore, its a.p. child will calculate 
>its 100% width with respect to it.
>
>Hope someone else has a solution.
>
>Ingo
>
>  
>
Ingo Chao wrote:

>Paul Walker wrote:
>  
>
>>I have unordered list that is absolutely positioned within another
unordered list.  The display is defined to block and the width is set to
100%, but in IE the width is not quite reaching 100%.  It works fine in
Firefox and I have not tested in other browsers.
>>
>>The example file can be seen here.
>>http://www.paulwalker.tv/tabs.htm
>>
>>I welcome any other general comments regarding my markup and css.  
>>
>>
>
>
>I cannot provide a solution within your design, but I'll try to explain 
>why not, if its of interest.
>
>See this example
>http://www.satzansatz.de/cssd/tmp/apboxpercentagewidth.html
>
>In IE, the red a.p. child is offset with reference to its ancestor, but 
>its width is calculated with respect to its parent.
>That's wrong according to CSS2.1. Compare in Fx to see.
>
>That is what we've mentioned in
>http://www.satzansatz.de/cssd/onhavinglayout.html#cb
>The a.p. element is offset with respect to its nearest layout positioned
>ancestor, but the percentage dimension relates to the next layout
>ancestor.
>
>Transferred to your example, the #menu .selected ul is absolutely
>positioned and offsets with respect to body, but its width is calculated
>on the basis of #menu li, because this li is floated (give this li a
>width of 200px to see).
>
>Now IE tries to calculate the 100% width of the second level ul with 
>respect to the width of this li. But li.selected has no given width, so 
>IE determines the maximum width available from its origin to the edge of 
>the viewport.
>
>Apply position:relative to this li.selected to see: the a.p. second 
>level ul will start from this origin and the width will perfectly fit 
>the remaining space.
>
>So, basically your design requires the li  to be floated, but this float 
>triggers inevitably haslayout, therefore,

Re: [css-d] position: absolute; width: 100%, IE width not 100%

2005-12-28 Thread {tonyFelice} 
Allison - 404 for me.

The original problem posted by Paul yesterday, used this example:
http://www.paulwalker.tv/tabs.htm 
which is now fixed.  It originally showed the background for the subnav
(white with black lower border) not filling the screen to 100%

My final response follows:

#menu ul {
list-style-type: none;
float: none; display: none;
margin: 0; padding: 5px 92px 5px 10px; 
background-image: none; 
background-color: #fff; 
border: none; border-bottom: solid 1px #000;
}
Fixes the provided example perfectly. (which showed the second tab active)

But, although the right padding was 92px and could be affected by modifying
the inherited padding, that wasn't the real source.  Anybody want to season
a guess as to what else in this page is 92px? The left of the active tab.

So, because these are nested the way they are, applying the 'selected' class
to any of the subsequent subnavs, as would be the case in production, the
amount of right padding on the subnav is equal to the left of the active
tab.

I can tell that some brain-bending went into this layout, so maybe an
appropriate IE fix would be to handle the subnav background and lower border
in a completely separate block, impervious to these idiosyncracies.

hth
Tony

-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Allison Bloodworth
Sent: Wednesday, December 28, 2005 10:07 AM
To: [EMAIL PROTECTED]; 'Ingo Chao'
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] position: absolute; width: 100%, IE width not 100%

Hi Franky, 

I was trying to do something similar to what you were, and was watching this
thread for a solution to the IE using the wrong width problem. I got
everything working in FF & Opera without having to change the nesting of the
lists (thus, keeping it more accessible):
http://mms.media.berkeley.edu:8901/UCBCNUsabilityMockups/Gateway/New/sports-
ucb-nested.htm. Thought I'd post it in case it was helpful to you.

However, I was never able to get the proper width in IE...I'd love to hear
any ideas anyone has on that!

Thanks,
Allison 

-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of francky
Sent: Monday, December 26, 2005 12:07 AM
To: Ingo Chao
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] position: absolute; width: 100%, IE width not 100%

Ingo Chao wrote:

>Paul Walker wrote:
>  
>
>>I have unordered list that is absolutely positioned within another
unordered list.  The display is defined to block and the width is set to
100%, but in IE the width is not quite reaching 100%.  It works fine in
Firefox and I have not tested in other browsers.
>>
>>The example file can be seen here.
>>http://www.paulwalker.tv/tabs.htm
>>
>>I welcome any other general comments regarding my markup and css.  
>>
>>
>
>
>I cannot provide a solution within your design, but I'll try to explain 
>why not, if its of interest.
>
>See this example
>http://www.satzansatz.de/cssd/tmp/apboxpercentagewidth.html
>
>In IE, the red a.p. child is offset with reference to its ancestor, but 
>its width is calculated with respect to its parent.
>That's wrong according to CSS2.1. Compare in Fx to see.
>
>That is what we've mentioned in
>http://www.satzansatz.de/cssd/onhavinglayout.html#cb
>The a.p. element is offset with respect to its nearest layout positioned
>ancestor, but the percentage dimension relates to the next layout
>ancestor.
>
>Transferred to your example, the #menu .selected ul is absolutely
>positioned and offsets with respect to body, but its width is calculated
>on the basis of #menu li, because this li is floated (give this li a
>width of 200px to see).
>
>Now IE tries to calculate the 100% width of the second level ul with 
>respect to the width of this li. But li.selected has no given width, so 
>IE determines the maximum width available from its origin to the edge of 
>the viewport.
>
>Apply position:relative to this li.selected to see: the a.p. second 
>level ul will start from this origin and the width will perfectly fit 
>the remaining space.
>
>So, basically your design requires the li  to be floated, but this float 
>triggers inevitably haslayout, therefore, its a.p. child will calculate 
>its 100% width with respect to it.
>
>Hope someone else has a solution.
>
>Ingo
>
>  
>
Ingo Chao wrote:

>Paul Walker wrote:
>  
>
>>I have unordered list that is absolutely positioned within another
unordered list.  The display is defined to block and the width is set to
100%, but in IE the width is not quite reaching 100%.  It works fine in
Firefox and I have not tested in other browsers.
>>
>>The examp

Re: [css-d] position: absolute; width: 100%, IE width not 100%

2005-12-28 Thread Allison Bloodworth 
Yes, I did see your response, Tony. However, I tried putting your fix into
Paul's code and it breaks Firefox 1.5. - there is a horizontal scrollbar and
the top div (containing the tabs) now isn't long enough. Am I missing
something? 

Also as I think you pointed out, hardcoding a 92px right margin for the 
wouldn't work since in production the right margin would be different for
every tab. I guess you could come up with a "selected" class for each tab,
but in my example that would be very complicated because I have three levels
of tabs. I think you might have been putting an ending period (which was
really supposed to end the sentence, but because the long link gets line
broken in some email clients you might have thought was part of the url):

http://mms.media.berkeley.edu:8901/UCBCNUsabilityMockups/Gateway/New/sports-
ucb-nested.htm

-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of {tonyFelice}
Sent: Wednesday, December 28, 2005 9:25 AM
To: 'Allison Bloodworth'
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] position: absolute; width: 100%, IE width not 100%

Allison - 404 for me.

The original problem posted by Paul yesterday, used this example:
http://www.paulwalker.tv/tabs.htm 
which is now fixed.  It originally showed the background for the subnav
(white with black lower border) not filling the screen to 100%

My final response follows:

#menu ul {
list-style-type: none;
float: none; display: none;
margin: 0; padding: 5px 92px 5px 10px; 
background-image: none; 
background-color: #fff; 
border: none; border-bottom: solid 1px #000;
}
Fixes the provided example perfectly. (which showed the second tab active)

But, although the right padding was 92px and could be affected by modifying
the inherited padding, that wasn't the real source.  Anybody want to season
a guess as to what else in this page is 92px? The left of the active tab.

So, because these are nested the way they are, applying the 'selected' class
to any of the subsequent subnavs, as would be the case in production, the
amount of right padding on the subnav is equal to the left of the active
tab.

I can tell that some brain-bending went into this layout, so maybe an
appropriate IE fix would be to handle the subnav background and lower border
in a completely separate block, impervious to these idiosyncracies.

hth
Tony

-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Allison Bloodworth
Sent: Wednesday, December 28, 2005 10:07 AM
To: [EMAIL PROTECTED]; 'Ingo Chao'
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] position: absolute; width: 100%, IE width not 100%

Hi Franky, 

I was trying to do something similar to what you were, and was watching this
thread for a solution to the IE using the wrong width problem. I got
everything working in FF & Opera without having to change the nesting of the
lists (thus, keeping it more accessible):
http://mms.media.berkeley.edu:8901/UCBCNUsabilityMockups/Gateway/New/sports-
ucb-nested.htm. Thought I'd post it in case it was helpful to you.

However, I was never able to get the proper width in IE...I'd love to hear
any ideas anyone has on that!

Thanks,
Allison 


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] position: absolute; width: 100%, IE width not 100%

2005-12-28 Thread francky 
Hi all,

Allison wrote (28-12-05 19:48), resumé:
1> ... Paul's code + Tony's fix breaks FF: horizontal scrollbar to much 
& top  to short.
and before (28-12-05 18:07):
2> ... [berkeley-site:] I got everything working in FF & Opera without 
having to change the nesting of the lists (thus, keeping it more 
accessible).

@1:
When Tony's code is placed in a IE * html-hack, FF will react as before, 
I think.

But for me *the major problems stay*:
- Paul's model doesn't work in Opera! See screenshot 1 
.
- When a visitor likes or needs to enlarge the font in his/her browser, 
the layout is not resistant. See screenshot 2 

 
and screenshot 3 
.

@2:
It happened that the html-validator showed some errors in placing the 
's of the submenu's within the 's of the menu...
I corrected this in a berkely-testpage 
, 
in order to see if I could manage to get Tony's fix to it (and to steal 
the code in order to get Paul's model working in Opera).

But ... only with corrected html, nothing changed: if the 's and 
's are in the correct w3c-way, now Opera goes vertical in the 
Berkely-model (just as in Paul's case)... screenshot 4 
.
 


My conclusion: it is extremely hard (if not impossible) to satisfy IE, 
FF and Opera together in a liquid horizontal nested menu-structure. And 
the next step: what about other browsers?
- I agree with Allison: a working model stays welcome!

As a work-around I fall back to my suggestion to split up the menu in 
equally ranked 's for the (sub)submenus, which have visually the 
same layout and functionality.
In order to get it as accessible as possible, I think that can be 
realised without to much trouble: by making a second 
navigation/menu-structure.
I hope I can concretisize this in a testpage, over a few days.

So long!
francky



__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] position: absolute; width: 100%, IE width not 100%

2005-12-29 Thread Allison Bloodworth 
Hi Franky, 

Thanks much for the great summary, and for your work on this! I actually
didn’t realize I had created invalid markup until you pointed it out. I’m
not entirely sure what you are suggesting for the work-around, but I would
*really* love to see it, or maybe you could give a brief code example of
what you are talking about? 

 

In order to make things as accessible as possible, we’d really need to nest
the menus, so it’s too bad that Opera doesn’t like that. Here is an old
version of our page without the nested menus:
http://www.berkeley.edu/test/calendar-tabs/sports-tabs-1.html This of course
works just fine in Opera, but doesn’t give the context of each menu (e.g.
they can’t tell that the menu that includes “All Intercollegiate Sports” is
a submenu of the Sports menu) to users of screen readers. I recently
discovered that you can download 40 minute versions of JAWS and Window Eyes,
the most popular screen readers out there. They work for 40 minutes each
time you re-boot your computer. It is really enlightening to do testing with
these versions, though it does take a bit of work to get up to speed on
their commands and how to use them properly. Here’s an article on this:
http://www.webaim.org/techniques/articles/screenreader_testing/ 


Thanks!
Allison

 

  _  

From: francky [mailto:[EMAIL PROTECTED] 
Sent: Wednesday, December 28, 2005 6:32 PM
To: Allison Bloodworth
Cc: '{tonyFelice}' <[EMAIL PROTECTED]>; paul walker;
css-d@lists.css-discuss.org
Subject: Re: [css-d] position: absolute; width: 100%, IE width not 100%

 

Hi all,

Allison wrote (28-12-05 19:48), resumé:
1> ... Paul's code + Tony's fix breaks FF: horizontal scrollbar to much &
top  to short.
and before (28-12-05 18:07):
2> ... [berkeley-site:] I got everything working in FF & Opera without
having to change the nesting of the lists (thus, keeping it more
accessible).

@1:
When Tony's code is placed in a IE * html-hack, FF will react as before, I
think.

But for me the major problems stay:
- Paul's model doesn't work in Opera! See screenshot
<http://home.tiscali.nl/developerscorner/css-discuss/images/paulwalker-sshot
-Opera.png>  1.
- When a visitor likes or needs to enlarge the font in his/her browser, the
layout is not resistant. See screenshot
<http://home.tiscali.nl/developerscorner/css-discuss/images/paulwalker-sshot
-FF800x600-2fontsizesSmaller.png>  2 and screenshot
<http://home.tiscali.nl/developerscorner/css-discuss/images/paulwalker-sshot
-FF1280x1024-2fontsizesBigger.png>  3.

@2:
It happened that the html-validator showed some errors in placing the 's
of the submenu's within the 's of the menu...
I corrected this in a
<http://home.tiscali.nl/developerscorner/css-discuss/berkeley-francky.htm>
berkely-testpage, in order to see if I could manage to get Tony's fix to it
(and to steal the code in order to get Paul's model working in Opera).

But ... only with corrected html, nothing changed: if the 's and 's
are in the correct w3c-way, now Opera goes vertical in the Berkely-model
(just as in Paul's case)... screenshot
<http://home.tiscali.nl/developerscorner/css-discuss/images/berkely-valid-in
-Opera.png>  4. 

My conclusion: it is extremely hard (if not impossible) to satisfy IE, FF
and Opera together in a liquid horizontal nested menu-structure. And the
next step: what about other browsers?
- I agree with Allison: a working model stays welcome!

As a work-around I fall back to my suggestion to split up the menu in
equally ranked 's for the (sub)submenus, which have visually the same
layout and functionality.
In order to get it as accessible as possible, I think that can be realised
without to much trouble: by making a second navigation/menu-structure.
I hope I can concretisize this in a testpage, over a few days.

So long!
francky




__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] position: absolute; width: 100%, IE width not 100%

2005-12-31 Thread francky 
@Paul:
You wrote:
 >> "... I have split up the submenu into another div: 
http://www.paulwalker.tv/tabs.htm. Please take a look and offer advice. 
I've only tested on IE and Firefox."

- In general: now it is cross-browser, enlarging-proof and looks fine! 
Some details:
- I tried Opera: functionality allright, but in Opera 7.54 the 
top-background (the horizon-line + white to blue sky) doesn't show up 
(stays white). In the newer Opera 8.01 it's o.k.
- All browsers: hovering causes hopping of the tabs, because of the 
changing normal/bold font-weight. Shoud say: no bold needed, the color 
change of the tab-background and the text must be enough to show there 
has been action of the mouse.

And you wrote:
 >> "Without CSS, the user is presented with a list of the main menu 
items and then individual lists for the submenu items grouped by ul's. I 
can live with that."

- Perhaps you can place some normally invisible line (with: .txtonly { 
margin-left: -px;}) between the ul's of the menu/submenus: "Submenu 
of Browse:", "Submenu of Division:", etc. Then nobody can complain. - 
See also below.


@Allison:
You wrote:
 >> "I recently discovered that you can download 40 minute versions of 
JAWS and Window Eyes ... Here's an article on this: ..."

- Thanks for that!
- I use the Firefox "Menu > Extra", that has the "FANG"-option: which 
immediately gives a screen reader output. Very paedagogic, to notice 
what people hear when they open your webpage! (Don't know if there are 
significant differences with JAWS / Window Eyes).
- This option is built-in when you have the Developers Toolbar in FF.
- (for who are unknown of this:) There exists a special toolbar for easy 
analysing and 1-click checking of lots of aspects of webpages. I don't 
like extra toolbars at all ("never-never-never!"), but this is the 
exception: I can't miss it anymore. - So: everybody already using Chris 
Pederick's marvellous Web Developer Extension for Firefox? If not, I 
should say: get it! Free downloadable at 
http://chrispederick.com/work/webdeveloper/.

And you wrote:
 >> "I'm not entirely sure what you are suggesting for the work-around, 
but I would *really* love to see it, or maybe you could give a brief 
code example of what you are talking about?"

- Yes, I promised that, so here we go. Please take some time, it's not 
so brief ;-).
- When we take your most recent split-level testversion of 
http://www.berkeley.edu/test/calendar-tabs/sports-tabs-1.html,
then without style (Firefox > Menu View > Page style > No style; in 
Opera similar) you get a reasonable long list of 31 items, that the user 
has to go through in order to get to the Lorem (the real content of this 
page). See screenshot: 
http://home.tiscali.nl/developerscorner/css-discuss/berkeley-images/longlist.gif.
- In a text-reader, there will be a similar affect. See screenshot of 
FANG: 
http://home.tiscali.nl/developerscorner/css-discuss/berkeley-images/fang-longlist.gif.
 
Remark there is not any hierarchy in the items: list after list, and a 
lot to hear before the Lorem comes. Hopefully the visitor is on the 
wanted page, for the next page wil start with the same ...

- Without style I should prefer to see some order in the unordered 
lists, and to have some navigation-options for fullspeed going to the 
content. Somehow as this screenshot: 
http://home.tiscali.nl/developerscorner/css-discuss/berkeley-images/nostyle-new.gif.

- For the text-reader I should like also the navigation first. 
Screenshot: 
http://home.tiscali.nl/developerscorner/css-discuss/berkeley-images/fang-new.gif.
 
Not only ther is a navigation-menu in the beginning, the user can also 
jump through the headings of different levels.

- *Q: is this possible in one and the same html-page?*
- *A: yes, that is the power of css!*

- Before making this statement, I had to see it myself first... And I 
could not resist the challenge to make a testmodel: 
http://home.tiscali.nl/developerscorner/css-discuss/berkeley-francky-testmodel.htm.
- Notes are in the sourcecode.
- Normal screen-viewing doesn't show there is more behind the screen.
- No-style viewing (with Firefox or Opera) or using the FANG-option will 
show the hidden treasures (I hope you think they are).

- My method was: first make the page o.k. as no-style version, then hide 
the elements which are not needed on screen when using visual styles, 
then styling with css for the visible layout.
- I would have preferred to get the content just in the beginning of the 
html, and the menu and submenu's in the end. But that seemed to be 
impossible.
- The order of the menu-levels for screen-viewing is from general to 
specific, and for screenreader I thought it would be beter upside down 
(once that you are in a specific page, it is most likely that you want 
to go 1 level higher, instead of beginning at the most general menu).
- Now when you place the content first in the normal flow (so in the 
beginning for the text-reader), you have to m

Re: [css-d] position: absolute; width: 100%, IE width not 100%

2006-01-02 Thread francky 
david wrote:

> francky wrote:
>
>> @Allison:
>> You wrote:
>>  >> "I recently discovered that you can download 40 minute versions 
>> of JAWS and Window Eyes ... Here's an article on this: ..."
>>
>> - Thanks for that!
>> - I use the Firefox "Menu > Extra", that has the "FANG"-option: which 
>> immediately gives a screen reader output. Very paedagogic, to notice 
>> what people hear when they open your webpage! (Don't know if there 
>> are significant differences with JAWS / Window Eyes).
>> - This option is built-in when you have the Developers Toolbar in FF.
>> - (for who are unknown of this:) There exists a special toolbar for 
>> easy analysing and 1-click checking of lots of aspects of webpages. I 
>> don't like extra toolbars at all ("never-never-never!"), but this is 
>> the exception: I can't miss it anymore. - So: everybody already using 
>> Chris Pederick's marvellous Web Developer Extension for Firefox? If 
>> not, I should say: get it! Free downloadable at 
>> http://chrispederick.com/work/webdeveloper/.
>
>
> I have that (in fact, just updated to v1.0) and there's no Menu > 
> Extra > FANG option ... using FF on Linux, maybe this FANG thing is 
> Windows only?
>
Whoops! My fault, its already some time ago, was forgotten I had an 
other FF-extension downloaded. The link is: 
http://www.standards-schmandards.com/index.php?show/fangs. FANGS comes 
in the menu and in the context-menu as well. Documentation says it's OS 
Independent.
btw: I found it back with the search engine in 
https://addons.mozilla.org/?application=firefox. When you are looking 
for something, it's quite easy . - There are so many extensions/add-ons 
to download/try, that searching by hand will lead to a lot of other 
extra's, and you are lost for a couple of hours ... ;-)

Sorry again,
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] position: absolute; width: 100%, IE width not 100%

2006-01-04 Thread Allison Bloodworth 
Hi Franky, 

This is great--thank you! I'm hoping to incorporate as many of your
suggestions as we can. One small correction: I believe you based the
revision you did was based on this page:
http://mms.media.berkeley.edu:8901/UCBCNUsabilityMockups/Gateway/New/sports-
ucb-nested.htm, not this (old) one:
http://www.berkeley.edu/test/calendar-tabs/sports-tabs-1.html.  

Unfortunately I can't use FANGS with Firefox 1.5, but on a 12/18 post on the
Fangs site it looks like they will be finishing a version for FF 1.5 soon. I
had actually downloaded FANGS previously, but am not sure I ever used it.

We have other plans (which were not implemented in the navigation snippet I
shared with the list) to increase the accessibility of this site by creating
access keys
(http://diveintoaccessibility.org/day_15_defining_keyboard_shortcuts.html)
and by creating a "skip to main content"
(http://www.jimthatcher.com/skipnav.htm) link--I think it might be helpful
to indicate in your links that the "Calendar of Intercollegiate Golf Events
2006" is the "Main content".

Thanks again!
Allison

-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of francky
Sent: Saturday, December 31, 2005 2:17 PM
To: Allison Bloodworth <[EMAIL PROTECTED]>;paul walker
Cc: '{tonyFelice}' ;; css-d@lists.css-discuss.org
Subject: Re: [css-d] position: absolute; width: 100%, IE width not 100%

@Paul:
You wrote:
 >> "... I have split up the submenu into another div: 
http://www.paulwalker.tv/tabs.htm. Please take a look and offer advice. 
I've only tested on IE and Firefox."

- In general: now it is cross-browser, enlarging-proof and looks fine! 
Some details:
- I tried Opera: functionality allright, but in Opera 7.54 the 
top-background (the horizon-line + white to blue sky) doesn't show up 
(stays white). In the newer Opera 8.01 it's o.k.
- All browsers: hovering causes hopping of the tabs, because of the 
changing normal/bold font-weight. Shoud say: no bold needed, the color 
change of the tab-background and the text must be enough to show there 
has been action of the mouse.

And you wrote:
 >> "Without CSS, the user is presented with a list of the main menu 
items and then individual lists for the submenu items grouped by ul's. I 
can live with that."

- Perhaps you can place some normally invisible line (with: .txtonly { 
margin-left: -px;}) between the ul's of the menu/submenus: "Submenu 
of Browse:", "Submenu of Division:", etc. Then nobody can complain. - 
See also below.


@Allison:
You wrote:
 >> "I recently discovered that you can download 40 minute versions of 
JAWS and Window Eyes ... Here's an article on this: ..."

- Thanks for that!
- I use the Firefox "Menu > Extra", that has the "FANG"-option: which 
immediately gives a screen reader output. Very paedagogic, to notice 
what people hear when they open your webpage! (Don't know if there are 
significant differences with JAWS / Window Eyes).
- This option is built-in when you have the Developers Toolbar in FF.
- (for who are unknown of this:) There exists a special toolbar for easy 
analysing and 1-click checking of lots of aspects of webpages. I don't 
like extra toolbars at all ("never-never-never!"), but this is the 
exception: I can't miss it anymore. - So: everybody already using Chris 
Pederick's marvellous Web Developer Extension for Firefox? If not, I 
should say: get it! Free downloadable at 
http://chrispederick.com/work/webdeveloper/.

And you wrote:
 >> "I'm not entirely sure what you are suggesting for the work-around, 
but I would *really* love to see it, or maybe you could give a brief 
code example of what you are talking about?"

- Yes, I promised that, so here we go. Please take some time, it's not 
so brief ;-).
- When we take your most recent split-level testversion of 
http://www.berkeley.edu/test/calendar-tabs/sports-tabs-1.html,
then without style (Firefox > Menu View > Page style > No style; in 
Opera similar) you get a reasonable long list of 31 items, that the user 
has to go through in order to get to the Lorem (the real content of this 
page). See screenshot: 
http://home.tiscali.nl/developerscorner/css-discuss/berkeley-images/longlist
.gif.
- In a text-reader, there will be a similar affect. See screenshot of 
FANG: 
http://home.tiscali.nl/developerscorner/css-discuss/berkeley-images/fang-lon
glist.gif. 
Remark there is not any hierarchy in the items: list after list, and a 
lot to hear before the Lorem comes. Hopefully the visitor is on the 
wanted page, for the next page wil start with the same ...

- Without style I should prefer to see some order in the unordered 
lists, and to have some navigation-options for fullspeed going to the 
content. Somehow as this screenshot:

Re: [css-d] position: absolute; width: 100%, IE width not 100%

2006-01-04 Thread francky 
Allison Bloodworth wrote:

>Hi Franky, 
>
>This is great--thank you! I'm hoping to incorporate as many of your
>suggestions as we can. One small correction: I believe you based the
>revision you did was based on this page:
>http://mms.media.berkeley.edu:8901/UCBCNUsabilityMockups/Gateway/New/sports-
>ucb-nested.htm, not this (old) one:
>http://www.berkeley.edu/test/calendar-tabs/sports-tabs-1.html.
>
Glad you can use it. :-)   - Yes: I saw the newer version later on; and 
because my testing was just an example, I didn't worry to much.

>Unfortunately I can't use FANGS with Firefox 1.5, but on a 12/18 post on the
>Fangs site it looks like they will be finishing a version for FF 1.5 soon. I
>had actually downloaded FANGS previously, but am not sure I ever used it.
>  
>
Yes again: they promise "really soon now" and "as soon as possible" (but 
didn't mention a deadline). They offer to give a notification when the 
new version is available, when you sign up to the Fangs mailing list 
 at 
lists.sourceforge.net.
But as you can see in my FANGS-screenshot 

 
of the testmodel-page, the result in Fangs is pretty the same as in the 
"View > No-style" option which you can see in all FF-versions.
Additional:
- In the w3c html-validator there is an option "Outline". Very easy 
checkpoint: at the bottom of the result page they give the 
page-structure as found in the headings ( = schematical representation 
of the highlighted items in Fangs)..
- I tried the testmodelpage in the online Lynx Viewer 
 ("This service allows web 
authors to see what their pages will look like (sort of) when viewed 
with Lynx, a text-mode web browser"). And, o wonder!, this gives exacty 
the same output as the No-style version.
- For testing accessibility in Lynx (and other browsers), there is a 
Lynx-emulation option in the Cynthia says testing page 
.

>We have other plans (which were not implemented in the navigation snippet I
>shared with the list) to increase the accessibility of this site by creating
>access keys
>(http://diveintoaccessibility.org/day_15_defining_keyboard_shortcuts.html)
>  
>
Adding access keys:  good thing too!

>and by creating a "skip to main content"
>(http://www.jimthatcher.com/skipnav.htm) link--I think it might be helpful
>to indicate in your links that the "Calendar of Intercollegiate Golf Events
>2006" is the "Main content".
>Thanks again!
>Allison
>  
>
Yes: in fact the first link in the No-style version of the testpage is 
the "skip to main content"-link, but this can be refined and better 
represented. Like starting with the text:
"Welcome at the text edition of this page. You can skip to the 
main content: Calendar of Intercollegiate Golf Events 2006. The 
rest of this page consists of menu's for navigating to other parts of 
this site. The list of possible menu's is:  ." or 
something like that.

Greetings,
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/