CODEWITHSUNDEEP
htmlcss
oskar132
oskar132

Reputation: 839

2 different css files one page, browser applying only style from one file

I'm trying to create a new page in which I apply my own CSS and use some of the components developed here: http://aozora.github.io/bootmetro/index.html. Problem is that on one component the browser is only applying the style from my file and not the style defined on the .css file I downloaded from the site. Trouble is that firebug shows that the file is being tranfered to the user but somehow its not being used even if the class defined from tag is clearly defined on the other .css file. Heres the source of the page:

<div class="header">
    <div class="right textHeader">
      <div class="left logo"><p class="title">Portal para la gestión y control<br>
        de la implementación del sistema de información PAI
           </p> 
        </div> 
        <div class="right textInfo">
            <div class="left greetTime">
               <img src="/Content/Images/calendar.png">  27/04/2013 12:15:25 p.m.
            </div>

                <div class="greet">
                            Hola, <a class="username" href="/Account/Manage"  title="Manage">administrador</a>!
<form action="/Account/LogOff" id="logoutForm" method="post"><input name="__RequestVerificationToken" value="gsGgnTHMhT55z7aQFmarrbLlUQK4x2nuMNZP_kXbqRx2j3kWOhNSc3RptPzG8118PGgkQOpU_erRuCcZ7GvH4FhKNAlaCug0dFUGKjiFqbP5wjhFTJConDCIZzZppq090" type="hidden">                                   <a href="javascript:document.getElementById('logoutForm').submit()">Desconectarse</a>
</form>                    </div>  
        </div>
    </div>

    <div class="left imgHeader">
        <img src="/Content/Images/logo-minSalud.png">
        <img src="/Content/Images/logo-prosperidad.png">
    </div>

</div>

<div id="categories">
 <a href="/">Inicio</a> 



</div>

<div id="content">



<h2>Bienvenido</h2>

This is the item I want to apply the class to

<a href="/Home/IndexSupportItems?Length=5" class="tile wide text">Administrar banco de información</a>**<a href="/Admin/ManageUsers">Administrar usuarios</a><a href="/Admin/ListReports">Reportes gerenciales</a>

</div>

Here's the firebug screenshot:

enter image description here

And here's the screenshot showing that both files are being downloaded: enter image description here Here's my css file:

body {

    color: #353535;
    background-color: #fff;
    background: url("Images/bg.jpg") repeat-x 0 0 #EBEBEB; 

    font-size: 1em;
    margin: 0;
    padding: 0;
    font-family: 'Maven Pro', sans-serif;
}

header, footer, nav, section 
{
    display: block;

}
.editButton {
    background:url(Images/editarPequeño.ico);
    background-repeat: no-repeat;
     display: block;
     text-indent: -9999px; /* hides the link text */
}
.deleteButton {
    background:url(Images/deletePequeno.ico);
    background-repeat: no-repeat;
     display: block;
     text-indent: -9999px; /* hides the link text */
}

.left 
{
    float:left
}
.right {
    float: right;

}
.navBar {
background-color: #F7921E;
height: 48px;
}

/*//////////TABLA LISTADO /////////////////////////*/
table { 
color: #333;
/*font-family: Helvetica, Arial, sans-serif;*/
/*width: 640px;*/ 
border-collapse: 
collapse; border-spacing: 0; 
margin-left:auto; 
    margin-right:auto;
}

td, th { 
border: 1px solid transparent; /* No more visible border */
height: 30px; 
transition: all 0.3s;  /* Simple transition for hover effect */
}

th {
background: #5DBCD2;  /* Darken header a bit */
font-weight: bold;
border: 1px solid #CCC;
}

td {
background: #FAFAFA;
text-align: center;
}

