My css changes are suddenly not being reflected...

[Jim R]

The page in question for example:

 

http://courtsideindiana.com/tag/eric-hunter/

 

The contents are all custom code (some with help from here, actually), as is the .css the page it's linked to.  As of last night, the way that page looks now is how I intended it to look.  I've had to use some  -- !important -- tags to override the site's stylesheets, but for the most part it's drawing easily from my .css.

 

 

This morning I changed the schools listed under Final List from an unordered list to the table.  Here is the code for that:

 

Ultimately this is all within:    <div class="finalList">

elseif ($line['commit'] == 'l') {
					echo '<span>Final List</span>';
					echo '<table>';
					// Turn CSV into unordered list
					$college = $line['college'];
					$college = explode(",",$college);
					asort($college);
					foreach ($college as $collegeList) {
					echo '<tr><td>' . $collegeList . '</td></tr>';
					}
					echo '</table>

Closed at the end with </div>

 

It prints out just fine on the page, relative to the PHP.

 

In changing from the list to the table, I wanted to add a 5px padding to the top of the table.  Nothing I do affects it.  

 

.finalList table {

padding-top: 5px; !important

}

 

 

Just to test it, I've tried tr, td.  I have Final List in a <span>, and I've even tried to add 5px padding-bottom to it.  Nothing.

 

 

So just test the CSS, if you go look at the top of the page, currently the player's name and his picture are elements I've been controlling with my CSS.  The image's max height is normally set at 400px.  Right now it's set at 100px.  His name, Eric Hunter, normally the color of the font is #666, but right now it's set at #FFF.  It shouldn't really be visible.  

 

I've made sure the link to the stylesheet is correct.  Commenting out the link to the CSS puts everything in a vertical path downward.  

 

I've checked with my host to make sure there weren't any issues.  I've been playing around with the CSS of this page for about a week, adding elements, moving elements around, some via CSS, some via PHP, mostly juggling to get it to look good one a webpage and a phone.  This morning, none of my changes affect the site.  

 

And I know when I change the PHP file, it shows up.  You'll see a little message right below the player's name.  BTW...it's font color should be in #FFF, so basically invisible.  

 

 

 

Here is the whole CSS for everything above the large gray box:  (it's likely haphazard looking)

 

.profileWrap {
	text-align: left !important;
	background-color: #FFF;	padding: 10px;
	margin-bottom: 15px;
	font-variant: normal;
	text-transform: none;
	font-size: 12px;
	font-family: "Book Antiqua";
	font-weight: normal;
	}


	

.commitment {
	margin-left: 20px;
}	
	


.playerImage {
	float: left;
	margin: 20px;	
	/* 
height: 250px; */
	width: 300px;

}


.playerImage img {
	max-height: 100px;
	max-width: 300px;
/* 
	padding: 2px;
 */
	margin-left: 20px
	border: thin solid #999999;
	/* float: left; */
	position: relative;
	margin-right: 10px;
	margin-bottom: 10px;
	background-color: #333333;
}

.playerProfile {
	color: #FFF;
	/*text-shadow: 2px 2px #cccccc;*/
	font-size: 24px;
	font-family: "Book Antiqua";
	position: relative;
	float: left;
	/* width: 45%; */
	padding-left: 20px;
	padding-right: 20px;
	white-space: pre-wrap;
	font-weight: bold;
}


	
.pName {
	font-size: 200%;
	line-height: 125%;	
	}	
	
.profileDim {
	color: #ccc;	
	}	
	
.playerData {
	float: left;
	white-space: nowrap;
	padding-left: 3px;
	line-height: 125%;
	
}	

	
.year {
/* 
	float: left;	
 */
	}


.profileWrap hr {

	margin-bottom: 20px;
}



.commitment li {
	list-style-type: none;	
	}
	
.finalList table {
	padding-top: 5px; !important	

}

.rank {
	float: left;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 5px;
}

Edited September 18, 2017 by Jim R

[cyberRobot]

The !important needs to go before the semi-colon.

 

With that said, is there a reason you're switching to an HTML table? An unordered list tag is better for listing things. HTML tables should be reserved for displaying data tables.

[Jim R]

It will expand over time, I'm sure.  It will likely include dates for visits.  For other players, there will longer lists of schools which have offered scholarships, and as we confirm visits by the school to see the player, the list will include those as well.  At that point, I'll want additional columns.

 

 

 

Keep in mind, the reason I'm posting here is because none of my changes are working, even elements already defined by my CSS aren't changing, such as that image the player's name (and my side note to PHP Freaks).  

 

Putting the !important outside the semi-colon didn't have any effect.

Edited September 18, 2017 by Jim R

[Psycho]

Linked content (such as a style sheet) can be cached by the browser. So, if you make a change to a style sheet it may not be reflected when you reload the page because the browser will pull the content from the cached copy. Some things will cause the cached file to be refreshed or not and I don't know what all of those are.

 

So, when making such changes just force a refresh. Press CTRL-F5 after loading the page to force a refresh of all content.

[Jim R]

It's been a long time since I've had any caching issues like that on my site, so at least now the changes I put up to exaggerate the point (all white fonts, picture too small) showed up.  I'm still not able to get the padding I need atop my table.  

 

 

.finalList table {

padding-top: 5px !important;

}

 

.finalList span {

padding-bottom: 5px !important;

}

 

 

Neither of these two are working.  

[Sepodati]

Most browsers have a nice debugging tool for this. Right click on whatever you're trying to adjust and choose "Inspect". Sometimes it's "Inspect Element".

 

On the split screen that pops up, you should see a "Styles" tab in the middle. This will show you the resulting CSS styles applied to the element and which are in effect. You can actually change the values shown here or add new ones to see the change. You can click the whole effect on/of by using the checkbox before each line.

 

I think you may find that there's something else overriding the styles you're setting above.

 

-John

[Jim R]

I work in that mode daily.  There isn't anything over riding it.  It shows up in the side panel.  It's just not creating the padding to the point of separating it from table.  

Edited September 18, 2017 by Jim R

[cyberRobot]

Have you tried margin-top?

[Jim R]

I appreciate the help on this.  I decided to stick my 'header' into a <th> then removing the border <th> border.  It cleaned right up.  

[Jim R]

Have you tried margin-top?

 

I did.  My guess is it wasn't playing nicely with the table, so I just lumped it into the table.