Styling Document Outside of Root

  • (2 Pages)
  • +
  • 1
  • 2

18 Replies - 1157 Views - Last Post: 17 June 2014 - 12:00 PM Rate Topic: -----

#1 kyle_denney   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 171
  • Joined: 10-August 12

Styling Document Outside of Root

Posted 17 June 2014 - 08:45 AM

Hello,

I have a PHP file that when I put the file inside the root for testing the style is applied and works fine. It is in the header inside style tags so I know it is not a reference issue to a file. However when I put the file outside of the root the styling for this does not work. Is there anything special I should know in regard to this? All the other styling is fine for the document. I am using an includes from the root to the outside folder to include the file from the outside. I make no other changes between the file being inside the root and outside the root other than location. Any help would be appreciated. Thanks!

Is This A Good Question/Topic? 0
  • +

Replies To: Styling Document Outside of Root

#2 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2760
  • View blog
  • Posts: 8,062
  • Joined: 15-January 14

Re: Styling Document Outside of Root

Posted 17 June 2014 - 08:49 AM

If the file isn't being included then you're not using the correct path.
Was This Post Helpful? 0
  • +
  • -

#3 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 15790
  • View blog
  • Posts: 63,277
  • Joined: 12-June 08

Re: Styling Document Outside of Root

Posted 17 June 2014 - 08:50 AM

I'll take a stab and say your relative to absolute paths are jacked up.
Was This Post Helpful? 0
  • +
  • -

#4 kyle_denney   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 171
  • Joined: 10-August 12

Re: Styling Document Outside of Root

Posted 17 June 2014 - 09:04 AM

View Postmodi123_1, on 17 June 2014 - 08:50 AM, said:

I'll take a stab and say your relative to absolute paths are jacked up.


The pathing is not the problem. Everything else that works off the includes is fine. Basically here is how it goes.
User logs in and they are redirected to a file outside the root. That process works fine. The styles on the redirected page work perfectly fine for everything except 1 table. The styles for that are in the head element of this included file. All the other styles are in separate CSS files that are located in the root directory and that works fine. I have tried to put the styles in files in the root for this table but it doesn't work. Any ideas as to why the styling for this one table
would not work? Everything else gets included just fine that I need.

Remember, this only happens if the file is outside the root - not if I copy the file to the root and access it from there. But the includes works just fine.
Was This Post Helpful? 0
  • +
  • -

#5 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2760
  • View blog
  • Posts: 8,062
  • Joined: 15-January 14

Re: Styling Document Outside of Root

Posted 17 June 2014 - 09:06 AM

Quote

The pathing is not the problem.

How do you know that, do you have all error messages enabled and you're checking the HTML source for errors about missing include files?

ini_set('display_errors', 1);
error_reporting(E_ALL);


Quote

Remember, this only happens if the file is outside the root

If it only happens with a certain path, wouldn't that indicate that there is a problem with the path? You should be testing this by pulling up the page in your browser, viewing the HTML source, and making sure that all of the code is there. If it is, then there's a problem with the code. If not, then there's a problem with the path.
Was This Post Helpful? 0
  • +
  • -

#6 kyle_denney   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 171
  • Joined: 10-August 12

Re: Styling Document Outside of Root

Posted 17 June 2014 - 09:25 AM

Here is the pertinent CSS and HTML

<!DOCTYPE html>

<head>
  <meta charset="utf-8" />

  <script src="http://www.helptual.com/javascripts/modernizr.foundation.js"></script>
  <script src="http://www.helptual.com/javascripts/jquery-1.11.0.min.js"></script>