/* Cells in even rows (2,4,6...) are one color */ 
tr:nth-child(even) td { background: #F1F1F1; }   

/* Cells in odd rows (1,3,5...) are another (excludes header cells)  */ 
tr:nth-child(odd) td { background: #FEFEFE; }  

tr td:hover { background: #666; color: #FFF; } /* Hover cell effect! */

/*///////////////////////////////*/

.title {
/*font-family: 'Montserrat', sans-serif;*/
 /*width: 500px;*/
 font-weight: bold;
}
.greet {
font-size: 0.78em;
}
.textInfo {
width:50%;
/*height:100%;*/

}
/*///////////////////////////////////////*/
.listView {
margin-left: 0px;
list-style: none outside none;
}
ul{
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
.metrouicss .listview:before, .metrouicss .listview:after {
display: table;
content: "";
}
/*///////////////////////////////////////*/
.okButton {
    background: -moz-linear-gradient(center top , #ff6600 0px, #ff6600 100%) repeat scroll 0 0 transparent;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 5px 5px 5px 5px;
    color: #FFFFFF;
    opacity: 0.75;
    padding: 6px 10px;
    margin-top:5px;
    display:block;
        margin:0px auto;
}
.okButton {
    transition: opacity 0.2s ease 0s;
}
.footer {
    width: 100%;
    height: 100px;
    background: none repeat scroll 0% 0% rgb(138, 188, 203);
    margin-top:50px;
    color: rgb(0, 0, 0);
    font-size: 0.7em;
    border-top: 1px solid rgb(98, 143, 156);
}
.logo {
width:50%
}
.textHeader {
width:63%
}
.greetTime {
font-size: 0.58em;
/*width: 15px;*/

}


.header {
    height: 122px;
    width: auto;
    margin-top:20px;
   /*margin-left:5%;*/
    /*margin: 0px auto;*/
}


/* Styles for basic forms
-----------------------------------------------------------*/
fieldset {
    border: 1px solid #ddd;
    padding: 0 1.4em 1.4em 1.4em;
    margin: 0 0 1.5em 0;
}

legend {
    font-size: 1.2em;
    font-weight: bold;
    color:black
}

textarea {
    min-height: 75px;
}

.editor-label {
    margin: 1em 0 0 0;
}

.editor-field {
    margin: 0.5em 0 0 0;
}


/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error {
    color: #f00;
}

.field-validation-valid {
    display: none;
}

.input-validation-error {
    border: 1px solid #f00;
    background-color: #fee;
}

.validation-summary-errors {
    font-weight: bold;
    color: #f00;
}

.validation-summary-valid {
    display: none;
}

/*CSS Aditions*/

BODY { font-size: 1em; margin: 0; }
DIV#header DIV.title, DIV.item H3, DIV.item H4, DIV.pager A
{
/*font: bold 1em "Arial Narrow", "Franklin Gothic Medium", Arial;*/
}
A#loginLink {
   font-size:1.5em;
}
/*DIV#header { background-color: #5DBCD2; border-bottom: 2px solid #111; color: black; }*/
DIV#header DIV.title { font-size: 2em; padding: .6em; }
DIV#title { font-size: 2em; padding: .6em;float:right }
DIV#headerImages { float:left}
/*DIV#content { border-left: 2px solid gray; margin-left: 9em; padding: 1em; }*/
DIV#categories { float: left; width: 8em; padding: .3em; }
DIV.item { border-top: 1px dotted gray; padding-top: .7em; margin-bottom: .7em; }
DIV.item:first-child { border-top:none; padding-top: 0; }
DIV.item H3 { font-size: 1.3em; margin: 0 0 .25em 0; }
DIV.item H4 { font-size: 1.1em; margin:.4em 0 0 0; }
DIV.pager { text-align:right; border-top: 2px solid silver;
padding: .5em 0 0 0; margin-top: 1em; }
DIV.pager A { font-size: 1.1em; color: #666; text-decoration: none;
padding: 0 .4em 0 .4em; }
DIV.pager A:hover { background-color: Silver; }
DIV.pager A.selected { background-color: #353535; color: White; }
DIV#categories A
{
font: bold 1.1em "Arial Narrow","Franklin Gothic Medium",Arial; display: block;
text-decoration: none; padding: .6em; color: Black;
border-bottom: 1px solid silver;
}
DIV#categories A.selected { background-color: #666; color: White; }
DIV#categories A:hover { background-color: #CCC; }
DIV#categories A.selected:hover { background-color: #666; }

And heres the css file i downloaded

/* Metro Tiles
-------------------------------------------------- */

.bg-color-blue {
   background-color: #0072BC !important;
}
.bg-color-blueDark {
   background-color: #662D91 !important;
}
.bg-color-green {
   background-color: #01a31c !important;
}
.bg-color-greenDark {
   background-color: #008641 !important;
}
.bg-color-red {
   background-color: #bc1c48 !important;
}
.bg-color-yellow {
   background-color: #ffc40d !important;
}
.bg-color-orange {
   background-color: #CD4900 !important;
}
.bg-color-pink {
   background-color: #c3325f !important;
}
.bg-color-purple {
   background-color: #603cba !important;
}
.bg-color-darken {
   background-color: #1c1c1c !important;
}



.metro {
   overflow: hidden;
}


.metro .carousel-control {
   top: 20%;
}



.metro .metro-sections {
   height: auto;
   position: relative;
   overflow: hidden;
   width: 10000px;
}

   .metro-sections h2 {
      margin-left: 5px;
      font-family: "Open Sans",Arial,Helvetica,Sans-Serif;
      font-weight: 300;
      text-transform: lowercase;
   }

.metro .metro-sections .metro-section {
   position: relative;
   float: left;
   /*width: 810px !important;*/
   width: auto;
   height: auto;
   margin-right: 75px;
}


/* fixed widths for tile sections
   units are measured per square tile width, i.e.: tile-span-1 = 160px = 1 square tile width (including margin)
 */
.metro .metro-sections .metro-section.tile-span-1 { width: 160px; margin-left: 0;}
.metro .metro-sections .metro-section.tile-span-2 { width: 320px; margin-left: 0;}
.metro .metro-sections .metro-section.tile-span-3 { width: 480px; margin-left: 0;}
.metro .metro-sections .metro-section.tile-span-4 { width: 640px; margin-left: 0;}
.metro .metro-sections .metro-section.tile-span-5 { width: 640px; margin-left: 0;}
.metro .metro-sections .metro-section.tile-span-6 { width: 800px; margin-left: 0;}
.metro .metro-sections .metro-section.tile-span-7 { width: 960px; margin-left: 0;}
.metro .metro-sections .metro-section.tile-span-8 { width: 1120px; margin-left: 0;}


/*default tile definition */
.metro .tile {
   position: relative;
   display: block;
   float: left;
   margin: 5px;
   padding: 0;
   /*padding-bottom: 1px;*/
   width: 150px;
   height: 150px;
   color: #FFF;
   cursor: pointer;
   overflow: hidden;
   text-decoration: none;
   background-color: #2C83EF;
}
   .metro .tile:hover {
      outline: 3px #225a68 solid;
   }


.scroll {
   -webkit-transition:left 0.6s ease;  /* here the animation is set on 5 seconds */
      -moz-transition:left 0.6s ease;  
        -o-transition:left 0.6s ease;
           transition:left 0.6s ease;
}

/* Metro Tiles Templates
-------------------------------------------------- */
.metro .tile.square.text {
   width: 110px;
   height: 110px;
   padding: 20px;
}
.metro .tile.square.image {
   width: 150px;
   height: 150px;
   padding: 0;
}
   .metro .tile.square.image img {
      max-width: 150px;
      max-height: 150px;
   }

.metro .tile.squarepeek {
   width: 150px;
   height: 300px;
}
   .metro .tile.squarepeek .text-inner {
      width: 110px;
      height: 110px;
      padding: 20px;
   }

.metro .tile.wide.text {
   width: 270px;
   height: 110px;
   padding: 20px;
}
.metro .tile.wide.image {
   width: 310px;
   height: 150px;
}
   .metro .tile.wide.image.collection img {
      max-width: 158px;
      max-height: 150px;
      float: left;
   }

/* template for full image */
.metro .tile.wide.imagetext.wideimage {
   width: 310px;
   height: 150px;
   padding: 0;
}
/* template with normal 80x80 image */
.metro .tile.wide.imagetext {
   width: 270px;
   height: 110px;
   padding: 20px;
}
   .metro .tile.wide.imagetext .textover-wrapper {
      position: absolute;
      bottom: 0;
      width: 270px;
      height: 48px;
      padding: 2px 20px;
      background-color: inherit;
   }

.metro .tile.widepeek {
   width: 310px;
   height: 300px;
}





/* Default Tile
-------------------------------------------------- */

.metro .tile.app .image-wrapper {
   display: block;
   width: 150px;
   height: 80px;
   margin-top: 20px;
   padding: 8px 0;
   text-align: center;
   vertical-align: middle;
}
   .metro .tile.app .image-wrapper img {
      max-width: 80px;
      max-height: 80px;
      margin: 0 auto;
   }
   .metro .tile .app-label {
      bottom: 5px;
      font-size: 12px;
      left: 20px;
      position: absolute;
   }
   .metro .tile .app-count {
      position: absolute;
      right: 20px;
      bottom: 10px;
      font-size: 14px;
      font-weight: bold;
   }

.metro .tile.wide.app {
   width: 310px;
   height: 150px;
}
   .metro .tile.wide.app .image-wrapper {
      width: 310px;
   }


.image-wrapper span.icon {
   font-size: 80px; 
   height: 80px; 
   line-height: 80px; 
   width: 80px;
}

/*
-------------------------------------------------- */

.metro .tile.square.text .text-big {
   font-size: 76px;
   line-height: 76px;
   text-align: left;
   overflow: hidden;
}
.metro .tile.square.text.tilesquareblock .text {
   font-size: 14px;
   font-weight: bold;
   text-align: left;
   overflow: hidden;
}

/* normal header in 1 line of wrapped text*/
.metro .tile .text-header {
   font-family: "Open Sans",Arial,Helvetica,Sans-Serif;
   font-weight: 300;
   font-size: 34px;
   line-height: 36px;
   max-height: 36px;
   text-align: left;
   overflow: hidden;
}
/* One string of large text wrapped over a maximum of three lines.*/
.metro .tile .text-header3 {
   font-family: "Open Sans",Arial,Helvetica,Sans-Serif;
   font-weight: 300;
   font-size: 34px;
   line-height: 36px;
   text-align: left;
   max-height: 110px;
   overflow: hidden;
}

/* 1 line of regular text (not wrapped) */
.metro .tile .text {
   font-size: 15px;
   line-height: 18px;
   height: 18px;
   font-weight: normal;
   text-align: left;
   overflow: hidden;
}

/* regular text wrapped over a maximum of 2 lines */
.metro .tile .text2 {
   font-size: 15px;
   font-weight: normal;
   line-height: 20px;
   max-height: 44px;
   overflow: hidden;
   text-align: left;
}

/* regular text wrapped over a maximum of 3 lines */
.metro .tile .text3 {
   font-size: 15px;
   line-height: 18px;
   font-weight: normal;
   text-align: left;
   max-height: 56px;
   overflow: hidden;
}

/* regular text wrapped over a maximum of 4 lines */
.metro .tile .text4 {
   font-size: 15px;
   line-height: 18px;
   font-weight: normal;
   text-align: left;
   max-height: 72px;
   overflow: hidden;
}

/* regular text wrapped over a maximum of 5 lines */
.metro .tile .text5 {
   font-size: 15px;
   line-height: 18px;
   font-weight: normal;
   text-align: left;
   max-height: 92px;
   overflow: hidden;
}

/* Image Only Tiles
-------------------------------------------------- */
.metro .tile.square.image img {
   max-width: 150px;
   max-height: 150px;
}



/* Wide Text Only Tiles
-------------------------------------------------- */

.metro .tile .column {
   display: block;
   float: left;
   width: 130px;
}

.metro .tile .column2-label  {
   display: block;
   float: left;
   width: 90px;
}
.metro .tile .column2-text {
   display: block;
   float: left;
   width: 160px;
}

.metro .tile .column3-label  {
   display: block;
   float: left;
   width: 50px;
}
.metro .tile .column3-text {
   display: block;
   float: left;
   width: 200px;
}


/* Wide Image Only Tiles
-------------------------------------------------- */
.metro .tile.wide.image .mini-tiles {
   display: inline-block;
   float: left;
   width: 152px;
   height: 150px;
}
.metro .tile.wide.image .mini-tiles img {
   display: inline-block;
   float: left;
   max-width: 75px;
   max-height: 75px;
   border-left: 1px solid #2A2A2A;
}

/* Wide Image & Text Tiles
-------------------------------------------------- */
.metro .tile.wide.imagetext .column-text,
.metro .tile.wide.text .column-text {
   display: block;
   float: left;
   width: 180px;
   padding-left: 10px;
}
.metro .tile.wide.text .column-text-big {
   display: block;
   float: left;
   width: 80px;
}

.metro .tile.wide.imagetext .image-wrapper {
   display: block;
   float: left;
   width: 80px;
   height: 80px;
}
   .metro .tile.wide.imagetext .image-wrapper img {
      max-width: 80px;
      max-height: 80px;
   }


/* ListView
 -------------------------------------------------- */
.listview-container.grid-layout {
   border: solid 2px rgba(0, 0, 0, 0.13);
   height: 240px;
   overflow: auto;
   padding: 2px;
   background-color: #FFF;
}


.mediumListIconTextItem {
   display: inline-block;
   position: relative;
   vertical-align: top;;
   width: 282px;
   height: 70px;
   padding: 5px;
   margin-bottom: 7px;
   margin-right: 24px;
   border: solid 3px transparent;
   overflow: hidden;
   background-color: #FFF;
   cursor: pointer;
}
   .mediumListIconTextItem:hover {
      border: solid 3px #b3b3b3;
      background-color: #b3b3b3;
   }

   .mediumListIconTextItem img.mediumListIconTextItem-Image {
      display: inline-block;
      vertical-align: top;;
      width: 60px;
      height: 60px;
      margin: 5px;
   }
   .mediumListIconTextItem .mediumListIconTextItem-Image[class^="icon-"],
   .mediumListIconTextItem .mediumListIconTextItem-Image[class*=" icon-"] {
      display: inline-block;
      width: 60px;
      height: 60px;
      font-size: 60px;
      line-height: 60px;
      margin: 5px;
   }
   .mediumListIconTextItem .mediumListIconTextItem-Detail {
      display: inline-block;
      vertical-align: top;;
      margin: 5px;
   }


.mediumListIconTextItem.selected {
   background-color: #4617b4;
}
   .mediumListIconTextItem.selected:after {
      position: absolute;
      top: 5px;
      right: 5px;
      width: 16px;
      height: 16px;
      font-family: 'IcoMoon';
      content: "\e03c";
      color: #FFF;
      font-size: 16px;
   }

   .mediumListIconTextItem.selected:hover {
      border: solid 3px #b3b3b3;
      background-color: #4617b4;
   }
   .mediumListIconTextItem.selected .mediumListIconTextItem-Detail,
   .mediumListIconTextItem.selected .mediumListIconTextItem-Detail h4,
   .mediumListIconTextItem.selected .mediumListIconTextItem-Detail h6 {
      color: #FFF;
   }






/* Special undocumented tiles for ads
-------------------------------------------------- */
#ad-container {
   background-color: #0072BC;
   height: 90px;
   margin-top: 10px;
   text-align: center;
   width: 100%;
}

/*Button (125x125)*/
.metro .tile.ad.ad125 {
   width: 125px;
   height: 125px;
   padding: 12px 13px 13px 12px;
}

/*Small Rectangle (180x150)*/
.metro .tile.wide.ad.ad125 {
   width: 180px;
   height: 150px;
   padding: 0 65px;
}

Upvotes: 0

Views: 495

Answers (2)

Lukas Greso
Lukas Greso

Reputation: 492

it seems that stylesheets are loaded, but from basic look at the Metro Tiles CSS I decided that you forgot to put metro class to any parent of your tile, for example add class to your content

<div id="content" class="metro">

Upvotes: 1

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196236

All the rules from the downloaded file that affect the .tile class start like this .metro .tile which means that the .tile element must be a descendant of a .metro element (an element with class metro)

You html does not show your link being inside a .metro element so the styles do not apply ..

Upvotes: 2

Related Questions