Hi All
I've finished developing my first website. As I went along, I didn't view it in IE...I know I should of but forgot because I never use IE. At first, the photos I was displaying were in the correct place in both browsers but of course I didn't make the website to be viewed in 1024x768 screen resolution. So now I'm going through it resizing and rearranging to make this work. However, now the images that once displayed in the correct place in both browsers, don't. When it's in the correct place in Firefox, it's a good bit out of place in IE and vice versa.
Can anyone help me fix this? This is driving me absolutely nuts.
I can provide a link to the live website but I haven't uploaded any of my adjustments until I get it working on my local server.
I'd really appreciate any help you can give.
<?php
session_start();
$placeValue = $_GET['place'];
$width = $_GET['width'];
include('connection.php');
$albumID = $_GET['ID'];
//sql query to get records from that album.
$result = mysql_query("SELECT Path AS PATH FROM pictures
INNER JOIN pics_in_albums
ON pictures.ID = pics_in_albums.PicID
INNER JOIN albums
ON pics_in_albums.AlbumID = albums.ID
WHERE albums.ID = \"$albumID\"
GROUP BY pictures.ID LIMIT 1") or die(mysql_error());
$counter = 0;
$path = array();
//fetch tha data from the database
while ($row = mysql_fetch_assoc($result))
{
$path[$counter] = substr(strrchr($row['PATH'],92),1);
}
$img = imagecreatefromjpeg("images//" . $path[0]);
$tempWidth = imagesx($img);
if ($width == '75')
{
$background = "photoBackground.png";
$cssWidth = "600px";
$cssHeight = "490px";
$cssTop = "60px";
$cssLeft = "370px";
$posTop = "80px";
$posLeft = "24px";
}
else if ($width == '67')
{
$background = "photoBackgroundPortrait.png";
$cssWidth = "490px";
$cssHeight = "560px";
$cssTop = "35px";
$cssLeft = "500px";
$posTop = "55px";
$posLeft = "3px";
}
else if ($tempWidth == '456')
{
$background = "photoBackground.png";
$cssWidth = "600px";
$cssHeight = "490px";
$cssTop = "60px";
$cssLeft = "370px";
$posTop = "80px";
$posLeft = "24px";
}
else if ($tempWidth == '342')
{
$background = "photoBackgroundPortrait.png";
$cssWidth = "490px";
$cssHeight = "560px";
$cssTop = "35px";
$cssLeft = "500px";
$posTop = "55px";
$posLeft = "3px";
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<?xml version="1.0" encoding="iso-8859-1"?>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body
{
text-align:center;
}
#background
{
background: url(images/picsBackground.jpg) no-repeat;
position:relative;
margin-left:auto;
margin-right:auto;
/*margin-bottom:50px;*/
width: 1000px;
height:630px;
left:10px;
top:-45px;
border:solid 1px red;
}
#background h3
{
font-family: "Trebuchet MS";
font-size:16px;
}
#photoBackground
{
/*background:url(images/photoBackground.png) no-repeat;*/
background-image:url(images/<?php echo $background; ?>);
background-repeat: no-repeat;
position:absolute;
left:<?php echo $cssLeft; ?>;
top:<?php echo $cssTop; ?>;
width:<?php echo $cssWidth; ?>;
height:<?php echo $cssHeight; ?>;
}
/* home link */
#link1
{
position:relative;
left:400px;
top:-6px;
border:0px;
z-index:50;
}
/* places link */
#link2
{
position:relative;
top: -71px;
left:275px;
border:0px;
z-index:50;
}
#link3
{
position:relative;
left: 150px;
top:-101px;
border:0px;
z-index:50;
}
#sidebar {
position:relative;
top:-30px;
float: left;
left:30px;
width: 300px;
padding: 9px 0 0 5px;
/*border:1px;
border-style:solid
background: #D1D8D1;*/
}
#description
{
position:relative;
top: -60px;
margin-right:600px;
left:100px;
margin-bottom:-30px;
}
#border
{
border:1px #000000;
border-style: solid;
padding:2px 2px 2px 2px;
}
td.col1
{
vertical-align:middle;
padding: 2px 2px 2px 2px;
text-align:center;
/*border-bottom:solid 3px;
border-right:solid thin;
border-left:solid thin;
border-top:solid thin;*/
}
#sidebar img
{
border:0px;
}
#photoPosition
{
position:relative;
top: <?php echo $posTop; ?>;
left:<?php echo $posLeft; ?>;
width:456px;
border:0px;
margin:0px;
padding:0px;
}
#transparentPos
{
position:absolute;
/*top: <?php // $posTop; ?>;
left:<?php //echo $posLeft; ?>;*/
top: 0px;
left: 0px;
}
#nextPrevLinks
{
position:absolute;
top: 520px;
height:50px;
width:150px;
margin-right:750px;
margin-left:300px;
left:570px;
z-index:50;
border:solid 1px red;
}
</style>
</head>
<body bgcolor="#000000">
<div id="link1"> <a href='polaroid_menu.php'><img src='images/home.png' border="0"></a></div>
<div id="background"><br/><br/><br/><br/>
<?php
// back button to places page
echo "<div id=link2><a href='polaroidPlaces1.php?place=$placeValue'><img src='images/places.png' border=0/></a></div>";
// back button to albums page
echo "<div id=link3><a href=polaroidAlbums.php?page=photo&place=$placeValue><img src='images/albums.png' border=0></a></div>";
include('galleryCode.php');
?>
</div>
</body>
</html>
This is the code that displays the photos...galleryCode.php..
echo "<div id=photoBackground>";
echo "<div id=photoPosition>";
echo "<img src=\"{$currentImage}\">";
echo "<div id=transparentPos>";
echo '<img src ="images/transparent.gif" width="' . $width . '" height="' . $height . '" border="0"/>';
echo '</div>';
echo "</div>";
Thank you.
