Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ skip to link text is visible on firefox but not on samsung internet? suggestion on css file also

Posted by: జిందం వాఐి Dec 22 2023, 10:32 PM

* please find any shortcomings on my css code also
* i have skip link text_ "దయచేసి జిందం వాఐి ఆలోచనల జాగా మార్పులు గురించి అరుసుకొను"
* its hidden on samsung internet, visible on firefox on android device.
* is this normal?
* https://jindam.neocities.org
* 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 */

Posted by: pandy Dec 23 2023, 04:16 AM

Hi!

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&doc=https%3A%2F%2Fjindam.neocities.org%2F#l46c94

Posted by: జిందం వాఐి Dec 23 2023, 05:07 AM

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.

Posted by: pandy Dec 23 2023, 07:47 AM

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

Posted by: Christian J Dec 23 2023, 10:34 AM

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

* i have skip link text_ "దయచేసి జిందం వాఐి ఆలోచనల జాగా మార్పులు గురించి అరుసుకొను"
* its hidden on samsung internet, visible on firefox on android device.
* is this normal?
* https://jindam.neocities.org

I can't find

CODE

దయచేసి జిందం వాఐి ఆలోచనల జాగా మార్పులు గురించి అరుసుకొను

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.

Posted by: pandy Dec 23 2023, 04: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">ఇటీవలి ఆలోచనలకు వెళ్లండి</a>

Posted by: Christian J Dec 23 2023, 06:55 PM

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">ఇటీవలి ఆలోచనలకు వెళ్లండి</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">దయచేసి తారీఖు లెక్కలు అరుసుకొను</a>

Posted by: Christian J Dec 23 2023, 07:13 PM

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

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

CODE

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

the browser says there's a match, even though I can't see anything on the page.

Posted by: pandy Dec 24 2023, 06:41 PM

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.