The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> skip to link text is visible on firefox but not on samsung internet? suggestion on css file also
జిందం వాఐి
post Dec 22 2023, 10:32 PM
Post #1





Group: Members
Posts: 5
Joined: 6-November 23
Member No.: 29,084



* please find any shortcomings on my css code also wub.gif
* i have skip link text_ "<span lang="te">దయచేసి జిందం వాఐి ఆలోచనల జాగా మార్పులు గురించి అరుసుకొను</span>"
* its hidden on samsung internet, visible on firefox on android device.
* is this normal?
* My Webpage
* css code
CODE

/* Skip link styling */
.text-assistive {
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    box-sizing: border-box;
    position: absolute;
    margin: 0;
    padding: 0;
}
.text-assistive.display-at-top-on-focus {
    top: 0;
    left: 0;
    width: 100%;
}
.text-assistive.display-at-top-on-focus:focus {
    -webkit-clip-path: none;
    clip-path: none;
    z-index: 999;
    height: 80px;
    line-height: 80px;
    background: white;
    font-size: 1.2rem;
    text-decoration: none;
    color: #1295e6;
    text-align: center;
}
#skip-link-target:focus {
    background: #084367;
    color: white;
}
/* end of skip link styling */

/* improved keyboard focus visibility */
a:focus {
    border-bottom-color: #1295e6;
}
.menu-right a:focus, .branding a:focus {
    background-color: white;
    color: #1295e6;
}
/* end of improved keyboard focus visibility */


/* basic styles for the rest of the page */
body {
    font-family: sans-serif;
    font-size: 1.5em;
    font-weight: bold;
    font-style: normal;
    margin: 0;
    padding: 0;
    background-color: #F0F0F0;
    color: #000000;
    line-height: 1.5em;
    letter-spacing: 0.12em;
    word-spacing: 0.16em;
    margin-bottom: 2em;
}
.bg-dark {
    background: #FFDBFF;
    color: #fff;
    min-height: 100px;
}
.content-width {
    box-sizing: border-box;
    max-width: 1208px;
    padding: 1rem;
    margin: 0 auto;
}
a {
    outline-color: transparent;
    text-decoration: none;
    color: #1295e6;
    border-bottom: 4px solid transparent;
    padding: 2px 1px 0;
}
a:hover {
    border-bottom-color: #1295e6;
    border-bottom: 1px solid;
}
.menu-right a, .branding a {
    color: white;
}
.menu-right a:hover, .branding a:hover {
    background-color: white;
    color: #1295e6;
}
.branding {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 220px;
    font-size: 2rem;
    font-style: italic;
    height: 68px;
}
.branding a {
    padding: 0 1rem;
}
.flex-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.menu-right {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    height: 68px;
}


.menu-right a {
    display: flex;
    align-items: center;
    padding: 0 1rem;
}


/* end of basic styles for the rest of the page */

/* start old css */

cite {
    font-style: normal;
}

footer {
    padding: 3px;
    background-color: #F6FEF6;
    color: #0d0c0c;
}

a:link {
    color: #3C6D2C;
}

a:visited {
    color: #ff0000;
}

a:active {
    color: #ec00ff;
}

a:focus {
    border-bottom: 1px solid;
}

/* end of old css */
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 23 2023, 04:16 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,766
Joined: 9-August 06
Member No.: 6



Hi! smile.gif

Don't have a Samsung phone, so can't check.

You can find any errors by using the validators.
https://validator.w3.org/nu/
https://jigsaw.w3.org/css-validator/

You have one HTML error, a closing tag for A too many. Here:
https://validator.w3.org/nu/?showsource=yes...s.org%2F#l46c94
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
జిందం వాఐి
post Dec 23 2023, 05:07 AM
Post #3





Group: Members
Posts: 5
Joined: 6-November 23
Member No.: 29,084



QUOTE(pandy @ Dec 23 2023, 04:16 AM) *

Don't have a Samsung phone, so can't check.

* samsung internet is rebranded google chrome.
* if possible, please test it.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 23 2023, 07:47 AM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,766
Joined: 9-August 06
Member No.: 6



Is it the top link? Afraid it's hard for me to read your language. In that case I don't see it either.



Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Dec 23 2023, 10:34 AM
Post #5


.
********

Group: WDG Moderators
Posts: 9,743
Joined: 10-August 06
Member No.: 7



QUOTE(జిందం వాఐి @ Dec 23 2023, 04:32 AM) *

* i have skip link text_ "<span lang="te">దయచేసి జిందం వాఐి ఆలోచనల జాగా మార్పులు గురించి అరుసుకొను</span>"
* its hidden on samsung internet, visible on firefox on android device.
* is this normal?
* My Webpage

I can't find

CODE
<span lang="te">దయచేసి జిందం వాఐి ఆలోచనల జాగా మార్పులు గురించి అరుసుకొను</span>

or even

CODE
దయచేసి జిందం

in the HTML source of the linked page.

My text editor also has some problems, with the cursor/caret appearing in the wrong position. unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 23 2023, 04:21 PM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,766
Joined: 9-August 06
Member No.: 6



Isn't it this? Line 14. But maybe with a different link text. It's at top and #skip-link-target looks promising.

CODE
<a href="#skip-link-target" class="text-assistive display-at-top-on-focus"><span lang="te">ఇటీవలి ఆలోచనలకు వెళ్లండి</span></a>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Dec 23 2023, 06:55 PM
Post #7


.
********

Group: WDG Moderators
Posts: 9,743
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Dec 23 2023, 10:21 PM) *

Isn't it this? Line 14. But maybe with a different link text. It's at top and #skip-link-target looks promising.

CODE
<a href="#skip-link-target" class="text-assistive display-at-top-on-focus"><span lang="te">ఇటీవలి ఆలోచనలకు వెళ్లండి</span></a>


There's also this on line 40 (plus the link text is different):

CODE
<a href="#skip-link-target" class="text-assistive display-at-top-on-focus" id="skip-link-target"><span lang="te">దయచేసి తారీఖు లెక్కలు అరుసుకొను</span></a>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Dec 23 2023, 07:13 PM
Post #8


.
********

Group: WDG Moderators
Posts: 9,743
Joined: 10-August 06
Member No.: 7



When tabbing through the links on the page, a blue box with a white link appears at the top.

Also, when using Ctrl+F in Vivaldi for the strings

CODE
ఇటీవలి ఆలోచనలకు వెళ్లండి

or

CODE
దయచేసి తారీఖు లెక్కలు అరుసుకొను

the browser says there's a match, even though I can't see anything on the page.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 24 2023, 06:41 PM
Post #9


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,766
Joined: 9-August 06
Member No.: 6



Yeah, I get the blue and white thing when tabbing too. Is that it? But the OP said it was visible in other browers.

It's darn confusing when you don't know the alphabet. blush.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 13th December 2024 - 12:04 AM