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 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 subitems within the <li>'s of the items.
I made separate <ul>'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 -9999px
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 <[EMAIL PROTECTED]> 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/
______________________________________________________________________
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/
