1. Home
  2. Forums Index
  3. Browser Side / CSS 9:20 am May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Very confused: Css works in Firefox but doesn't work in Chrome

         

Gilead

4:04 pm on Aug 12, 2024 (gmt 0)

10+ Year Member



I don't know what happened, but this code no longer works in Chrome, but it does in Edge and Firefox. It did work previously and the only thing I changed was the body color and I commented out a page from the nav.
Let me start over: I want to use CSS to create a stroke effect around the words for my navigation. After much searching I found: -webkit-text-stroke-width: 1.5px; -webkit-text-stroke-color: white; color:#000000;
So I implemented it in my linked css:
nav{background-color:#40077a; width:100%;}
.navtext{font-family: 'Arial Black', 'Arial Bold', Gadget, sans-serif; font-size:3vw; -webkit-text-stroke-width: 1.5px; -webkit-text-stroke-color: white; color:#000000;}
.navthird{background-color:#dfb318; }
.subnav{background-color:#000000; width:100%; }
.nav2text{font-family: 'Arial Black', 'Arial Bold', Gadget, sans-serif; font-size:1.5vw; -webkit-text-stroke-width: 1.5px; -webkit-text-stroke-color: white; color:#C0C0C0; }
When moused over the main navigation changes background color and the subnav has the stroke effect black on black so it can be viewable and the yellow background when moused over.
Here is the main and sub nav: 
<nav>
  <div align="center"><span class="navtext"><a href="index.php">Home</a> &nbsp;&nbsp; 
<a href="profile.php">Profile</a> &nbsp;&nbsp; 
<span class="navthird">Services</span> &nbsp;&nbsp; 
<!-- <a href="tutorials.php">Tutorials</a> --> &nbsp;&nbsp; <a href="contact.php">Contact</a></span></div>
 </nav>
 <section>
  <div class="subnav" align="center"><span class="nav2text"><a href="cybersecurity.php">Cyber Security</a> &nbsp;&nbsp; 
 <a href="cybersolutions.php">Cyber Solutions</a> &nbsp;&nbsp; 
 <a href="datacenter.php">Data Center</a> &nbsp;&nbsp; 
 <a href="businessphonesystems.php">Business Phone Systems</a> &nbsp;&nbsp;
 <a href="webdesign.php">Web Design</a></span></div>


It used to work, but now it doesn't. Can anyone help me fix this? Thank you!

not2easy

4:21 pm on Aug 12, 2024 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



If this is a 
<!DOCTYPE html>
(html5) document, it could be that 
<div align="center">
is supposed to be defined in the css and not inline. I wouldn't think that common browsers are so unforgiving though.

lucy24

4:25 pm on Aug 12, 2024 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I’m confused. The CSS has various -webkit- specifications, but no generic, and yet it only works in Edge and FF? Seems like it should be the other way around.

:: detour to caniuse [caniuse.com] under text-stroke-width ::

Well, that clears it up, but not in any way that will be helpful to you:
Does not yet appear in any W3C specification. Was briefly included in a spec as the "text-outline" property, but this was removed.
1 Firefox & Edge specifically only support the -webkit-text-stroke property (not using -moz- or -ms- prefix)
2 Requires the layout.css.prefixes.webkit flag to be enabled.
In short, it sound like you’re SOL and should try for something more widely supported. If you describe what you want it to look like, someone hereabouts might know of an alternative.

not2easy

4:31 pm on Aug 12, 2024 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



I think lucy24's answer is more likely to be the right one. I didn't think that the "align" thing would upset Chrome.

londrum

5:09 pm on Aug 12, 2024 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



you could try 
text-shadow
instead, which can be made to look like an outline all the way around the letters, just like stroke

Gilead

4:16 pm on Aug 13, 2024 (gmt 0)

10+ Year Member



I tried: .navtext {
font-family: 'Arial Black', 'Arial Bold', Gadget, sans-serif;
font-size: 3vw;
color: #000000;
text-shadow: 1px 1px 2px #fff, -1px -1px 2px #fff;
box-shadow: 1px 1px 2px #fff, -1px -1px 2px #fff;
}
it did not work.

lucy24

4:56 pm on Aug 13, 2024 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Obligatory reminder: When asking for technical assistance of any kind, avoid “does not work”. Say exactly what happens or doesn’t happen.

In this case, start simple: just 
text-shadow: 1px 1px 2px #fff;
I can count on my fingers the number of times I have used text-shadow, but I just checked and it displays as intended on Firefox and Safari--and did so, ten-plus years ago when I made the pages--so try that first.

Gilead

2:48 pm on Aug 14, 2024 (gmt 0)

10+ Year Member



The problem was with chrome and it's derivatives like Brave

Gilead

2:53 pm on Aug 14, 2024 (gmt 0)

10+ Year Member



Unfortunately, the result did not have the text go all the way around, it was closer to a drop shadow rather that the stroke effect I was seeking.

londrum

3:14 pm on Aug 14, 2024 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



You can put 4 shadows together and turn it into an outline:

text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;

Gilead

2:54 pm on Aug 19, 2024 (gmt 0)

10+ Year Member



Thank you.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 9:20 am May 1, 2026