DIV goes AWOL in IE7 on one page only

kingnutter

01-09-2010, 11:29 PM

Hi everyone,

This is my first post, so I apologise if I have put too much code in here.

I am using the following CSS across my whole website.

<style type="text/css">

html,body{margin:0;padding:0}
body
{
font: 100% calibri,arial,sans-serif;
margin:20px;
padding:0;
}
p
{
/* border: solid; */
margin:0 10px 10px 0
}

div.wrapper
{
margin-left: 10%;
margin-right: 10%;
}

div#header
{
/* background-color:lightskyblue; */
}

div#header h1
{
height:80px;
line-height:80px;margin:0;
padding-left:10px;
color: #79B30B
}

div#header a img
{
border:0px
}

div#header img
{
border:0px
}

img.background
{
margin: -20px;
margin-left:0px;
}

div#content
{
clear: both;
width: 800px;
margin: 0 0% 0 0px;
/* background-color:peru; */ /* brown hoodie colour */

}

div#content p
{
color:black;
line-height:1.4;
}

table.cover
{
width: 600px;
}

img.floatleft
{
float:left;
}

div#extra
{
background-color:tomato;
position: absolute;
margin-left: 800px;
padding: 0 10px 0 0;
height:auto;
}

div#extra p
{
width:auto;
}

div#footer
{
background-color: red;
color: white;
clear:left;
width:500px;
}

div#footer p
{
margin:0;
padding:5px 10px;
}

a img{ border:0px }

div#cd_details
{
width: 800px;
}

div#cd_details p
{
width:400px;
background-color:yellow;
}

div#cd_details h2
{
color:red;
}

div#cd_details h2 a
{
color:green;
}

div#yearnav a img
{
border:0px
}

div#tag_cloud
{
background-color:pink;
width:180px;
float: left;
margin-left:0%;
}

