CSS issues

Damond · September 5, 2015

Hello everyone.

Its not often that you will find me posting here looking for help but I have a problem with my CSS that I just can't put my finger on. Hopefully someone here can help.

So my site offers three color themes, because lets face it my preferred colors may not be the preferred colors of all my player. Moving on....

To change between the colors we added a row to the users table and a function in the preferences that allows you to change between any of the three with just a click.

Make make the change work we added a bit of code to the top of the header.

<?php
       if ($ir['temp']==3) {
           print "<link href='CSS/loggedin3.css' rel='stylesheet' type='text/css' media='all'>";
       } elseif ($ir['temp']==2) {
           print "<link href='CSS/loggedin2.css' rel='stylesheet' type='text/css' media='all'>";
       } else {
           print "<link href='CSS/loggedin.css' rel='stylesheet' type='text/css' media='all'>";
       }
?>

Pretty simple. Each CSS page is exactly like the other with the exception of calling to a different images folder and color codes.

Here is where things get interesting. This is what each index page of the site is supposed to look like.:

[ATTACH=CONFIG]2180[/ATTACH]

Now when switching to the blueish color template:

[ATTACH=CONFIG]2181[/ATTACH]

And just to prove that the CSS is correct, here is the code copied and pasted into the red color template:

[ATTACH=CONFIG]2182[/ATTACH]

For five plus months this system has worked perfectly. Now all of the sudden its not. When I use inspect element it shows me the div is there, and the proper CSS but for some reason it is not displaying on either or the secondary color templates.

Anyone with an idea of what I could have done to cause this? I have been updating the site but there is nothing I have done that should have anyway changed the CSS or the way it is displayed.

Just incase it is needed here is the CSS for that box:

#isla-quest {

   -webkit-border-top-left-radius: 15px;
-webkit-border-top-right-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
-webkit-border-bottom-right-radius: 15px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
-moz-border-radius-bottomleft: 15px;
-moz-border-radius-bottomright: 15px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
   background: rgba(78,0,0,1);
   -moz-box-shadow: 0px 0px 10px #888;
-webkit-box-shadow: 0px 0px 10px #888;
box-shadow: 0px 0px 10px #888;
   border: 1px solid #4F4F4F;
   padding: 5px;
   z-index: 1000;
   text-shadow: 2px 1px 0px rgba(0,0,0,.5);
text-transform: uppercase;
font-family: 'Droid Serif', serif;
font-size: 12px;
color: #FFFFFF;
}

lucky3809 · September 5, 2015

Just a simple question is your color scheme in all 3 css files the same name #isla-quest? If they are not, make sure your class= or id= is matching that of those names, as for your css part is not what is giving you the problem, but the class or id name may be giving you the problem. So check those tables or divs.

KyleMassacre · September 5, 2015

Well technically it shouldn't be set as an id because you are only allowed 1 id in your html with the same selector name. It should be set as a class

[css]

.isla-quest {

-webkit-border-top-left-radius: 15px;

-webkit-border-top-right-radius: 15px;

-webkit-border-bottom-left-radius: 15px;

-webkit-border-bottom-right-radius: 15px;

-moz-border-radius-topleft: 15px;

-moz-border-radius-topright: 15px;

-moz-border-radius-bottomleft: 15px;

-moz-border-radius-bottomright: 15px;

border-top-left-radius: 15px;

border-top-right-radius: 15px;

border-bottom-left-radius: 15px;

border-bottom-right-radius: 15px;

background: rgba(78,0,0,1);

-moz-box-shadow: 0px 0px 10px #888;

-webkit-box-shadow: 0px 0px 10px #888;

box-shadow: 0px 0px 10px #888;

border: 1px solid #4F4F4F;

padding: 5px;

z-index: 1000;

text-shadow: 2px 1px 0px rgba(0,0,0,.5);

text-transform: uppercase;

font-family: 'Droid Serif', serif;

font-size: 12px;

color: #FFFFFF;

}

[/css]

then in your php file it would be:

<div class="isla-quest">
....
</div>

Damond · September 5, 2015

All my DIV's are exactly the same. The only difference is in each CSS page each is color code used.

Here is an example:

print "<div id=isla-quest><table width=95%>
		<tr>
			<td><b>Strength:</b> {$ir['strength']} [Ranked: {$ir['strank']}]</td>
			<td><b>Agility:</b> {$ir['agility']} [Ranked: {$ir['agirank']}]</td>
		</tr>
		<tr>
			<td><b>Defense:</b> {$ir['defense']} [Ranked: {$ir['guarank']}]</td>
			<td><b>Speed:</b> {$ir['speed']} [Ranked: {$ir['spdrank']}]</td>
		</tr>
		<tr>
			<td><b>Labour:</b> {$ir['labour']} [Ranked: {$ir['labrank']}]</td>
			<td><b>IQ: </b> {$ir['IQ']} [Ranked: {$ir['IQrank']}]</td>
		</tr>
		<tr>
			<td colspan='2' align=center><b>Total stats:</b> ";
			$print = $db->query("SELECT * FROM statsbonus WHERE userid = {$userid}");
				if ($db->num_rows($print) > 0) {
					print"{$t} [Ranked: $trank]";

				} else {
					print"{$ts} [Ranked: $tsrank]";
				} 

			print"</td>
		</tr>


	</table>
