Jump to content

border colors - some are not working


hikingwithu2

Recommended Posts

I noticed on my website that some of the border colors are not working, so I came back to the W3 colors page and verified there weren't any changes to color names, then I looked at the borders page to verify that the borders have not changed, and my code is correct. But some of the colors are only displaying as grey, below are some, not all, in a test from the W3-borders Tryit Editor page (I get the same results on my own website) -

	<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
	<div class="w3-container">
  <h2>Thick Border Bars</h2>
	  <div class="w3-panel w3-leftbar w3-border-blue">
    <p>I have a thick left blue border.</p>
  </div>
  <div class="w3-container w3-rightbar w3-border-indigo">
    <p>I have a thick right indigo border.</p>
  </div>
  </div>
 
 <div class="w3-panel w3-topbar w3-border-cyan">
    <p>I have a thick cyan top border.</p>
  </div>
 
  <div class="w3-panel w3-bottombar w3-border-teal">
    <p>I have a thick teal bottom border.</p>
  </div>
	  <div class="w3-panel w3-leftbar w3-border-red">
    <p>I have a thick red left border.</p>
  </div>
 
  <div class="w3-panel w3-rightbar w3-border-pink">
    <p>I have a thick pink right border.</p>
  </div>
	  <div class="w3-panel w3-topbar w3-border-orange">
    <p>I have a thick orange top border.</p>
  </div>
 
  <div class="w3-panel w3-bottombar w3-border-yellow">
    <p>I have a thick yellow bottom border.</p>
  </div>
	  <div class="w3-container w3-leftbar w3-border-deep-orange">
    <p>I have a thick deep-orange left border.</p>
  </div>
 
  <div class="w3-container w3-rightbar w3-border-amber">
    <p>I have a thick amber right border.</p>
  </div>
	  <div class="w3-panel w3-bottombar w3-border-lime">
    <p>I have a thick lime bottom border.</p>
  </div>
 
  <div class="w3-panel w3-topbar w3-border-khaki">
    <p>I have a thick khaki top border.</p>
  </div>
	</div>
	</body>
</html>
	

Link to comment
Share on other sites

Wrong link? So the w3.css page with info for using/linking to/downloading w3.css is incorrect? See - www.w3schools.com/w3css/w3css_downloads.asp

In the many w3.css pages, click on the Tryit boxes, every one that I have checked has the same link I am using (that is why I am using that link, because the w3.css site itself uses that link. It is not my link that is the problem. The root of the problem is somewhere in the w3.css site or code. If I change

 <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 

to

<link rel="stylesheet" href="https://www.w3schools.com/w3css/3/w3.css">

the display of the colors is all correct, same as using the link you provide. So the problem is with the w3.css version 4 stylesheet, it seems to me.

Edited by hikingwithu2
Link to comment
Share on other sites

I didn't even know they had links to different versions, far as i know there was this link which was the latest.

To be honest this css framework is stupid and illogical, to have coloured specific classes, and i would never use them. For instance, say you want a different colour, you would have to change every element using this specific colour class, which could not just be one but several because they have a specific coloured class for background, borders, font, totally mad in my opinion.

Link to comment
Share on other sites

Probably not the only person, but since I don't use it, I'm not affected, the change log for version 4 states they fixed border errors, obviously they made it worse, since version 3 seems to work, like I said, ill thought out framework, results in ill thought out presentational fixes in my opinion. IF you want to complain, complain to w3shools.com for coming up with lightweight css framework (well yeah! it only half quarter of the features that other frameworks have), No JavaScript, (Well there is JavaScript with all there templates and examples, which without it would just sit there doing nothing, and be useless).

Link to comment
Share on other sites

HA! version 4 comes out with w3pro.css and w3mobile.css additions,so you have to load 3 css resource stylesheets instead of 1, where the idea is to reduce the number of resources as much as possible, they have tripled it for w3css stylesheets, how ridiculous can you get.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...