[x]
Posted via EE Mobile

Search, ask, and monitor your questions on the go with EE Mobile. Visit Experts Exchange from your mobile device and never be out of touch again.

06/02/2008 at 07:18AM PDT, ID: 23449900
[x]
Attachment Details
[x]
The Solution Rating System

With so many solutions, how can you tell which solutions are most likely to help you and which ones are not? To provide you with a tool to use, we rate our solutions based on various elements that most accurately determine if a solution is a quality solution. To explain what factors affect the solution rating, here are the elements we take into consideration when formulating our solution rating.

  • The Grade of the Solution
  • The Zone Rank of the Expert Providing the Solution
  • The Number of Author and Expert Comments
  • The Number of Experts Contributing
  • The Feedback of the Community

Your Input Matters
Because of the way the system is set up, the most important variable in this equation is you. As a member of Experts Exchange, you are able to cast your vote on the quality of the solutions in regard to how complete, accurate, helpful and easy to understand each solution is. When you provide your feedback, each rating is adjusted accordingly. So, if you see a solution that has a poor rating that you think is a good solution, let us know by rating it. As you do, the rating will be adjusted and will become more accurate for other members of our site.

If you have any suggestions that you would like to make for our rating system, please ask a question in the Suggestions Zone of Community Support.

Thank you!

9.0

Why is my PHP breaking my CSS layout?

Asked by mrhparis in Cascading Style Sheets (CSS), PHP and Databases, PHP Scripting Language

Tags: PHP and HTML with CSS positioning

Hi, there

I'm new to CSS layout and PHP.
I'm building a website that interfaces with a MySQL database using PHP and displays my art and design portfolio on a web page.
I'm having a weird display problem. One of my PHP statements returns data only if the record set IS NOT NULL. Through a series of transitional tables, it displays info from my database ONLY if there are records RELATED to the displayed portfolio piece. For example, when I display a homepage I've designed, other screen shots of the same website are found in the database and displayed in a scrollable div underneath the screenshot of the homepage. The code I'm attaching works great when this is the case, i.e. when THERE ARE related elements in the database.
BUT when there aren't any related clips and the recordset is empty, my CSS-based layout gets blown away. The right-hand column becomes detached, the background color overprints. It's a mess. (Please see attached screen shots.)
When I remove the noted chunk of code from the code snippet below, everything is fine. OR when there is related info in the database, the chunk of code is fine. But if the portfolio clip DOES NOT have any related files in the database, I get the broken screen shot below. I need this code to work in both situations, not just one. Can someone help me trouble shoot this?
Many thanks.
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:
206:
207:
208:
209:
210:
211:
212:
213:
214:
215:
216:
217:
218:
219:
220:
221:
222:
223:
224:
225:
226:
227:
228:
229:
230:
231:
232:
233:
234:
235:
236:
237:
238:
239:
240:
241:
242:
243:
244:
245:
246:
247:
248:
249:
250:
251:
252:
253:
254:
255:
256:
257:
258:
259:
260:
261:
262:
263:
264:
265:
266:
267:
268:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
<link href="CSS/inside.css" rel="stylesheet" type="text/css" />
<!--[if IE 5]>
<style type="text/css"> 
/* place css box model fixes for IE 5* in this conditional comment */
.thrColFix #sidebar1 { width: 180px; }
.thrColFix #sidebar2 { width: 190px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css"> 
/* place css fixes for all versions of IE in this conditional comment */
.thrColFix #sidebar2, .thrColFix #sidebar1 { padding-top: 30px; }
.thrColFix #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]--></head>
 
<body>
 
<div id="container">
  <div id="sidebar1">
  <img src="images/insidepage01.jpg" alt="keyboard" />
 
<!-- Links Div -->
 
<div id="inpostits">
 
<ul>
    <li id="inpostits1"><a href="index.html"></a></li><br />
    <li id="inpostits2"><a href="bio.html"></a></li><br />
    <li id="inpostits3"><a href="working.html"></a></li><br />
    <li id="inpostits4"><a href="clients2.html"></a></li>
    <br />
    <li id="inpostits5"><a href="contact.html"></a></li><br />
    <li id="inpostits6"><a href="javascript:history.go(-1)"></a></li><br />