</div>";

This is right out of my index page. This code never changes. Only the colors based on each CSS page.

KyleMassacre · September 5, 2015

I know we kind of posted at the same time but be sure to check my response. It may yield som unexpected results if you have more than 1 id selector with the same name

Damond · September 5, 2015

I will give it a shot and see what happens.

Damond · September 5, 2015

[MENTION=68711]KyleMassacre[/MENTION] I have tried your suggestion and my results are exactly the same. When using the blue or green templates that div is seen but not displayed properly. Copying the code to the red template it is displayed correctly with the blue colors.

IllegalPigeon · September 5, 2015

Do you have a link to your site?

Will be easier to debug.

KyleMassacre · September 5, 2015

Are you actually fetching the 'temp' column from the users table? It's a lame question l, I know, I'm just trying to narrow things down.

Also, what temp numbers are associated with the CSS files? For example is 1 red, 2 blue, 3 green? And what happens if you just echo out $ir['temp']?

Edited September 5, 2015 by KyleMassacre

Damond · September 6, 2015

[MENTION=71663]IllegalPigeon[/MENTION] the site is http://flightofdragons.net

[MENTION=68711]KyleMassacre[/MENTION] $ir is a global called to in the header, and the links to all the CSS pages are in the top of the header, so yes we are calling to it. As I said in my first post this system HAS been working up until just the other day.

If you echo our $ir['temp'] you get a number 1,2,or 3.

function temp_change()
{
   global $ir, $c, $userid, $h;
   print"
<div class='box-style5'>
<div class='title7c'>
	<h2>Template</h2>
</div>
</div>
<form action='preferences.php?action=tempchange2' method='post'>
<table width=90%>
	<tr>
		<td><img src=images/red.png width=180></td><td><img src=images/blue.png width=180></td><td><img src=images/green.png width=180></td>
	</tr>
	<tr>
		<td><center><input type='submit' name='1' value='Red' id=submit></center></td>
		<td><center><input type='submit' name='2' value='Blue' id=submit></center></td>
		<td><center><input type='submit' name='3' value='Green' id=submit></center></td>
	</tr>
</table></form><br>
<a href='preferences.php' class='button2'>Back</a>
";
}

function do_temp_change()
{
   global $ir, $c, $userid, $h, $db;
   print"<div id=text3>";
   if ($_POST['1']) {
       $db->query("UPDATE users SET temp=1 WHERE userid={$userid}");
       print"Your template has been changed to Red, you will see this on your next click.";
   }
   if ($_POST['2']) {
       $db->query("UPDATE users SET temp=2 WHERE userid={$userid}");
       print"Your template has been changed to Blue, you will see this on your next click.";
   }
   if ($_POST['3']) {
       $db->query("UPDATE users SET temp=3 WHERE userid={$userid}");
       print"Your template has been changed to Green, you will see this on your next click.";
   }
   print"</div>";
}

Dayo · September 6, 2015

I could not sign up without manually forcing a form submission via javascript, check your javascript code

Edited September 6, 2015 by Dayo

Dayo · September 6, 2015

You are missing a } on line 2499 for the 2nd theme and 2502 for the 3rd, check your css files with something like CSS Lint

Edited September 6, 2015 by Dayo

IllegalPigeon · September 6, 2015

You are missing a } on line 2499 for the 2nd theme and 2502 for the 3rd, check your css files with something like CSS Lint

Yeah, Dayo hit the nail on the head.

loggedin3.css line 2499

#ward {
background: url(../images/ward.png) no-repeat center center;
height: 500px;

should be

#ward {
background: url(../images/ward.png) no-repeat center center;
height: 500px;
}

loggedin2.css line 2496

#ward {
background: url(../images/ward.png) no-repeat center center;
height: 500px;

should be

#ward {
background: url(../images/ward.png) no-repeat center center;
height: 500px;
}

Damond · September 6, 2015

I could not sign up without manually forcing a form submission via javascript, check your javascript code

Did you get any kind of error code?

[MENTION=64684]Dayo[/MENTION]

[MENTION=71663]IllegalPigeon[/MENTION]

Thank you so much! I have been beating my head against that for days now and it was simply a bracket missed in a copy and paste. I feel like an idiot now.

IllegalPigeon · September 6, 2015

Did you get any kind of error code?
[MENTION=64684]Dayo[/MENTION]

[MENTION=71663]IllegalPigeon[/MENTION]

Thank you so much! I have been beating my head against that for days now and it was simply a bracket missed in a copy and paste. I feel like an idiot now.

No worries. These things happen!

That's why I like using things like Sass and Gulp. You get compile errors if stuff like this happens!

Damond · September 6, 2015

Normally I am much more carful when writing my CSS, but I am just back from a very long summer season of work and was in a rush to get a new system out. I use Coda which I just found out could have verified my CSS and shown me the error right away. This is what I get for being in a hurry. :p

Dayo · September 6, 2015

That is the thing with CSS, there is no error reporting unless you use 3rd party plugins like css lint or as [MENTION=71663]IllegalPigeon[/MENTION] said use a pre-compiler.

When im doing HTML/CSS i use brackets.io with the css/jslint plugins, makes development alot easier.

CSS issues

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation