Position differences in IE and firefox

php_beginner_83 · March 9, 2010

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.

DaiLaughing · March 13, 2010

You might get more help if you post the HTML generated by your PHP as we can't run the page ourselves to see what happens. Or provide a link to the page.

Sign In

Position differences in IE and firefox

Recommended Posts

php_beginner_83

Link to comment

Share on other sites

DaiLaughing

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information