CODEWITHSUNDEEP
htmlcss
Linens Digital
Linens Digital

Reputation: 31

External style sheets not applying styles

I have this page, to test a new layout for a category on a website at my new job:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/pure/1.0.0/grids-responsive-min.css" media="all" />
  </head>
  <body>
    <div id="category-desc-grid" class="pure-g">

      <div class="pure-u">
        <p class="title"></p>

        <p class="details">
          Throw Style &amp; Fitted Style<br>
          71 Fabric Color Choices<br>
          Fire resistant. Passes NFPA 701-2010<br>
          Full Color Dye Sublimation
        </p>

        <a href="#" class="button">Buy/View 24 Hour Tablecloths</a>
      </div>

      <div class="pure-u-1-2">
        <p class="title">Single Color Front Panel, Fitted Table Colors &amp; Throws</p>

        <p class="details">
          4ft, 5ft, 6ft, 8ft<br>
          74 Fabric Color Choices,<br>
          including neon colors.<br>
          Fire resistant. Passes<br>
          NFPA 701-2010
        </p>

        <a href="#" class="button">Available in 1, 2, or 3 Day Production</a>
      </div>

      <div class="pure-u-1-2">
        <p class="title">Full Color Print Front Panel</p>

        <p class="details">
          Additional Panel Print $99<br>
          Fitted &amp; Throw Style<br>
          4ft, 5ft, 6ft, 8ft<br>
          71 Fabric Choices<br>
          F.R. - NFPA 701-2010
        </p>

        <a href="#" class="button">Available in 1, 2, or 3 Day Production</a>
      </div>

    </div>

  </body>
</html>

All of the stylesheets included are the mass that they have included in the head of the page that this code is to be inserted into, save for the last one, the Pure Grid. This is the one in question which will not apply any of its styles. As you can see I have the classes from that stylesheet in my HTML, but no styles are being attributed to them upon inspection. Styles from the stylesheets prior, however, are being applied.

Why

I've removed the grid stylesheet altogether and added one simple line: .display-grid .half { display: inline-block; width: 50%; max-width: 50%; } but it will only split into halves if I exclude the width rule. Unbelievable.

I just added the Bootstrap grid standalone.

Upvotes: 0

Views: 832

Answers (2)

srikanthreddy maram
srikanthreddy maram

Reputation: 1

<!DOCTYPE html>
<html>
  <head>
	
    <link rel="stylesheet" type="text/css" href="http://dev.premiertablelinens.com/js/tm/easylightbox/lightbox/css/lightbox.css" />
    <link rel="stylesheet" type="text/css" href="http://dev.premiertablelinens.com/skin/frontend/default/delivery/css/reset.css" media="all" />
    <link rel="stylesheet" type="text/css" href="http://dev.premiertablelinens.com/skin/frontend/default/delivery/css/boxes.css" media="all" />
    <link rel="stylesheet" type="text/css" href="http://dev.premiertablelinens.com/skin/frontend/default/delivery/css/styles.css" media="all" />
    <link rel="stylesheet" type="text/css" href="http://dev.premiertablelinens.com/skin/frontend/default/delivery/css/menu.css" media="all" />
    <link rel="stylesheet" type="text/css" href="http://dev.premiertablelinens.com/skin/frontend/base/default/css/widgets.css" media="all" />
    <link rel="stylesheet" type="text/css" href="http://dev.premiertablelinens.com/skin/frontend/base/default/css/aitpagecache.css" media="all" />
    <link rel="stylesheet" type="text/css" href="http://dev.premiertablelinens.com/skin/frontend/base/default/crimson/catalog/css/catalog.css" media="all" />
    <link rel="stylesheet" type="text/css" href="http://dev.premiertablelinens.com/skin/frontend/base/default/magmodules/snippets/snippets.css" media="all" />
    <link rel="stylesheet" type="text/css" href="http://dev.premiertablelinens.com/skin/frontend/base/default/magmodules/snippets/breadcrumbs.css" media="all" />
    <link rel="stylesheet" type="text/css" href="http://dev.premiertablelinens.com/skin/frontend/base/default/css/tm/easytabs.css" media="all" />
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/pure/1.0.0/grids-responsive-min.css" media="all" />
	<link rel="stylesheet" href="https://unpkg.com/[email protected]/build/base-min.css"/>
	<link rel="stylesheet" href="https://unpkg.com/[email protected]/build/grids-min.css"/>
  </head>
  <body>
    <div id="category-desc-grid" class="pure-g">
      <div class="pure-u">
        <p class="title"></p>
        <p class="details">
          Throw Style &amp; Fitted Style<br>
          71 Fabric Color Choices<br>
          Fire resistant. Passes NFPA 701-2010<br>
          Full Color Dye Sublimation
        </p>
        <a href="#" class="button">Buy/View 24 Hour Tablecloths</a>
      </div>
      <div class="pure-u-1-2">
        <p class="title">Single Color Front Panel, Fitted Table Colors &amp; Throws</p>
        <p class="details">
          4ft, 5ft, 6ft, 8ft<br>
          74 Fabric Color Choices,<br>
          including neon colors.<br>
          Fire resistant. Passes<br>
          NFPA 701-2010
        </p>
        <a href="#" class="button">Available in 1, 2, or 3 Day Production</a>
      </div>
      <div class="pure-u-1-2">
        <p class="title">Full Color Print Front Panel</p>
        <p class="details">
          Additional Panel Print $99<br>
          Fitted &amp; Throw Style<br>
          4ft, 5ft, 6ft, 8ft<br>
          71 Fabric Choices<br>
          F.R. - NFPA 701-2010
        </p>
        <a href="#" class="button">Available in 1, 2, or 3 Day Production</a>
      </div>
    </div>
  </body>
</html>

Above you forgot to add two more files like- base-min.js and grids-min.js

Upvotes: -1

David Phelps
David Phelps

Reputation: 1

I replicated your code on my system. The inspect console complained that no character encoding was declared, so i inserted a <meta charset="utf-8"/> snippet in the <head> tags.

Also, I looked at the Pure Grid css file. It looks like some elements are missing when you used the class names. For example, I changed "pure-u" to "pure-u-sm-1-24" and it worked in my browser.

Upvotes: 0

Related Questions