</ul>
</div>
 
 
 
 
<!-- End Links Div -->	
 
  
  <!-- end #sidebar1 --></div>
  
  
  <div id="mainContent_PORTRES">
   <img src="images/insidepage02.gif" alt="title" />
 
 
<?php 
// Connect database
mysql_connect("localhost","root","root");
mysql_select_db("portfolio") or die("Unable to select database"); 
 
$var = @$_GET['clipid'] ;
 
 
 
$query = "SELECT clips2.clip_pathlrg, clips2.clip_sourcelrg, projects.project_category 
FROM clips2
INNER JOIN projects
ON clips2.clip_id=projects.project_clipid
WHERE clips2.clip_id = '$var'
";
 
 
$result = mysql_query($query);
$row = mysql_fetch_assoc($result);
 
 
$imgsource = $row['clip_sourcelrg']; 
$imgpath = $row['clip_pathlrg']; 
?>
<br /><p>        
<span class="sidehead1">			
<?     echo $row['project_category']; ?>   
</span><br /></p>	
<?	echo "<img src=".$imgpath."/".$imgsource.">";		 
?>
 
<br /><p></p>
 
 
 
 
<!-- This is the RELATED TABLE -->
 
<!-- WHEN I DELETE THIS CHUNK OF CODE, THE DISPLAY RETURNS TO NORMAL IF THERE ARE NO RELATED RECORDS. IT'S FINE, HOWEVER IF THERE ARE RELATED RECORDS -->
 
 
<?php
// This query passes the CLIP_ID primary key to the RELATED TABLE
 
$query = "SELECT related_clipid, related_common FROM related WHERE related_clipid ='$var'";
// Perform Query
 
//RESULT  only shows true or false of the querry exhisting in the DB. Must ust the mysql_fetch_assoc command to actually get the data from the table(s) --MRH
 
$result = mysql_query($query);
while ($row = mysql_fetch_assoc($result)) {
 
// Gets the common integer from RELATED TABLE and assigns it a variable name --MRH
    
$var2 = $row['related_common'];
 
//This query searches the RELATED table for all entries that have the SAME COMMON INTEGER as the CLIP ID that was passed to the first querry. --MRH
 
 
// this is the second query. It passes the $var2 and checks the Related table for all instances of $var2. It returns paths to the selected images. --MRH
 
$query = "SELECT clips2.clip_id, clips2.clip_paththumb, clips2.clip_sourcethumb 
FROM clips2
INNER JOIN related
ON clips2.clip_id=related.related_clipid
WHERE related.related_common ='$var2'
";
 
 
$result = mysql_query($query);
$total_records = mysql_num_rows($result); // the number of records in result set
 
$num_cols = $total_records; // number of cols in the div set to overflow is the same as the total records
$num_rows = 1;  // the number of rows
$num = 0; 
 
if ($total_records > 0)
 
 {
 
	echo "The clips in the window below are related to the portfolio piece above. 
	Scroll through and click on any one to see a larger version.";
}
?>
 
<div id="related_PORTRES">
<?
echo "<table>\n";
// next the loop for the table rows
for ($rows = 0; $rows < $num_rows; $rows++) {
    echo "<tr>\n"; 
    // this is the loop for the table columns
    for ($cols = 0; $cols < $num_cols; $cols++) {
        if ($num < $total_records) { // show records if available (reduce by one because the first record is no. "0" (zero)
            // first create variables with the values of the current record 
			
            $imgsource = mysql_result($result, $num, "clips2.clip_sourcethumb");
			$imgpath = mysql_result($result, $num, "clips2.clip_paththumb");
            $imglink = mysql_result($result, $num, "clips2.clip_id"); 
			
            echo "<td><a href = portresult.php?clipid=".$imglink."><img src=".$imgpath."/".$imgsource."></a><td>\n"; // on the href ADD the php? address to get to the document!!! -MRH
        } else { // show an empty cell
            echo "<td>&nbsp;</td>\n";
        }
        $num++; // raise the number by one for the next record
    }
    echo "</tr>\n"; // there are no more cols in this row, close the table row tag 
}
echo "</table>\n"; // end of the region = closing tag for the table element
 
 
// The second querry is nested inside the FIRST WHERE statement. Otherwise the querry is executed on clips that DON'T HAVE a Foreign Key representative in the RELATED table. -- MRH
}
 
