[css-d] Multiple Explorers - how to get IE 6 files?
Hi, I currently run multiple Internet Explorers in order to do browser testing, and originally downloaded old versions of IE from this site: http://www.quirksmode.org/browsers/multipleie.html I have upgraded to IE 7 and am trying to add IE 6 to my repository of old browsers, but haven't been able to find files similar to the ones on the Quirks Mode site for IE 6. Anyone have any insight on how to go about this, or have the files posted somewhere? I tried downloading IE 6 from Microsoft to "downgrade" back to IE 6 and see if I could get the files that way, but the installer refuses to run, it says because I've got a newer version of IE installed. Thanks! Allison Bloodworth Principal Administrative Analyst Technology Program Office University of California, Berkeley (415) 377-8243 [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background-image at end of link not displaying properly when there's a line break in IE
Yes, I did see this...thanks so much for sending it along! It's funny, I checked the archives and actually sent my message before this one appeared, and for some strange reason my message didn't appear until about 6 hours after I posted it. I also noticed that even wikipedia was having problems with this, and since our site is pretty big, we decided to just hide the offsite icons from all versions of IE. I noticed that in IE 7 on your site (http://home.tiscali.nl/developerscorner/nederdev/test-link-icon6.htm) the last word which has the tags around it appears slightly lower than the rest of the link text preceding it. Is this another IE bug? It doesn't happen in Firefox. I'm wondering if using the span tag would solve this problem? -Original Message- From: francky [mailto:[EMAIL PROTECTED] Sent: Thursday, March 01, 2007 8:11 PM To: Allison Bloodworth Cc: css-d@lists.css-discuss.org Subject: Re: [css-d] Background-image at end of link not displaying properly when there's a line break in IE Allison Bloodworth wrote: > Hi, > > I am having a problem where a background-image at end of an link is not > displaying properly in IE when it contains a line break. See > http://technology.berkeley.edu/msvista/, and after links like "Minimum > Security Standards," "significant hardware investment," and "UC Berkeley > BearShare Windows Vista site" there should be a little "offsite" icon, > similar to the one wikipedia uses. > [...] > Hi Allison, (That was quite a year ago, when we talked about the B. News site. :-) ) I didn't remark this question before, but probably you have seen the POOF! thread in the meantime: * POOF! start here <http://archivist.incutio.com/viewlist/css-discuss/85416> * and the updated workaround here <http://home.tiscali.nl/developerscorner/css-discuss/test-link-iconENupdate. htm> Success and greetings! francky btw: As you can see in the right column halfway down in the Dutch version <http://home.tiscali.nl/developerscorner/nederdev/test-link-icon6.htm>, IE is normally placing the icons somewhere in the vertical middle of the amount of lines which the link is taking... - In Wikipedia is is going wrong in IE too, but mostly you don't see it because the links are only 1 or 2 words, and the probability of breaking in 2 lines is not so big then. - Example of things going wrong in IE is also the small link column in: * http://www.spip.net/en __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] FW: Unwanted underlines on text (not links) in FF
Hi,
For some reason when I add the following to my css:
a:hover {
text-decoration: underline;
}
All my *text* (not just links) is underlined on mouseover in FF 1.5.0. This
is not happening in IE 7. The site where this is happening can be found
here: http://www.ischool.berkeley.edu/~allisonb/OHA/
And the stylesheet is here:
http://www.ischool.berkeley.edu/~allisonb/OHA/stylesheets/styles.css
When I remove this style, the problem disappears. I tried adding
text-decoration: none; to the body, but that didn't help. I am not sure what
would be causing this.
Any ideas? Thanks for any help!
Allison Bloodworth
Principal Administrative Analyst
Technology Program Office
University of California, Berkeley
(415) 377-8243
[EMAIL PROTECTED]
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Background-image at end of link not displaying properly when there's a line break in IE
Hi,
I am having a problem where a background-image at end of an link is not
displaying properly in IE when it contains a line break. See
http://technology.berkeley.edu/msvista/, and after links like "Minimum
Security Standards," "significant hardware investment," and "UC Berkeley
BearShare Windows Vista site" there should be a little "offsite" icon,
similar to the one wikipedia uses. In IE when these links have a line break
in between them somewhere, it seems that IE tries to display the offsite
icon at the end of the first line that has part of the link in it, not at
the end of the link where I'd like it to be. When it does this, it almost
always displays a partial version of the icon, which looks very strange. You
may have to re-size your window to cause a line break in the middle of the
link to see this behavior.
The HTML in question is:
http://www.microsoft.com/windows/products/windowsvista/buyorupgrade/ca
pable.mspx" class="offsite">
significant hardware investment
And the CSS is:
a.offsite {
padding-right: 15px;
background-image: url(/images/offsite.gif);
background-position: right center;
background-repeat: no-repeat;
}
I've found a way to make the full icon appear, though it still appears at
the point of the line break in the middle of a link. To do this, in the
a.offsite style I changed:
background-position: right center;
To:
background-position: 100% 0%;
This "solution" is definitely not ideal because the icon overlaps the last
letter on the end of the first line, and there is an empty space where the
icon should really be right after the link.
Is there any way to make Internet Explorer display this background-image
correctly? It seems to be a problem with all versions, including 7.0.
Thanks for any help you can give me!
Allison Bloodworth
Principal Administrative Analyst
Technology Program Office
University of California, Berkeley
(415) 377-8243
[EMAIL PROTECTED]
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Accessible multi-level tabbed navigation
Hi, We are trying to create multi-level tabbed navigation for the new UC Berkeley calendar. We have one instance where we have three levels of tabs, with the third level having two lines: http://mms.media.berkeley.edu:8901/UCBCNUsabilityMockups/Gateway/New/UCBEven tsTabs2.bmp. We realize this is somewhat excessive, but haven't come up with a better way to organize this information and not change the left-hand navigation, which we'd like to be the same on all pages of all the calendars. We are wondering if, when someone clicks on something in the third level in the top row (e.g. Cross Country), it is possible for the two rows to switch order, similar to the way rows of tabs change places when selected in the Windows OS so that the selected item is always in the bottom row. One solution we thought of was to have two divs, one with one row on top and another with the other row on top, and to hide the row we didn't want to see with CSS (e.g. display:none or visibility:hidden). However, this would result in two versions of the same menu and I've read several places including here: http://www.naarvoren.nl/artikel/high_accessibility/ that some screen readers read things that are marked this way and some don't. Additionally, doing it this way the page wouldn't be very semantically accurate (since it would essentially have an extra menu). The current code for the first two levels of tabs is here: http://www.berkeley.edu/test/calendar-tabs/main-tabs-2levels.html. Any ideas are appreciated--thanks! Allison Bloodworth Principal Administrative Analyst e-Berkeley Program Office University of California, Berkeley (415) 377-8243 [EMAIL PROTECTED] __ 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-d] Problems with nested s used for tabbed navigation in IE 6.0
Hi, I recently adapted Adam Kalsey's CSS tabs with nested submenus made up of s (http://www.kalsey.com/tools/csstabs/) to create three levels of navigation for a calendar. For some reason, my page (http://mms.media.berkeley.edu:8901/UCBCNUsabilityMockups/Gateway/New/sports -ucb-nested.htm) looks great in Firefox 1.5 but horrible in IE 6.0 and I can't figure out why. The page is no longer centered and the second and third level navigation is rendering vertically instead of horizontally. I've used s to create this navigation and I've made sure all the s and s in the submenus are marked "display:inline". Anyone have any suggestions for me? Thanks very much! Allison Bloodworth Principal Administrative Analyst e-Berkeley Program Office University of California, Berkeley (415) 377-8243 [EMAIL PROTECTED] __ 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] Problems with nested s used for tabbed navigation in IE 6.0
Thanks very much for your help, Steve. The DOCTYPE did fix almost everything. However, now in IE 6.0 for some reason my second and third level navigation is only slightly more than half the page (maybe about 60% of the page?) when it is supposed to stretch across the whole page: http://mms.media.berkeley.edu:8901/UCBCNUsabilityMockups/Gateway/New/sports- ucb-nested.htm. I've tried putting width: 100% on several of the items to no avail. Since these are nested lists, is it possible that the percentage values are being compounded somehow? If that's the case, however, I wouldn't understand why the third list (menu) is the same size as the second list (which it is nested within). I've put colored borders around some of the elements in question in order to see how big they really are. And unfortunately in IE5.0 & 5.5 the navigation is all vertical instead of horizontal... Finally, it is also a huge mess on IE5/Mac, maybe because I've used em's to absolutely position the top of the subnavs (for better text resizing results)? I wouldn't think it would be that off from that, though, and they are way too far off to the left despite the use of left: 0px. Do we really have to design for this browser anymore now that it's unsupported as of Dec. 31? I was really excited about this design (because it's more accessible) and was really hoping I could get it to work in these browsers. In case it's helpful, here is the same design (which works at least to some extent in all browsers mentioned except IE5/Mac - though it's troubles there are much less than with this layout): http://mms.media.berkeley.edu:8901/UCBCNUsabilityMockups/Gateway/New/sports- tabs-1.html. Thanks again for any help anyone can give me, and happy holidays! Allison -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Steve Clason Sent: Thursday, December 22, 2005 6:18 PM To: Allison Bloodworth Cc: css-d@lists.css-discuss.org Subject: Re: [css-d] Problems with nested s used for tabbed navigation in IE 6.0 On 12/22/2005 5:39 PM Allison Bloodworth wrote: > I recently adapted Adam Kalsey's CSS tabs with nested submenus made up of > s (http://www.kalsey.com/tools/csstabs/) to create three levels of > navigation for a calendar. For some reason, my page > (http://mms.media.berkeley.edu:8901/UCBCNUsabilityMockups/Gateway/New/sports > -ucb-nested.htm) looks great in Firefox 1.5 but horrible in IE 6.0 and I > can't figure out why. The page is no longer centered and the second and > third level navigation is rendering vertically instead of horizontally. I've > used s to create this navigation and I've made sure all the s and > s in the submenus are marked "display:inline". Anyone have any > suggestions for me? Your DOCTYPE puts IE into quirks mode. Try this (with the URI): http://www.w3.org/TR/html4/loose.dtd";> It seemed to take care of most of the issues you mentioned, though I'll admit I didn't look at everything. -- Steve Clason Web Design and Development Boulder, Colorado, USA www.topdogstrategy.com (303)818-8590 __ 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%
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 t
Re: [css-d] position: absolute; width: 100%, IE width not 100%
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%
Hi Franky,
Thanks much for the great summary, and for your work on this! I actually
didnt realize I had created invalid markup until you pointed it out. Im
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, wed really need to nest
the menus, so its too bad that Opera doesnt 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 doesnt give the context of each menu (e.g.
they cant 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. Heres 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%
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:
[css-d] Problems styling an in FF 1.5.0.4
Hi,
I am trying to style an and am having trouble applying a color to it in
Firefox 1.5.0.4/PC. It looks fine in IE 6.0/PC. I'm following these
instructions: http://www.sovavsiti.cz/css/hr.html
And the code is:
.AdminTablelessDivider hr
{
color: #CC;
background-color: #CC;
height: 1px;
}
I can't show the page because it's a web app that requires log in. Any idea
what could be wrong? I searched the archives and didn't find anything.
Thanks!
Allison Bloodworth
Principal Administrative Analyst
Technology Program Office
University of California, Berkeley
(415) 377-8243
[EMAIL PROTECTED]
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Problems styling an in FF 1.5.0.4
Thanks very much Daniel--I was actually using borders originally but decided
I wanted to use an for its semantic value. We are a public university
and I think this could be an accessibility issue for blind users as they
wouldn't "see" the borders (and the div contains nothing else to tell them
it's a "section break."
Is the article I referenced about how to accomplish this in Mozilla-based
browsers out of date? I got the link from this thread from only a year ago:
http://forum.stylegala.com/about1038.html&highlight=
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Venditelli, Daniel
- Web Development Administrator
Sent: Tuesday, June 13, 2006 5:30 PM
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] Problems styling an in FF 1.5.0.4
Allison,
I had a similar issue earlier today and ended up using this instead:
#subsection {
position: static;
border-width: 1px;
border-top-style: solid;
border-color: #ccc;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
}
And then this where I wanted the rule:
mailto:[EMAIL PROTECTED] On Behalf Of Allison
Bloodworth
Sent: Tuesday, June 13, 2006 5:23 PM
To: css-d@lists.css-discuss.org
Subject: [css-d] Problems styling an in FF 1.5.0.4
Hi,
I am trying to style an and am having trouble applying a color to
it in
Firefox 1.5.0.4/PC. It looks fine in IE 6.0/PC. I'm following these
instructions: http://www.sovavsiti.cz/css/hr.html
And the code is:
.AdminTablelessDivider hr
{
color: #CC;
background-color: #CC;
height: 1px;
}
I can't show the page because it's a web app that requires log in. Any
idea
what could be wrong? I searched the archives and didn't find anything.
Thanks!
Allison Bloodworth
Principal Administrative Analyst
Technology Program Office
University of California, Berkeley
(415) 377-8243
[EMAIL PROTECTED]
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
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
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
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
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] z-index not working in Opera 8.5
Hi,
I am trying to position some text that is part of a banner so that the box
in which it is contained is a little higher than it normally would be. So I
am using a negative margin and z-index to place it underneath the part of
the banner that is above it. However, for some reason this doesn't work on
Opera 8.5. Am I doing something that isn't really standards-compliant, and
is there a work-around for this problem in Opera? The page (which is still
in progress, formatting issues remain) is here:
http://eberkeley-dev.vcbf.berkeley.edu/ver09ajb/index.htm. And the code is
below:
c o n n e c t i n g t
h e c a m p u s c o m m u n i t y
#divLogo {
width: 100%;
padding: 0px;
margin: 0px;
position: relative;
/*border:1px solid orange;*/
}
#tagline {
/*border: solid red 2px;*/
clear: right;
float: right;
color: white;
font-weight: bold;
margin-right: 60px;
margin-top: -3px;
font-size: 80%;
width: 32em;
background: url("../images/banner_bg.gif") repeat-x 0px 0px
transparent;
z-index: 1;
position: relative;
}
img.right{ /* Used to float banner images*/
float:right;
position: relative;
z-index: 10;
}
img.left{
float:left;
position: relative;
z-index: 10;
}
Thanks very much for any help you can give me!
Allison Bloodworth
Principal Administrative Analyst
e-Berkeley Program Office
University of California, Berkeley
(415) 377-8243
[EMAIL PROTECTED]
__
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] is this a valid hack for safari only??
What is the hack for the safari oversized background-repeat bug? I seem to
be having this problem right now. I found this URL referred to on another
page (http://www.holovaty.com/blog/archive/2003/01/09/2152), but apparently
he doesn't want us to use this hack anymore because it's been removed:
http://diveintomark.org/safari/csshacks/safari-spacer-hack.html.
Thanks, Allison
Sent by Ben Curtis on 9 November
<http://archivist.incutio.com/viewlist/css-discuss/November+2005> 2005
17:05
On Nov 3, 2005, at 4:55 AM, [EMAIL-REMOVED]> [EMAIL-REMOVED]>
wrote:
> /*\*/
> html>body*.info_box_top_left {background-color: red; }
> /**/
>
> I have been using this. Is it a valid hack for safari only??
Sorry for the delayed response.
IMO, this is a bad idea. You should only Hack The Dead(tm). Safari is
a living browser, in active development. You have no idea whether
this hack will stop working tomorrow, or worse, fall out of sync with
the rendering bug you are trying to fix. Also, I'm assuming that you
ask "is this a valid hack" meaning "does it work?" and not meaning
"is it valid CSS?" because then, no, it does not validate.
This is a parse error in their engine, but a fairly benign one that
is easy for them to fix -- and indeed some might say it might not be
an error, so other browsers might pick it up. The bug here is that
Safari seems to treat matches on /\s*/ as a descendant selector,
instead of matches on /\s+/. One character change in the source code
makes this bug a pretty easy fix, no?
Since Safari is being developed (versions 1.3.x and 2.0.x are both
active), I would only use hacks for it that are known to target
versions 1.0-1.2.x. Targeting current versions opens you up to
problems. In my experience, though, there is nothing Safari needs
hacking for except the oversized background-repeat bug.
--
Ben Curtis : webwright
bivia : a personal web studio
http://www.bivia.com
v: (818) 507-6613
Allison Bloodworth
Principal Administrative Analyst
e-Berkeley Program Office
University of California, Berkeley
(415) 377-8243
[EMAIL PROTECTED]
__
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-d] Doesn't Opera like nested floats?
Hi, I've Googled around and searched the CSS-d archive and can't find an answer to this-thanks in advance for any help anyone can provide me. I am having problems with some spans that are floated left in a container div that is floated right in Opera 8.5: http://eberkeley-dev.vcbf.berkeley.edu/ver10ajb/. (The reason I used spans inside the div is because Safari had problems with divs inside the div.) In Opera the Search label, Search box, and GO button are all pushed way to the right, one under the other, resulting in some of them ending up outside the page margins. This layout works fine in IE5.x/Win, IE6/Win, IE5/Mac, Safari 1.3 (though there is a small problem with the yellow background being too large), Mozilla 1.7, & Netscape 8.0. Though I could have just floated all the elements right without a container, I did it this way so that the search elements appear in the code in the right order so that screen readers would get the elements in the proper order (they would have to appear in backwards order for that to work). If I add display: table to the container div it fixes the problem in Opera, but the entire container div disappears in Safari. Additionally, when this is done the "GO" button drops down in Mozilla & Netscape, though when you refresh the page (or look at it any of the other pages of the site in the same window after the refresh), it looks correct. Thanks for any help you can give me, Allison Bloodworth Principal Administrative Analyst e-Berkeley Program Office University of California, Berkeley (415) 377-8243 [EMAIL PROTECTED] __ 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/