<script>

	.cf:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
	* html .cf { zoom: 1; }
	*:first-child+html .cf { zoom: 1; }

	body, h1, h2, h3 { margin: 0; font-size: 100%; font-weight: normal; }

	code { padding: 0 .5em; }

	body { font-family: 'Helvetica Neue', Arial, sans-serif; }

	h1 { font-size: 2em; }
	h2 { font-size: 1.5em; }
	h1, h2 { margin: .5em 0; font-weight: bold; }

	.rt { width: 100%; font-size: 0.75em;/*12*/ line-height: 1.25em;/*15*/ border-collapse: collapse; border-spacing: 0; }

	.rt th,
	.rt td { margin: 0; padding: 0.4166em;/*10*/ vertical-align: top; border: 1px solid #babcbf; background: #fff; }
	.rt th { text-align: left; background: white; color: black; font-family: 'Helvetica Neue', Arial, sans-serif; border-bottom: 1px solid; border-bottom-color: red; }

	table {
	  display: block;
	  height: 300px;
	  overflow-y: scroll;
	}

    body {
        background-color: red; //THIS IS FIRING JUST FINE AND CHANGES THE BACKGROUND COLOR TO RED BUT THE OTHER THINGS ARE NOT FORMATTING PROPERLY WHEN OUTSIDE THE ROOT
    }

	@media only screen and (max-width: 40em) { /*640*/

		#rt1 { display: block; position: relative; width: 100%; }
		#rt1 thead { display: block; float: left; }
		#rt1 tbody { display: block; width: auto; position: relative; overflow-x: auto; white-space: nowrap; }
		#rt1 thead tr { display: block; }
		#rt1 th { display: block; }
		#rt1 tbody tr { display: inline-block; vertical-align: top; }
		#rt1 td { display: block; min-height: 1.25em; }

		#rt2 { display: block; position: relative; width: 100%; }
		#rt2 thead { display: block; float: left; }
		#rt2 tbody { display: -webkit-box; overflow-x: auto; }
		#rt2 th,
		#rt2 tr,
		#rt2 td { display: block; }

		/* sort out borders */

		.rt th { border-bottom: 0; }
		.rt td { border-left: 0; border-right: 0; border-bottom: 0; }
		.rt tbody tr { border-right: 1px solid #babcbf; }
		.rt th:last-child,
		.rt td:last-child { border-bottom: 1px solid #babcbf; }

	}

</script>

</head>
        <body>

            <div class="row page_wrap">
                <!-- page wrap -->
                <div class="twelve columns">
                    <!-- page wrap -->

                    <div class="row">
                        <div class="nine columns header_nav">
                            <ul id="menu-header" class="nav-bar horizontal">
                                                          </ul>
                                </li>
                                <li class=""><a href="login.php">Login</a></li>

                            </ul>
                            <script type="text/javascript">
                                //<![CDATA[
                                $('ul#menu-header').nav - bar();
                                //]]>
                            </script>
                        </div>

                        <div class="three columns header_logo">
                            <img src="images/BannerSmallNoShadow.png" class="hide-for-small" alt="site name" />
                        </div>

                    </div><!-- END Header -->
								
					<div style="clear: both"></div>
													
					<label id="newslettererror" style="width: 100%; color: red;"><?php echo $error ?></label>
					<br />
					<div class="row">
						<div class="twelve columns">

							<dl class="tabs four-up">
								<dd class="active"><a href="#simple1">Purchase Details</a></dd>
								<dd><a href="#simple2">Purchaser Information</a></dd>
								<dd><a href="#simple3">User Details</a></dd>
								<dd><a href="#simple4">Tools</a></dd>
							</dl>

							<ul class="tabs-content">
								<li class="active" id="simple1Tab">
                      				<br />
									<h3 id="purdet" style="font-size: 22px;">Purchase Details</h3>
									<br />
									<h5 id="createnewacct" style='<?php echo $hasPurchaseInfo ?>'>You do not have any purchase information.
									<br />Please check out our <a href="featurecomparison.php">Feature Comparison</a> for details on products to try or purchase.</h5>
										
										<!--http://jasonbradley.me/bootstrap-responsive-tables/-->
	
									<div id="divpurdet">
										<div>
										<table id="rt1" class="rt cf">
												<thead class="cf">
													<tr>
													<th>Transaction ID</th>
													<th>Payment Amount</th>
													<th>Product Name</th>
													<th>Date of Purchase</th>
													</tr>
												</thead>
												<tbody>
												
												<?php
												$count = 0;

												while ($count < count($registrationkey))
												{
													echo "<tr>";

													echo "<td>";
													echo $transactionid[$count];
													echo "</td>";
																	
													echo "<td>";
													echo $paymentamount[$count];
													echo "</td>";
																	
													echo "<td>";
													echo $productname[$count];
													echo "</td>";
																	
													echo "<td>";
													echo $dateofpurchase[$count];
													echo "</td>";
																		
													echo "</tr>";

													$count = $count + 1;
												}
												?>
												
												</tbody>
												</table>
											</div>
										
									</div>

								</li>
								<li id="simple2Tab">
					
								</li>
								<li id="simple3Tab">
						
								</li>
								<li id="simple4Tab">
									
								</li>
							</ul>

					</div> <!-- end page wrapper -->
			</div> <!-- end page wrapper -->

           

        </body>
</html>




I also have error handling enabled on the server side and no errors show in the log.

This post has been edited by andrewsw: 17 June 2014 - 09:57 AM
Reason for edit:: Removed previous quote

Was This Post Helpful? 0
  • +
  • -

#7 andrewsw   User is offline

  • palpable absurdity
  • member icon

Reputation: 6905
  • View blog
  • Posts: 28,565
  • Joined: 12-December 12

Re: Styling Document Outside of Root

Posted 17 June 2014 - 09:59 AM

You have placed your css within script-tags, they should be style-tags.
Was This Post Helpful? 0
  • +
  • -

#8 kyle_denney   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 171
  • Joined: 10-August 12

Re: Styling Document Outside of Root

Posted 17 June 2014 - 10:06 AM

Sorry, that was my typo from copying from the IDE into the code tags. It has been fixed from script to style and still does not fix the issue.
Was This Post Helpful? 0
  • +
  • -

#9 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2760
  • View blog
  • Posts: 8,062
  • Joined: 15-January 14

Re: Styling Document Outside of Root

Posted 17 June 2014 - 10:11 AM

What exactly is the problem with that page, you're saying that the CSS information listed there is not being applied to the page?
Was This Post Helpful? 0
  • +
  • -

#10 kyle_denney   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 171
  • Joined: 10-August 12

Re: Styling Document Outside of Root

Posted 17 June 2014 - 10:19 AM

View PostArtificialSoldier, on 17 June 2014 - 10:11 AM, said:

What exactly is the problem with that page, you're saying that the CSS information listed there is not being applied to the page?


Basically the only thing that is not happening that is supposed to is the styling of the table on the page. EVERYTHING else style's the way it is supposed to. The links, background, font sizes, font family everything is fine as far as that goes. The only portion that is not styling properly is the table and the styling for the table is in the head of the document in style tags.

When I put that file inside the root the table gets styled properly just fine with the styles being inside style tags at the head of the document. When I move the page outside the root the styles ONLY FOR THE TABLE do not work. But the only styling for the table is located in the head of the document within the style tags as is shown.
Was This Post Helpful? 0
  • +
  • -

#11 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 15790
  • View blog
  • Posts: 63,277
  • Joined: 12-June 08

Re: Styling Document Outside of Root

Posted 17 June 2014 - 10:23 AM

You are saying everything in the :

041	    @media only screen and (max-width: 40em) { /*640*/


is not working when outside of the root?
Was This Post Helpful? 0
  • +
  • -

#12 kyle_denney   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 171
  • Joined: 10-August 12

Re: Styling Document Outside of Root

Posted 17 June 2014 - 10:26 AM

View Postmodi123_1, on 17 June 2014 - 10:23 AM, said:

You are saying everything in the :

041	    @media only screen and (max-width: 40em) { /*640*/


is not working when outside of the root?


Yes That is correct. The table is supposed to become responsive when below the 40em and change the layout so phones and tablets can better view it. But the @media doesn't seem to be applied when outside the root for some reason. Am I missing something?
Was This Post Helpful? 0
  • +
  • -

#13 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 15790
  • View blog
  • Posts: 63,277
  • Joined: 12-June 08

Re: Styling Document Outside of Root

Posted 17 June 2014 - 10:31 AM

Are you having a conflict with 'only'?

Quote

The keyword ‘only’ can also be used to hide style sheets from older user agents.

http://www.w3.org/TR...queries/#media0
Was This Post Helpful? 0
  • +
  • -

#14 kyle_denney   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 171
  • Joined: 10-August 12

Re: Styling Document Outside of Root

Posted 17 June 2014 - 10:46 AM

View Postmodi123_1, on 17 June 2014 - 10:31 AM, said:

Are you having a conflict with 'only'?

Quote

The keyword ‘only’ can also be used to hide style sheets from older user agents.

http://www.w3.org/TR...queries/#media0


No. It does not seem to be a problem with only. I took it out and just left it as a plain media screen query and it still did not help. Basically inside the root as is the file renders properly the HTML and CSS. It even renders properly everything when outside the root EXCEPT the table. That is the only thing that the CSS doesn't seem to want to be properly applied to in this case.
Was This Post Helpful? 0
  • +
  • -

#15 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2760
  • View blog
  • Posts: 8,062
  • Joined: 15-January 14

Re: Styling Document Outside of Root

Posted 17 June 2014 - 10:50 AM

The CSS and the path have nothing to do with each other, it doesn't matter that it is outside the root. There is nothing in the CSS that has anything to do with the path.

Use your browser's developer tools to inspect the table. It will list which rules apply to the table, and which rules are being overridden. Find the rules and make sure they aren't being overridden. If you don't even see the rules being applied to the table then the selectors aren't matching. Maybe remove the entire @media line and see if that makes a difference.
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2