[SOLVED] why does this script cause my page to display incorectly

madspof · January 13, 2008

Hi everyone i have this script which displays an image by getting the ur of the image from a database. When the script runs it displays the image but in a completly different place from where i designed it to be. i have attched a picture to show how it incorectly displays

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<!-- DW6 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link rel="stylesheet" href="/emx_nav_right.css" type="text/css">
<script type="text/javascript">
<!--
var time = 3000;
var numofitems = 7;

//menu constructor
function menu(allitems,thisitem,startstate){ 
  callname= "gl"+thisitem;
  divname="subglobal"+thisitem;  
this.numberofmenuitems = 7;
this.caller = document.getElementById(callname);
this.thediv = document.getElementById(divname);
this.thediv.style.visibility = startstate;
}

//menu methods
function ehandler(event,theobj){
  for (var i=1; i<= theobj.numberofmenuitems; i++){
  var shutdiv =eval( "menuitem"+i+".thediv");
    shutdiv.style.visibility="hidden";
}
theobj.thediv.style.visibility="visible";
}

function closesubnav(event){
  if ((event.clientY <48)||(event.clientY > 107)){
    for (var i=1; i<= numofitems; i++){
      var shutdiv =eval('menuitem'+i+'.thediv');
		shutdiv.style.visibility='hidden';
	}  
}
}
// -->
</script>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body onmousemove="closesubnav(event);"> 
<div class="skipLinks">skip to: <a href="#content">page content</a> | <a href="/pageNav">links on this page</a> | <a href="#globalNav">site navigation</a> | <a href="#siteInfo">footer (site information)</a> </div>
<!-- end masthead -->
<div id="pagecell1"> 
  <!--pagecell1--> 
  <img alt="" src="/newsite/tl_curve_white.gif" height="6" width="6" id="tl"> <img alt="" src="/newsite/tr_curve_white.gif" height="6" width="6" id="tr"> 
  <div id="breadCrumb"> 
    <a href="#">Breadcrumb</a> / <a href="#">Breadcrumb</a> / <a href="#">Breadcrumb</a> /
  </div> 
  <div id="pageName"> 
    <h2>Page Name</h2> 
     
  </div> 
  <!--end content -->
  <?php 
include("../connect.php");
$query  = "SELECT picid, userid, url, date FROM userpic";
$result = mysql_query($query);
echo '<table>';
$counter = 1;
$cellsPer = 3;
while($row = mysql_fetch_assoc($result)){
   if($counter%$cellsPer == 0){
      echo '<tr>';
   }
   echo '<td>';
   echo "This is the $number User. <br><br>" . 
   "Name :{$row['picid']} <br>" .
   "Subject : {$row['userid']} <br>" .
   "<img src='{$row['url']}' width='200' height='200'><br>" .
   "Date uploaded : {$row['date']} <br><br><br>";
   echo '</td>';
   if(($counter+1)%$cellsPer == 0){
     echo '</tr>';
   }
}
?>  
  <p> </p>
  <p>   </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <div id="siteInfo"> 
    <img src="" width="44" height="22"><a href="#">About Us</a> | <a href="#">Site
    Map</a> | <a href="#">Privacy Policy</a> | <a href="#">Contact Us</a> | ©2003
    Company Name
  </div> 
</div> 
<!--end pagecell1--> 
</body>
</html>

[attachment deleted by admin]

revraz · January 13, 2008

Since you have Div IDs, I assume you use CSS. So why not just set all the positions there?

madspof · January 13, 2008

well the code is inside a div tag that is position corectly i think the prolem is something to do with the table that iam dynamicaly creating.

here is the css file i am using;

/***********************************************/
/* emx_nav_right.css                           */
/* Use with template Halo_rightNav.html        */
/***********************************************/

/***********************************************/
/* HTML tag styles                             */
/***********************************************/
body{
font-family: Arial,sans-serif;
color: #333333;
line-height: 1.166;	
margin: 0px;
padding: 0px;
background: #cccccc url("bg_grad.jpg") fixed;
}