?>
</div>
 
 
 
<!-- END RELATED TABLE. AND END PROBLEM PIECE OF CODING -->
 
 
 
 
 
 
  
  <!-- end #mainContent --></div>
 
<div id="sidebar2_PORTRES"><!-- end #sidebar2 -->
  <img src="images/insidepage03.jpg" alt="mouse_cord" />
  
  
  
  <div id="MouseSideBar">
  
  <img src="images/insidepage06.jpg" class="mousefloat" />
  
  
<?php
  
$sql = "SELECT projects.project_year, projects.project_month, projects.project_date, projects.project_assign, projects.project_result, projects.project_note, clients.client_name, clients.client_describe, clients.client_place 
FROM projects
INNER JOIN clients
ON  projects.project_clientid = clients.client_id
WHERE projects.project_clipid = '$var'";
 
	
$query = mysql_query ( $sql );
$row = mysql_fetch_assoc ( $query );?>
 
<span class="sidebartype">	
<span class="sidedisplay1">Date ><br /></span><? echo $row['project_month']; 
 echo $row['project_date'];?>  &nbsp;
 <? echo $row['project_year']; ?> <br /></span>
 
<span class="sidedisplay1">
Client ><br /></span>
<span class="sidebartype">
<?  echo $row['client_name']; ?><br />
<span class="sidedisplay2">
<?  echo $row['client_describe']; ?><br />
<?   echo $row['client_place']; ?> <br /></span>
<span class="sidedisplay1">The Brief ><br /></span>
<?   echo $row['project_assign'];?><br />
<span class="sidedisplay1">The Results ></span><br /><?   echo $row['project_result']; ?><br />
 
 
 
 
 <?
   echo $row['project_note']; 
  // end of IF statement
  ?>
  
  
  
  
 
  
  
  
 
  
  
  
 </div>
 
 
 
 </div>
 
 
 
  <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
 
<div id="footer">
<ul>
    <li id="first"><a href="index.html">Home</a></li>
    <li><a href="bio.html">My Bio</a></li>
    <li><a href="info.html">What is insiteful arts?</a></li>
    <li><a href="working.html">Portfolio</a></li>    
    <li><a href="working.html">Client List</a></li>
    <li><a href="contact.html">Contact Me</a></li></ul>
    
    
  <!-- end #footer --></div>
<!-- end #container --></div>
 
 
 
</body>
</html>
Attachments:
 
Screen shot of CSS divs going crazy when PHP statement is NULL
Screen shot of CSS divs going crazy when PHP statement is NULL
 
 
Screen shot of CSS working when PHP statement IS NOT NULL
Screen shot of CSS working when PHP statement IS NOT NULL
 
 
Keywords: Why is my PHP breaking my CSS layout?
 
Loading Advertisement...
 
[+][-]06/02/08 07:28 AM, ID: 21692260

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 30-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]06/02/08 07:30 AM, ID: 21692275

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 30-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]06/02/08 08:14 AM, ID: 21692725

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 30-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]06/02/08 08:24 AM, ID: 21692824

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 30-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]06/02/08 09:13 AM, ID: 21693272

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 30-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]06/02/08 09:29 AM, ID: 21693422

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 30-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]06/02/08 11:50 AM, ID: 21694470

View this solution now by starting your 30-day free trial. Setting up your free trial is quick, easy, and secure. We will return you to this solution, unlocked, when you're done.

 

About this solution

Zones: Cascading Style Sheets (CSS), PHP and Databases, PHP Scripting Language
Tags: PHP and HTML with CSS positioning
Sign Up Now!
Solution Provided By: mms_master
Participating Experts: 1
Solution Grade: A
 
 
[+][-]06/02/08 12:05 PM, ID: 21694637

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 30-day free trial to view this Expert Comment or ask the Experts your question.

 
 
Loading Advertisement...
20091111-EE-VQP-91 / EE_QW_2_20070628