.tag_cloud
{
font: 100% calibri,arial,sans-serif;
width:180px;
padding: 0px;
text-decoration: none;
}
.tag_cloud:link { color: #990000; }
.tag_cloud:visited { color: #019c05; }
.tag_cloud:hover { color: #ffffff; background: #69da03; }
.tag_cloud:active { color: #ffffff; background: #ACFC65; }

#search_results
{
font-family: "Verdana", "Lucida Grande", Sans-Serif;
font-size: 16px;
background: #fff;
margin: 0px;
width: 800px;
border-collapse: collapse;
text-align: left;
}
#search_results th
{
font-size: 16px;
font-weight: bold;
color: black;
padding: 10px 8px;
border-bottom: 2px solid #6678b1;
}
#search_results td
{
border-bottom: 1px solid #ccc;
color: #669;
padding: 0px 8px;
}
#search_results tbody tr:hover td
{
color: #009;
}

/*
#search_results
{
width:90%;
margin-left:5%;
margin-right:5%;
}
*/

#search_results a
{text-decoration:none; color: black;}

#search_results a.admin
{
text-decoration: none; color: blue;
font-size:14px;
}

table.tracks
{
width: 800px;
/* border: solid; */
margin: 0px;
border-spacing: 0px;
}

#cover {
float:left;
width:250px;
background-color: peru;
}
#cover-text {
float:left;
width:400px;
color: red;
background-color: peru;
}
#tracks-table {
clear: both;
}

</style>

This is working fine in FF3, IE7, Chrome 3, except on the following page in which the div named "extra" is positioned way off to the right of the browser screen in IE7 only.

<?php
// Starting the session
session_start('username');
?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>

<link rel="stylesheet" type="text/css" href="../style/mojo_home.css" />
<script type="text/javascript" src="/style/prepareImageSwap.js"></script>
<script type="text/javascript" src="../style/reflection.js"></script>
</head>

<body>


<div class = "wrapper">
<?php include ('../includes/header.php');?>




<?php

//check for previous event

$happened = $_GET['happened'];

if ($happened == 'added'){
echo "<font color = \"red\"><b>TRACK ADDED</font></b> <p>";
}

if ($happened == 'updated'){
echo "<font color = \"red\"><b>TRACK UPDATED</font></b> <p>";
}

if ($happened == 'cd_updated'){
echo "<font color = \"red\"><b>CD DETAILS UPDATED</font></b> <p>";
}

if ($happened == 'deleted'){
echo "<font color = \"red\"><b>TRACK DELETED</font></b> <p>";
}

// check for record id
if ((!isset($_GET['id']) || trim($_GET['id']) == '')){
die('Missing record ID: No such CD in Database');
}

// open database connection
$connection = mysql_connect($host, $user, $pass)
or die ('Unable to connect');

// select database
mysql_select_db($db) or die ('Unable to select database');

// generate and execute query

// First up - retrieve the "Issue"

$id = $_GET['id'];

$query = "
SELECT *
FROM mojocd
WHERE moj_id = '$id'";
$result=mysql_query($query)
or die ("Error in query: $query. " . mysql_error());

$check_id=mysql_num_rows($result);
if ($check_id==0){
die('Missing record ID!');
}
// end if

$query = "
SELECT moj_title, moj_date, moj_issue, moj_summary
FROM mojocd
WHERE moj_id = '$id'";

$result = mysql_query($query) or die ("Error in ISSUE query: $query. " . mysql_error());

// Need to retrieve track_id for edit / delete buttons

?>
<?php
if (mysql_num_rows($result) > 0){
// iterate through result set
// echo ISSUE (should only be one)

while($row = mysql_fetch_object($result)){?>

<div id="extra">

<img src="../images/mojo_ad.gif" alt="Big Mojo Ad"><br />
<b>BROWSE GENRES</b>


<?php

// Tag cloud as include

include('tag_cloud.php');

?>

</div> 

<div id="cover">
 <img src="../images/<?php echo $id; ?>.jpg" width="200" height="200" alt="Mojo CD: <?php echo $row->moj_title; ?>" title="Mojo CD: <?php echo $row->moj_title; ?>"/>
 </div>

<div id="cover-text"><h2><?php echo $row->moj_title; ?><br />Issue No. <?php echo $row->moj_issue; ?> (<?php echo $row->moj_date; ?>)</h2><p /><b><?php echo $row->moj_summary; ?></b> 

<?php

// Hide edit links from non-admin

$username = ($_SESSION['username']);
if ($username == 'admin'){ ?>

<a href="add_track.php?id=<?php echo $id; ?>">Add a "track"</a></h3></font>

<?php

// Hide edit links from non-admin

$username = ($_SESSION['username']);

if ($username == 'admin'){ ?>

<a href="edit_mojo_cd.php?id=<?php echo $id; ?>">edit CD details</a>

<?php
} ?>

<?php
}
} ?>



<?php
}
else { ?>

<font size="-1">"NO ISSUE PRESENT"</font>

<?php
}

?>
</div>
<?php

// end else

// Then retrieve the tracks

$id = $_GET['id'];
$query = "
SELECT track_id, track_no, track_title, track_artist, track_asinuk, track_asinus
FROM tracks
WHERE moj_id = '$id'
ORDER BY track_no
";

$result = mysql_query($query)
or die ("Error in query: $query. " . mysql_error()); ?>

<p />

<?php

// if records present
if (mysql_num_rows($result) > 0){ ?>
<div id="tracks-table">
<table class="tracks">
<?php

// iterate through resultset
// print CD titles

while($row = mysql_fetch_object($result)){
$counter++;
$background_color = ( $counter % 2 == 0 ) ? ('white') : ('#E0E0E0');

echo '<tr><td style="background-color:'.$background_color.'">' ?>

<td width=50 <?php echo 'style="background-color:'.$background_color.'"' ?> >
<?php echo $row->track_no; ?>:
</td>

<td width=450 <?php echo 'style="background-color:'.$background_color.'"' ?>>
<?php echo $row->track_title." - "; ?><?php echo $row->track_artist; ?>
</td>

<td width=125 <?php echo 'style="background-color:'.$background_color.'"' ?>><font size="-1">
<?php

// check for null entry
if (trim($row->track_asinuk) == ''){
echo 'Link';
}
// end if

else { ?>
<font size="-1">
<a href="http://www.xxxxx.com">Link</a>

<?php
}
// end else
?>

</td>
<td width=125 <?php echo 'style="background-color:'.$background_color.'"' ?>>
<font size="-1">

<?php
// check for null entry
if (trim($row->track_asinus) == ''){
echo "Link";
}
// end if

else { ?>
<a href="http://www.xxxxx.com">Link</a>

<?php
}
// end else
?>

</td>
<?php

// Hide edit links from non-admin

$username = ($_SESSION['username']);

if ($username == 'admin'){ ?>

<td width=100>
<a href="edit_track.php?id=<?php echo $row->track_id; ?>">
edit</a>
<a href="delete_track.php?id=<?php echo $row->track_id; ?>&moj_id=<?php echo $id; ?> " onclick="return confirm('Are you sure you want to delete <?php echo $row->track_title; ?> by <?php echo $row->track_artist; ?>?')">delete</a>
</td>

<?php

}
// end if

?>

</tr>

<?php

}
// end while (tracks)
?>

</table>
</div>

<?php
}

// end if (tracks found)
else { ?>

<p />No "Tracks" Entered!
<?php
}
// end else

if (isset ($_GET['fromsearch'])){ ?>

<form>
<input type="button" value="Back to search results" onClick="history.back()">
</form>
<?php
}
?>

<div id="content">
<?php

include('../includes/random_cds.php');

?>

</div>

<?php

// close database connection
mysql_close($connection);

?>



<?php

// Sidebar, Tag Cloud and Footer as include

include('../includes/footer.php');
/* NB: Includes navigation bar within "footer" div only */

?>

</div> 
</body>
</html>

Can anybody give me a pointer as to where I'm going wrong?

Many thanks,
KN

abduraooft

01-10-2010, 12:59 PM

Can anybody give me a pointer as to where I'm going wrong? Could you please post a link to your page? Or post the parsed html output taken from your browser's view source option.

kingnutter

01-10-2010, 08:42 PM

Thanks for the reply. The site is on a local server at the moment, so here is the parsed page source. This is my first attempt at a raw coded php / css site so please excuse any bad habits therein.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>

<link rel="stylesheet" type="text/css" href="../style/mojo_home.css" />
<script type="text/javascript" src="/style/prepareImageSwap.js"></script>
<script type="text/javascript" src="../style/reflection.js"></script>
</head>

<body>


<div class = "wrapper">

<div id="header">

<img class="background" src="/images/bg2.png"><p />
<a href="index.php"><img src="/images/banner.png" alt="MJCDs " title="MJCDs"></a>    
<a href="index.php"><img src="/images/subtitle.png" alt="The Definitive Guide " title="The Definitive Guide to Every Disc and Every Track"></a><br /><br />

<table><tr>

<td>



<script>
prepareImageSwap(document.body);
</script>

<a href="search_results.php?&yearsearch=2010">
<img src="/images/2010_black.png" alt="2010"></a></td>
<td><img src="/images/banner_colon.png" alt=":"></td>

<td>



<script>
prepareImageSwap(document.body);
</script>

<a href="search_results.php?&yearsearch=2009">
<img src="/images/2009_black.png" alt="2009"></a></td>
<td><img src="/images/banner_colon.png" alt=":"></td>

<td>



<script>
prepareImageSwap(document.body);
</script>

<a href="search_results.php?&yearsearch=2008">
<img src="/images/2008_black.png" alt="2008"></a></td>
<td><img src="/images/banner_colon.png" alt=":"></td>

<td>



<script>
prepareImageSwap(document.body);
</script>

<a href="search_results.php?&yearsearch=2007">
<img src="/images/2007_black.png" alt="2007"></a></td>
<td><img src="/images/banner_colon.png" alt=":"></td>

<td>



<script>
prepareImageSwap(document.body);
</script>

<a href="search_results.php?&yearsearch=2006">
<img src="/images/2006_black.png" alt="2006"></a></td>
<td><img src="/images/banner_colon.png" alt=":"></td>

<td>



<script>
prepareImageSwap(document.body);
</script>

<a href="search_results.php?&yearsearch=2005">
<img src="/images/2005_black.png" alt="2005"></a></td>
<td><img src="/images/banner_colon.png" alt=":"></td>

<td>



<script>
prepareImageSwap(document.body);
</script>

<a href="search_results.php?&yearsearch=2004">
<img src="/images/2004_black.png" alt="2004"></a></td>
<td><img src="/images/banner_colon.png" alt=":"></td>

<td>



<script>
prepareImageSwap(document.body);
</script>

<a href="search_results.php?&yearsearch=2003">
<img src="/images/2003_black.png" alt="2003"></a></td>
<td><img src="/images/banner_colon.png" alt=":"></td>

<td>



<script>
prepareImageSwap(document.body);
</script>

<a href="search_results.php?&yearsearch=2002">
<img src="/images/2002_black.png" alt="2002"></a></td>
<td><img src="/images/banner_colon.png" alt=":"></td>

<td>



<script>
prepareImageSwap(document.body);
</script>

<a href="search_results.php?&yearsearch=2001">
<img src="/images/2001_black.png" alt="2001"></a></td>

<td>



<script>
prepareImageSwap(document.body);
</script>

<a href="search_results.php?&yearsearch=2000">
<img src="/images/2000_black.png" alt="2000"></a></td>
</tr></table>
<form name="search" method="post" action="search_results.php">
Search for: <input type="text" name="find" /> in
<Select NAME="field">
<Option VALUE="track_artist">Track Artist</option>
<Option VALUE="track_title">Track Title</option>
<Option VALUE="cd_title">MJCD</option>
<Option VALUE="all">All</option>
</Select>
<input type="hidden" name="searching" value="yes" />
<input type="submit" name="search" value="Go" />
</form></div>

<div id="extra">

<img src="../images/big_ad.gif" alt="Big Ad"><br />
<b>BROWSE GENRES</b>


<div class="tag_cloud">
<a style="font-size: 48px" class="tag_cloud" href="search_results.php?&genresearch=1&moj_genre=Rock" title="'Rock' returned a count of 18">Rock</a>
<a style="font-size: 26px" class="tag_cloud" href="search_results.php?&genresearch=2&moj_genre=Pop" title="'Pop' returned a count of 8">Pop</a>
<a style="font-size: 12px" class="tag_cloud" href="search_results.php?&genresearch=4&moj_genre=Goth" title="'Goth' returned a count of 1">Goth</a>
<a style="font-size: 12px" class="tag_cloud" href="search_results.php?&genresearch=5&moj_genre=Soundtrack" title="'Soundtrack' returned a count of 1">Soundtrack</a>
<a style="font-size: 18px" class="tag_cloud" href="search_results.php?&genresearch=6&moj_genre=New Wave" title="'New Wave' returned a count of 4">New Wave</a>
<a style="font-size: 26px" class="tag_cloud" href="search_results.php?&genresearch=7&moj_genre=Punk" title="'Punk' returned a count of 8">Punk</a>
<a style="font-size: 22px" class="tag_cloud" href="search_results.php?&genresearch=8&moj_genre=Soul" title="'Soul' returned a count of 6">Soul</a>
<a style="font-size: 14px" class="tag_cloud" href="search_results.php?&genresearch=9&moj_genre=Funk" title="'Funk' returned a count of 2">Funk</a>
<a style="font-size: 16px" class="tag_cloud" href="search_results.php?&genresearch=10&moj_genre=R&B" title="'R&B' returned a count of 3">R&B</a>
<a style="font-size: 14px" class="tag_cloud" href="search_results.php?&genresearch=11&moj_genre=Psych" title="'Psych' returned a count of 2">Psych</a>
<a style="font-size: 14px" class="tag_cloud" href="search_results.php?&genresearch=12&moj_genre=Mod" title="'Mod' returned a count of 2">Mod</a>
<a style="font-size: 12px" class="tag_cloud" href="search_results.php?&genresearch=153&moj_genre=Gospel" title="'Gospel' returned a count of 1">Gospel</a>
<a style="font-size: 12px" class="tag_cloud" href="search_results.php?&genresearch=129&moj_genre=Glam" title="'Glam' returned a count of 1">Glam</a>
<a style="font-size: 14px" class="tag_cloud" href="search_results.php?&genresearch=130&moj_genre=Metal" title="'Metal' returned a count of 2">Metal</a>
<a style="font-size: 14px" class="tag_cloud" href="search_results.php?&genresearch=140&moj_genre=Prog" title="'Prog' returned a count of 2">Prog</a>
<a style="font-size: 12px" class="tag_cloud" href="search_results.php?&genresearch=141&moj_genre=Floyd" title="'Floyd' returned a count of 1">Floyd</a>
<a style="font-size: 12px" class="tag_cloud" href="search_results.php?&genresearch=143&moj_genre=Indie" title="'Indie' returned a count of 1">Indie</a>
<a style="font-size: 12px" class="tag_cloud" href="search_results.php?&genresearch=146&moj_genre=kklkl" title="'kklkl' returned a count of 1">kklkl</a>
<a style="font-size: 12px" class="tag_cloud" href="search_results.php?&genresearch=128&moj_genre=Acid" title="'Acid' returned a count of 1">Acid</a>
<a style="font-size: 14px" class="tag_cloud" href="search_results.php?&genresearch=127&moj_genre=Country" title="'Country' returned a count of 2">Country</a>
<a style="font-size: 12px" class="tag_cloud" href="search_results.php?&genresearch=126&moj_genre=Prog Rock" title="'Prog Rock' returned a count of 1">Prog Rock</a>
<a style="font-size: 12px" class="tag_cloud" href="search_results.php?&genresearch=122&moj_genre=Dub" title="'Dub' returned a count of 1">Dub</a>
<a style="font-size: 12px" class="tag_cloud" href="search_results.php?&genresearch=123&moj_genre=Ska" title="'Ska' returned a count of 1">Ska</a>
<a style="font-size: 12px" class="tag_cloud" href="search_results.php?&genresearch=124&moj_genre=Reggae" title="'Reggae' returned a count of 1">Reggae</a>
<a style="font-size: 12px" class="tag_cloud" href="search_results.php?&genresearch=125&moj_genre=Electronica" title="'Electronica' returned a count of 1">Electronica</a>
<a style="font-size: 14px" class="tag_cloud" href="search_results.php?&genresearch=121&moj_genre=Folk" title="'Folk' returned a count of 2">Folk</a>
<a style="font-size: 14px" class="tag_cloud" href="search_results.php?&genresearch=115&moj_genre=Jazz" title="'Jazz' returned a count of 2">Jazz</a>
<a style="font-size: 14px" class="tag_cloud" href="search_results.php?&genresearch=117&moj_genre=Trash" title="'Trash' returned a count of 2">Trash</a>
<a style="font-size: 16px" class="tag_cloud" href="search_results.php?&genresearch=118&moj_genre=Blues" title="'Blues' returned a count of 3">Blues</a>
<a style="font-size: 16px" class="tag_cloud" href="search_results.php?&genresearch=119&moj_genre=Garage" title="'Garage' returned a count of 3">Garage</a>
<a style="font-size: 18px" class="tag_cloud" href="search_results.php?&genresearch=120&moj_genre=Roots" title="'Roots' returned a count of 4">Roots</a>
</div>

</div> 

<div id="cover">
 <img src="../images/286.jpg" width="200" height="200" alt="MJCD" title="MJCD
 </div>

<div id="cover-text"><h2>MJCD<br />Issue No. 194 (January 2010)</h2><p /><b>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</ b> 



</div>

<p />

<div id="tracks-table">
<table class="tracks">
<tr><td style="background-color:#E0E0E0">
<td width=50 style="background-color:#E0E0E0" >
1:
</td>

<td width=450 style="background-color:#E0E0E0">
Hey You - Engineers </td>



<td width=125 style="background-color:#E0E0E0"><font size="-1">
<font size="-1">
<a href="http://www.link.co.uk" target="0">link</a>

</td>
<td width=125 style="background-color:#E0E0E0">
<font size="-1">

<a href="http://www.link.com" target="0">Amazon US</a><img src="http://www.link.com/image.jog" /></font>

</td>

</tr>

*****NB: Another 15 rows iterated like this ******

</table>
</div>

<div id="content">

<br />
<form>
<input type="button" value="Back to search results" onClick="history.back()">
</form>
<p />
OTHERSYOU MIGHT LIKE

<table align=center cellspacing="10" cellpadding="5">

<td>
<a href="tracks.php?id=294">
<img src="../images/294.jpg" width="120" height="120" align="left" class="reflect rheight20 ropacity50" name="MJCD example" title=" MJCD example " /></td>
<td>
<a href="tracks.php?id=274">
<img src="../images/274.jpg" width="120" height="120" align="left" class="reflect rheight20 ropacity50" name=" MJCD example "alt=" MJCD example " title=" MJCD example " /></td>
<td>
<a href="tracks.php?id=267">
<img src="../images/267.jpg" width="120" height="120" align="left" class="reflect rheight20 ropacity50" name=" MJCD example alt=" MJCD example " title=" MJCD example " /></td>
<td>
<a href="tracks.php?id=271">
<img src="../images/271.jpg" width="120" height="120" align="left" class="reflect rheight20 ropacity50" name=" MJCD example "alt=" MJCD example " title=" MJCD example " /></td>
<td>
<a href="tracks.php?id=275">
<img src="../images/275.jpg" width="120" height="120" align="left" class="reflect rheight20 ropacity50" name=" MJCD example "alt=" MJCD example " title=" MJCD example " /></td></table>

</div>



<div id="footer">
<a href="../php-files/index.php">HOME</a> | FAQ | TERMS & CONDITIONS | CONTACT
</div> 

</div> 
</body>
</html>

abduraooft

01-11-2010, 07:46 AM

Ok, now you have a number of errors in your markup. Validate it using http://validator.w3.org/#validate_by_input and fix them all.