/******* hyperlink and anchor tag styles *******/

a:link, a:visited{
color: #005FA9;
text-decoration: none;
}

a:hover{
text-decoration: underline;
}

/************** header tag styles **************/

h1{
font: bold 120% Arial,sans-serif;
color: #334d55;
margin: 0px;
padding: 0px;
}

h2{
font: bold 114% Arial,sans-serif;
color: #006699;
margin: 0px;
padding: 0px;
}

h3{
font: bold 100% Arial,sans-serif;
color: #334d55;
margin: 0px;
padding: 0px;
}

h4{
font: 100% Arial,sans-serif;
color: #333333;
margin: 0px;
padding: 0px;
}

h5{
font: 100% Arial,sans-serif;
color: #334d55;
margin: 0px;
padding: 0px;
}


/*************** list tag styles ***************/

ul{
list-style-type: square;
}

ul ul{
list-style-type: disc;
}

ul ul ul{
list-style-type: none;
}

/********* form and related tag styles *********/

form {
margin: 0;
padding: 0;
}

label{
font: bold 1em Arial,sans-serif;
color: #334d55;
}

input{
font-family: Arial,sans-serif;
}

/***********************************************/
/* Layout Divs                                 */
/***********************************************/
#pagecell1{
position:absolute;
top: 22px;
left: 25px;
right: 2%;
width:95.6%;
background-color: #ffffff;
}

#tl {
position:absolute;
top: -1px;
left: 5px;
margin: 0px;
padding: 0px;
z-index: 100;
}

#tr {
position:absolute;
top: -1px;
right: -1px;
margin: 0px;
padding: 0px;
z-index: 100;
}

#masthead{
position: absolute;
top: 0px;
left: 2%;
right: 2%;
width:95.6%;

}

#pageNav{
float: right;
width:178px;
padding: 0px;
background-color: #F5f7f7;
border-left: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
font: small Verdana,sans-serif;
}

#content{
padding: 0px 10px 0px 0px;
margin:0px 178px 0px 0px;
border-right: 1px solid #ccd2d2;
}


/***********************************************/
/* Component Divs                              */
/***********************************************/
#siteName{
margin: 0px;
padding: 16px 0px 8px 0px;
color: #ffffff;
font-weight: normal;
}

/************** utility styles *****************/

#utility{
font: 75% Verdana,sans-serif;
position: absolute;
top: 16px;
right: 0px;
color: #919999;
}

#utility a{
color: #ffffff;
}

#utility a:hover{
text-decoration: underline;
}

/************** pageName styles ****************/

#pageName{
padding: 0px 0px 14px 10px;
margin: 0px;
border-bottom:1px solid #ccd2d2;
}

#pageName h2{
font: bold 175% Arial,sans-serif;
color: #000000;
margin:0px;
padding: 0px;
}

#pageName img{
position: absolute;
top: 54px;
right: 6px;
padding: 0px;
margin: 0px;
left: 392px;
width: 116px;
height: 114px;
}

/************* globalNav styles ****************/

#globalNav{
position: relative;
width: 100%;
min-width: 640px;
height: 32px;
color: #cccccc;
padding: 0px;
margin: 0px;
background-image:  url("glbnav_background.gif");
}

#globalNav img{
margin-bottom: -4px;

}

#gnl {
position: absolute;
top: 0px;
left:0px;
}

#gnr {
position: absolute;
top: 0px;
right:0px;
}

#globalLink{
position: absolute;
top: 6px;
height: 22px;
min-width: 640px;
padding: 0px;
margin: 0px;
left: 10px;
z-index: 100;
}


a.glink, a.glink:visited{
  	font-size: small;
  	color: #000000;
font-weight: bold;
margin: 0px;
padding: 2px 5px 4px 5px;
border-right: 1px solid #8FB8BC;
}

a.glink:hover{
  	background-image:  url("glblnav_selected.gif");
text-decoration: none;
}

.skipLinks {display: none;}

/************ subglobalNav styles **************/

