[WSG] Re: ScreenreaderVisibility issue - (was) CSS Rollover Flicker
Hi Martin, thought you might want to know, further browsers testing
shows that
#siteOption li a span {
position: absolute;
left: -1000px;
font-size: 1px;
}
causes entire menu disappears in Mac IE, because my site holds up
quite nicely in this browser with no single hack used, therefore I
would really like to get it fix.
http://gb.lotusseeds.com/menutest_2.html
http://gb.lotusseeds.com/macie_1.jpg
and this is the cure (without causing problem in PC' IEs):
#siteOption li a span {
text-indent: -16000px;
font-size: 1px;
}
http://gb.lotusseeds.com/macie.html
http://gb.lotusseeds.com/macie.jpg
However, Safari, Firefox and Oprea won't honor it no matter what.
Working on this site, I notice that there is an isue with class, span
class specificities that the above three browsers wont' honor and
which never happened before with other sites I did.
For example:
#content {}
#content p {padding: 10px; }
say, I wanted the last paragraph to have 20px padding-bottom instead
of 10px.
I added this:
.lastpara {padding-bottom: 20px; }
It won't works (note, didn't test it on PC' IEs at that stage ), but
if I change my code to :
#content p.lastpara { padding-bottom: 20px; }
Safari, Firefox and Opera honored my request.
div id=content
p first paragraph/p
p class=lastparalast paragrap/p
Despite the lower specificities for class, I would think the world
three most advanced browsers would honor my simple request without
telling them specifically that the '.lastpara' is the child of the
'p' element of descendant of 'content' div.
But I am too fatigue to figure out why.
tee
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Re: ScreenreaderVisibility issue - (was) CSS Rollover Flicker
A speculative thought: Would it be that the universal margin and
padding declaration get in the way because it has highest specificity?
* {margin: 0; padding: 0;}
I only started using it very recently in three sites but two of them
didn't require me to use extra classess for padding and margin.
tee
Working on this site, I notice that there is an isue with class,
span class specificities that the above three browsers wont' honor
and which never happened before with other sites I did.
For example:
#content {}
#content p {padding: 10px; }
say, I wanted the last paragraph to have 20px padding-bottom
instead of 10px.
I added this:
.lastpara {padding-bottom: 20px; }
It won't works (note, didn't test it on PC' IEs at that stage ),
but if I change my code to :
#content p.lastpara { padding-bottom: 20px; }
Safari, Firefox and Opera honored my request.
div id=content
p first paragraph/p
p class=lastparalast paragrap/p
Despite the lower specificities for class, I would think the world
three most advanced browsers would honor my simple request without
telling them specifically that the '.lastpara' is the child of the
'p' element of descendant of 'content' div.
But I am too fatigue to figure out why.
tee
***
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Re: ScreenreaderVisibility issue - (was) CSS Rollover Flicker
tee,
on Tuesday, December 27, 2005 at 18:19 wsg@webstandardsgroup.org wrote:
and this is the cure (without causing problem in PC' IEs):
#siteOption li a span {
text-indent: -16000px;
font-size: 1px;
}
http://gb.lotusseeds.com/macie.html
http://gb.lotusseeds.com/macie.jpg
However, Safari, Firefox and Oprea won't honor it no matter what.
This should work in those browsers too. But if not, you can safely use
the commented backslash hack for ie mac. The browser is dead and using
hacks for dead browsers is somehow safe.
maybe you need to set overflow:hidden; ?
Take a look at: http://phark.typepad.com/phark/2003/08/accessible_imag.html
Working on this site, I notice that there is an isue with class, span
class specificities that the above three browsers wont' honor and
which never happened before with other sites I did.
For example:
Despite the lower specificities for class, I would think the world
three most advanced browsers would honor my simple request without
telling them specifically that the '.lastpara' is the child of the
'p' element of descendant of 'content' div.
These browsers are right. And yes, it is because of the specificity.
#content p is more specific than .lastpara and therefore overrides the
padding value. You already found the cure, so simply use it, it's
correct.
regards
Martin
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
