Css not being read WP

Question

I know this is probably really easy, but I am just about ready to throw my laptop out the window with this...

I have been trying to make a bit of javascript work within my one of my web pages, but failing this I made a back up of my previous code and tried to restore what it was before... but it has completely messed up my gallery page (I haven't touched this page) and it isn't linking up with my CSS - I really don't understand it.

The images in the gallery are supposed to be horizontal not vertical.

Please help, I am very new to Wordpress and understand my coding may be amateur

Link: Gallery

/*

Theme Name: tigertone Theme URI: http://tigertonestudio.com Description: Version: 1.0 */

#clear {
clear: both;
}

body {
margin:0;
padding:0;
height: 100%;
background: url('images/bg.png') repeat;
text-align:left;
font-family: "Verdana", Arial, Helvetica, sans-serif;
font-size:.8em;
}

#brushblack {
background: url('images/brushblack.png') repeat;
height: 100%;
}

#header{
width:1000px;
height:118px;
margin: 0 auto;
padding:50px 0 25px 0;
clear: both;
}

#content {
font-family:'aller', Arial, Helvetica, sans-serif;  
margin:0 auto;
width:100%;
padding:0;
text-align:left;
vertical-align: middle; 
}

.blackcontent {
background: url('images/bgdark.png') repeat;
width:100%;
padding:40px 0;
height:100%;
overflow:hidden;
margin:0 auto;
vertical-align: middle;
}

.content{
margin:0 auto; 
width:1000px;
}

.entry {
color:#000000;
}




.ngg-albumoverview .ngg-album-compact { float: left; margin-right: 20px;}


.ngg-gallery{
width:100%;
float: left;
}

.ngg-gallery-thumbnail-box {
width: 25% !important;
float: left;
margin-bottom:10px;
border:5px
border-color:white;
}


===================
Classes Page
===================

.classes {
margin-bottom: 75px;
}

.classes {
width: 450px;
float: left;
margin: 10px 8px 0 0;
}

.classes:nth-child(4n+4) {
margin-right: 0;
}

.classes a {
text-decoration: none;
}

.classes h2,
.classes .classes-bio h2 {
font-weight: 700;
font-size: 1.5em;
text-transform: none;
margin: 15px 0 5px 12px;
}

.classes .classes-bio p {
color: #666;
line-height: 21px;
margin: 0 70px 18px 70px;
}

.classes .classes-bio p strong {
font-weight: 700;
}


.classes a.read-more {
color: #D1883E;
display: block;
margin: 12px 0 0 0px;
}

.classes a.read-more:hover {
text-decoration: underline;
}

.classes .classes-bio {
position: fixed;
width: 600px;
height: 90%;
display: none;
z-index: 9998;
padding-bottom: 10px;
background-color: #eaeaea;
}

.classes .classes-bio .close-button {
position: absolute;
top: -17px;
right: -17px;
z-index: 9999;
cursor: pointer;
}

.classes .classes-bio img.profile {
width: 442px;
margin: 25px 181px 8px;
}

.classes .classes-bio h2 {
text-align: center;
margin-bottom: 6px;
}

.classes .classes-bio {
font-size: 1.1em;
margin-bottom: 28px;
}

.classes .classes-bio p {
font-size: 0.9em;
color: #000;
text-align: center;
}


.mask {
position: absolute;
left: 0;
top: 0;
display: none;
z-index: 9997;
background-color: #000;
}

HTML:

<h1>Gallery</h1>
<div class="ngg-gallery">
<div class="ngg-galleryoverview">
<div class="ngg-gallery-thumbnail-box">
[nggallery id=1]
</div>
</div>
</p>
</div>

Answer 1

Looks likes there's a problem with your global.js file. The jQuery library which comes with Wordpress is in no-conflict mode, which means you can't use the $ sign. Solution is to surround the code with jQuery(document).ready(function ($) {

So, in your case, change the global.js file to:

jQuery(document).ready(function ($) {    
     $('.classes a').click(function(e) {    
         e.preventDefault();

    // Get the dimensions of the user's screen
    var maskHeight = $(document).height();
    var maskWidth = $(window).width();

    // Set the mask overlay to fill the entire screen
    $('.mask').css({'width':maskWidth,'height':maskHeight});

    // Fade in the mask overlay
    $('.mask').fadeTo(600, 0.7);

    // Get the dimensions of the user's browser
    var winHeight = $(window).height();
    var winWidth = $(window).width();

    // Set the bio pop-up to be in the middle of the screen
    $('.classes-bio').css('top', winHeight/2-$('.classes-bio').height()/2);
    $('.classes-bio').css('left', winWidth/2-$('.classes-bio').width()/2);

    // Fade in the bio pop-up
    $(this).parent('.classes').find('.classes-bio').delay(610).fadeIn(600);
});

// Click the mask or close button to fade out the pop-up and the mask
$('.mask, img.close-button').click(function(e) {

    $('.classes-bio').fadeOut(600);

    $('.mask').delay(610).fadeOut(600);
});

});

See more here

I don't know if it will solve your problem, but you could give it a try!

Answer 2

There is a part in your styles.css file that is listed like this:

a:link{
    font-color:#000;
a:hover{
    color:#D1883E}

It looks like you are missing a closing bracket after the first a:link style block.

Answer 3

Line 396 of style.css has a missing }, could be causing your issues.

There are some un-commented comments in there too...

===================
Classes Page
===================

(and the other ones like it) Should be like this

/*
===================
Classes Page
===================*/