.subglobalNav{
position: absolute;
top: 84px;
left: 0px;
/*width: 100%;*/
min-width: 640px;
height: 20px;
padding: 0px 0px 0px 10px;
visibility: hidden;
color: #ffffff;
}

.subglobalNav a:link, .subglobalNav a:visited {
font-size: 80%;
color: #ffffff;
}

.subglobalNav a:hover{
color: #cccccc;
}

/*************** search styles *****************/

#search{
position: absolute;
top: 5px;
right: 10px;
z-index: 101;
}

#search input{
  font-size: 70%;
  margin: 0px  0px 0px 10px;
}

#search a:link, #search a:visited {
font-size: 80%;
font-weight: bold;

}

#search a:hover{
margin: 0px;
}


/************* breadCrumb styles ***************/

#breadCrumb{
padding: 5px 0px 5px 10px;
font: small Verdana,sans-serif;
color: #AAAAAA;
}

#breadCrumb a{
color: #AAAAAA;
}

#breadCrumb a:hover{
color: #005FA9;
text-decoration: underline;
}


/************** feature styles *****************/

.feature{
padding: 0px 0px 10px 10px;
font-size: 80%;
min-height: 200px;
height: 200px;
}
html>body .feature {height: auto;}

.feature h3{
font: bold 175% Arial,sans-serif;
color: #000000;
padding: 30px 0px 5px 0px;
}

.feature img{
float: left;
padding: 0px 10px 0px 0px;
}


/*************** story styles ******************/

.story {
padding: 10px 0px 0px 10px;
font-size: 80%;
}

.story h3{
font: bold 125% Arial,sans-serif;
color: #000000;
}

.story p {
padding: 0px 0px 10px 0px;
}

.story a.capsule{
font: bold 1em Arial,sans-serif;
color: #005FA9;
display:block;
padding-bottom: 5px;
}

.story a.capsule:hover{
text-decoration: underline;
}

td.storyLeft{
padding-right: 12px;
}


/************** siteInfo styles ****************/

#siteInfo{
clear: both;
border-top: 1px solid #cccccc;
font-size: small;
color: #cccccc;
padding: 10px 10px 10px 10px;
margin-top: -1px;
}

#siteInfo img{
padding: 4px 4px 4px 0px;
vertical-align: middle;
}


/************ sectionLinks styles **************/

#sectionLinks{
margin: 0px;
padding: 0px;

}

#sectionLinks h3{
padding: 10px 0px 2px 10px;
border-bottom: 1px solid #cccccc;
}

#sectionLinks a:link, #sectionLinks a:visited {
display: block;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #cccccc;
background-image:  url("bg_nav.jpg");
font-weight: bold;
padding: 3px 0px 3px 10px;
color: #21536A;
}

#sectionLinks a:hover{
border-top: 1px solid #cccccc;
background-color: #DDEEFF;
background-image: none;
font-weight: bold;
text-decoration: none;
}


/************* relatedLinks styles **************/

.relatedLinks{
margin: 0px;
padding: 0px 0px 10px 10px;
border-bottom: 1px solid #cccccc;
}

.relatedLinks h3{
padding: 10px 0px 2px 0px;
}
s
.relatedLinks a{
display: block; 
}


/**************** advert styles *****************/

#advert{
padding: 10px;
}

#advert img{
display: block;
}

/********************* end **********************/
.status {
vertical-align: middle;
position: absolute;
height: auto;
width: 50%;
}
.box {
position: absolute;
top: 20%;
}

Ken2k7 · January 13, 2008

You forgot to close off the table tag in your PHP code.

madspof · January 13, 2008

thanks for that i dnt know much about tables or html am more php orrientiated.

revraz · January 13, 2008

That would sure do it.

You forgot to close off the table tag in your PHP code.

Sign In

[SOLVED] why does this script cause my page to display incorectly

Recommended Posts

madspof

Link to comment

Share on other sites

revraz

Link to comment

Share on other sites

madspof

Link to comment

Share on other sites

Ken2k7

Link to comment

Share on other sites

madspof

Link to comment

Share on other sites

revraz

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information