Please can some one help me with this div problem

**Beeper** · Oct 11, 2004 06:04

This page works perfectly in Explorer in Windows.

Explorer Screenshot

The problem is with any other browser including IE on a Mac.

Firefox Screenshot

Opera Screenshot

The central section is meant to have a length that is variable between the header and scroll if necessary.

However in all other browsers it does not correctly fill up the missing space or, in some browsers, scroll at all.

I would REALLY REALLY appreciate some help with this...

Code:

<?xml version="1.0" encoding="iso-8859-1"?>
<!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">
<head>
<title>Jake Polonsky : Photography : Curriculum Vitae</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html,body {
	height:100%;
	margin:0;
	padding:0;
	min-width:740px;
}
* html body {
	text-align:center;
	padding:33px 0;
}
#outer{
	position:absolute;
	top:33px;
	bottom:33px;
	left:50%;
	width:740px;
	margin-left:-359px;
	border:0px none #E8E8E8;
}
* html #outer {
	position:relative;
	top:0;
	left:0;
	height:100%;
	margin-left:auto;
	margin-right:auto;
	text-align:left;
}

#bottom {
	position:absolute;
	bottom:0;
	left:0px;
	width:740px;
	height:100px;
	background: #FFFFFF;
	border-top-style: none;
	border-top-width: 0px;
	border-right-color: #FFFFFF;
	border-right-style: solid;
	border-right-width: 7px;
	border-bottom-color: #FFFFFF;
	border-bottom-style: solid;
	border-bottom-width: 7px;
	border-left-color: #FFFFFF;
	border-left-style: solid;
	border-left-width: 6px;
}
#top{
	position:absolute;
	top:0;
	left:0px;
	right:0px;
	height:57px;
	background: #88C2EA;
	width:740px;
	border-top-color: #FFFFFF;
	border-right-color: #FFFFFF;
	border-left-color: #FFFFFF;
	border-left-style: solid;
	border-top-style: solid;
	border-top-width: 7px;
	border-right-style: solid;
	border-right-width: 7px;
	border-left-width: 7px;
	border-bottom-style: none;
	border-bottom-width: 0px;
}
#centre{
	position:absolute;
	top:57px;
	left:0px;
	bottom:200px;
	right:0px;
	width:740px;
	overflow:auto;
	background: #FFFFFF;
	border-right-color: #FFFFFF;
	border-right-style: solid;
	border-right-width: 7px;
	border-bottom-style: none;
	border-bottom-width: 0px;
	border-top-style: none;
	border-top-width: 0px;
	border-left-color: #FFFFFF;
	border-left-style: solid;
	border-left-width: 7px;
	scrollbar-face-color: #2E3091;
	scrollbar-highlight-color: #AAD5F0;
	scrollbar-3dlight-color: #C6E3F4;
	scrollbar-darkshadow-color: #54A8E0;
	scrollbar-shadow-color: #6BBE4E;
	scrollbar-arrow-color: #E8E8E8;
	scrollbar-track-color: #88C2EA;
}
* html #centre{
	position:relative;
	top:0;left:0;right:0;
	margin:0px 0px;
	padding:57px 0px 117px 0px;
	height:100%;
}
* html #innercentre{
	position:relative;
	height:100%;
	overflow:auto;
	background-color: #88C2EA;
}

body,td,th {
	font-family: Helvetica, Arial, Verdana, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	text-align:justify
}
a:link {
	color: #FFFFFF;
}
a:visited {
	color: #FFFFFF;
}
a:hover {
	color: #CCCCCC;
}
a:active {
	color: #CCCCCC;
}
h1 {
	font-size: 36px;
}
h2 {
	font-size: 24px;
}
h3 {
	font-size: 18px;
}
h4 {
	font-size: 16px;
}
h5 {
	font-size: 12px;
}
h6 {
	font-size: 10px;
}
.textHeader {
	font-size: 12px;
	font-weight:bold;
}
.bluetext {
	font-size: 10px;
	font-weight:normal;
}
.textEnd {
	font-size: 10px;
	font-weight:normal;
	font-style:italic;
}
body {
	background-color: #E8E8E8;
}
table (
	margin: 0px;
	padding: 0px;
}

</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<link href="jakepolonsky.css" rel="stylesheet" type="text/css" />
</head>
<body onload="MM_preloadImages('images/menu/white/press.gif','images/menu/white/showreel.gif','images/menu/med/introduction.gif','images/menu/med/contactdetails.gif','images/menu/med/promos_b.gif','images/menu/med/commercials_b.gif','images/menu/med/credits_b.gif','images/menu/med/sub_pdf_b.gif')">
<div id="outer"> 
  <div id="centre"> 
    <div id="innercentre"><table width="565" border="0" cellspacing="26" cellpadding="0">
  <tr>
    <td><h3>JAKE POLONSKY<br />
DIRECTOR OF PHOTOGRAPHY</h3>
        <h4>AWARDS</h4>
        <p class="contentMed"><span class="textHeader">Winner Best Cinematography </span><br />
            <span class="bluetext">CADS Music Vision Awards 2004</span></p>
        <p class="contentMed"><span class="textHeader">Best Young Camera/Lighting Person 2002</span><br />
              <span class="bluetext">Broadcast Magazine </span>        </p>
        <p class="contentMed"><span class="textHeader">Winner </span><br />
              <span class="bluetext">Gold Arrow Britsh Advertising Awards 2000</span></p>
        <p class="contentMed"><span class="textHeader">Nominated for Best Cinematography</span><br />
              <span class="bluetext">CADS Music Video awards 2002 </span>        </p>
        <p class="contentMed"><span class="textHeader">Freddie Young/BSC Cinematography Scholar 1996-97</span></p>
        <p class="contentMed"> <span class="textHeader">Winner Arriflex Award for Cinematography</span> <br />
            <span class="bluetext">Fuji Scholarship Competition 1996</span></p>
        <p class="contentMed"> <span class="textHeader">Fulbright Scholarship 1994-95</span><br />
            <span class="bluetext">American Film Institute</span></p>
        <h5> Work featured in : Shots, Promo, Creative Review, Broadcast</h5>
        <h4> EDUCATIONAL HISTORY </h4>
        <p class="contentMed"><strong> 1991-94 Wadham College , Oxford <br />
            <br />
          BA(Hons) English and Modern History - First Class <br />
          <br />
          1994-95 American Film Institute <br />
          <br />
          Center for Advanced Film and Television Studies <br />
          <br />
          First Year MFA program, Cinematography <br />
          <br />
          1995-97 Royal College of Art - MA Film &amp; TV (Cinematography)</strong></p>
        </td>
  </tr>
</table>
    </div></div>
  <div id="top">
    <table width="715" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="592" valign="bottom"><img src="images/headers/curriculum_vitae.gif" alt="Contact Details" width="350" height="50" /></td>
        <td width="123" height="52" align="right" valign="bottom"><img src="images/menu/med/sub_arrow.gif" width="33" height="50" /><a href="CV_%20jakepolonsky.pdf" target="_blank" onmouseover="MM_swapImage('pdf','','images/menu/med/sub_pdf_b.gif',1)" onmouseout="MM_swapImgRestore()"><img src="images/menu/med/sub_pdf_a.gif" name="pdf" width="53" height="50" border="0" id="pdf" /></a></td>
      </tr>
    </table>
  </div>
  <div id="bottom">
    <table width="727"  border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="1"><img src="images/menu/trans.gif" width="1" height="22" /></td>
        <td width="200" align="left" valign="middle" bgcolor="#88C2EA"><a href="home.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Introduction','','images/menu/med/introduction.gif',1)"><img src="images/menu/med/dark.gif" alt="Introduction Link" name="Introduction" width="200" height="20" border="0" id="Introduction" /></a></td>
        <td align="right" valign="top" bgcolor="#88C2EA"><div align="right"></div></td>
      </tr>
      <tr>
        <td><img src="images/menu/trans.gif" width="1" height="22" /></td>
        <td align="left" valign="middle" bgcolor="#88C2EA"><a href="contact.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','images/menu/med/contactdetails.gif',1)"><img src="images/menu/med/darkmed.gif" alt="Contact Link" name="Contact" width="200" height="20" border="0" id="Contact" /></a></td>
        <td align="right" valign="top" bgcolor="#88C2EA"><div align="right"></div></td>
      </tr>
      <tr>
        <td><img src="images/menu/trans.gif" width="1" height="22" /></td>
        <td align="left" valign="middle" bgcolor="#88C2EA"><img src="images/menu/med/curriculumvitae.gif" alt="Curriculum Vitae Link" width="200" height="20" border="0" /></td>
        <td align="right" valign="middle" bgcolor="#88C2EA"><div align="right"><img src="images/menu/med/arrow.gif" /><img src="images/menu/med/cv_b.gif" name="cv" width="34" height="20" border="0" id="cv" /><a href="cv_credits.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('credits','','images/menu/med/credits_b.gif',1)"><img src="images/menu/med/credits_a.gif" name="credits" width="60" height="20" border="0" id="credits" /></a><a href="cv_commercials.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('commercials','','images/menu/med/commercials_b.gif',1)"><img src="images/menu/med/commercials_a.gif" name="commercials" width="99" height="20" border="0" id="commercials" /></a><a href="cv_promos.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('promos','','images/menu/med/promos_b.gif',1)"><img src="images/menu/med/promos_a.gif" name="promos" width="64" height="20" border="0" id="promos" /></a><img src="images/ratio/1851.gif" alt="Area Ratio" width="92" height="20" /></div></td>
      </tr>
      <tr bgcolor="#FFFFFF">
        <td><img src="images/menu/trans.gif" width="1" height="22" /></td>
        <td align="left" valign="middle"><a href="press.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Press','','images/menu/white/press.gif',1)"><img src="images/menu/white/lightmed.gif" alt="Press Link" name="Press" width="200" height="20" border="0" id="Press" /></a></td>
        <td align="right" valign="top"><div align="right"></div></td>
      </tr>
      <tr bgcolor="#FFFFFF">
        <td><img src="images/menu/trans.gif" width="1" height="22" /></td>
        <td align="left" valign="middle"><a href="showreel_com.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Showreel','','images/menu/white/showreel.gif',1)"><img src="images/menu/white/light.gif" alt="Showreel Link" name="Showreel" width="200" height="20" border="0" id="Showreel" /></a></td>
        <td align="right" valign="top"><div align="right"></div></td>
      </tr>
    </table>
  </div>
</div>
</body>
</html>

**Paul O'B** · Oct 11, 2004 06:35

Hi,

It looks to me as though you have just got the top and bottom offsets incorrect for firefox/opera. Also you have set the background and the text to white so its not visible.

Code:

#centre{
 position:absolute;
 top:65px;
 left:0px;
 bottom:108px;
 right:0px;
 width:740px;
 overflow:auto;
 color:#000;
 background: #FFF;
 border-right-color: #FFFFFF;
 border-right-style: solid;
 border-right-width: 7px;
 border-bottom-style: none;
 border-bottom-width: 0px;
 border-top-style: none;
 border-top-width: 0px;
 border-left-color: #FFFFFF;
 border-left-style: solid;
 border-left-width: 7px;
 scrollbar-face-color: #2E3091;
 scrollbar-highlight-color: #AAD5F0;
 scrollbar-3dlight-color: #C6E3F4;
 scrollbar-darkshadow-color: #54A8E0;
 scrollbar-shadow-color: #6BBE4E;
 scrollbar-arrow-color: #E8E8E8;
 scrollbar-track-color: #88C2EA;
}
body,td,th {
 font-family: Helvetica, Arial, Verdana, sans-serif;
 font-size: 12px;
 color: #000;
 text-align:justify
}

Of course I didn't have your images locally to see if I'd missed something.

Your page looks very similar to a test I set here some time ago.

http://www.pmob.co.uk/temp/spointquiza.htm

This was the solution and you may want to look at it as it behaves better than your layout does.

http://www.sitepoint.com/forums/showthread.php?t=168555

Regarding IE mac I don't have mine connected at the moment but you probably want to hide all the ie pc stuff ( * html) from it anyway. (Use the mac double backslash hiding technique) However the layout may a be a bit complicated for the mac and I don't have time to test at the moment.

Hope thats some use anyway.

Paul

**Beeper** · Oct 11, 2004 06:49

Thanks Paul,

Much better but now the bg scrolling layer is blue in Explorer and white in the other browsers.

Also, on another note, I know I am going to need to 'hack' the bottom menu for explorer as in explorer it is aligned nicely but in the others it is 6 pixels out.

I remember that explorer was originally out so I rejigged it.

do I simply use * hack

**Paul O'B** · Oct 11, 2004 07:14

do I simply use * hack

I'm afraid so

use * html to offer code just to ie (and the same with the background colours.)

What you are basically doing is having one complete version for ie and another version for other browsers. Unfortunately thats the only way to do that sort of layout as you can see from the quiz I set in the link above

Paul

**Beeper** · Oct 11, 2004 09:18

Screenshot (Firefox)

Although this does nto occur in IE I am getting a thin border above and below the content area which I am keen to get rid of and the border does not seem to surround the menu at the bottom leading to a nasty step.

Can anyone help...

CSS...(messy)

Code:

/* CSS Document */
html,body {
	height:100%;
	margin:0;
	padding:0;
	min-width:740px;
}
* html body {
	text-align:center;
	padding:33px 0;
}
#outer{
	position:absolute;
	top:33px;
	bottom:33px;
	left:50%;
	width:740px;
	margin-left:-359px;
	border:0px none #E8E8E8;
}
* html #outer {
	position:relative;
	top:0;
	left:0;
	height:100%;
	margin-left:auto;
	margin-right:auto;
	text-align:left;
}

#bottom {
	position:absolute;
	bottom:0;
	left:0px;
	width:740px;
	height:100px;
	background: #FFFFFF;
	border-top-style: none;
	border-top-width: 0px;
	border-right-color: #FFFFFF;
	border-right-style: solid;
	border-right-width: 7px;
	border-bottom-color: #FFFFFF;
	border-bottom-style: solid;
	border-bottom-width: 7px;
	border-left-color: #FFFFFF;
	border-left-style: solid;
	border-left-width: 6px;
}
#top{
	position:absolute;
	top:0;
	left:0px;
	right:0px;
	height:57px;
	background: #88C2EA;
	width:740px;
	border-top-color: #FFFFFF;
	border-right-color: #FFFFFF;
	border-left-color: #FFFFFF;
	border-left-style: solid;
	border-top-style: solid;
	border-top-width: 7px;
	border-right-style: solid;
	border-right-width: 7px;
	border-left-width: 7px;
	border-bottom-style: none;
	border-bottom-width: 0px;
}
#centre{
 position:absolute;
 top:65px;
 left:0px;
 bottom:108px;
 right:0px;
 width:740px;
 overflow:auto;
 color:#000;
 background: #FFF;
 border-right-color: #FFFFFF;
 border-right-style: solid;
 border-right-width: 7px;
 border-bottom-style: none;
 border-bottom-width: 0px;
 border-top-style: none;
 border-top-width: 0px;
 border-left-color: #FFFFFF;
 border-left-style: solid;
 border-left-width: 7px;
 scrollbar-face-color: #88C2EA;
 scrollbar-highlight-color: #AAD5F0;
 scrollbar-3dlight-color: #C6E3F4;
 scrollbar-darkshadow-color: #54A8E0;
 scrollbar-shadow-color: #6BBE4E;
 scrollbar-arrow-color: #E8E8E8;
 scrollbar-track-color: #88C2EA;
}
* html #centre{
	position:relative;
	top:0;left:0;right:0;
	margin:0px 0px;
	padding:57px 0px 117px 0px;
	height:100%;
}
* html #innercentre{
	position:relative;
	height:100%;
	overflow:auto;
	background-color: #88C2EA;
}

#innercentre{
	position:relative;
	height:100%;
	overflow:auto;
	background-color: #88C2EA;
}
.textHeader {
	font-size: 12px;
	font-weight:bold;
}
.bluetext {
	font-size: 10px;
	font-weight:normal;
}
.textEnd {
	font-size: 10px;
	font-weight:normal;
	font-style:italic;
}
body {
	background-color: #E8E8E8;
}
table {
	margin: 0px;
	padding: 0px;
}
body,td,th {
	font-family: Helvetica, Arial, Verdana, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	text-align:justify
}
body {
	background-color: #E8E8E8;
}

/* !!!!!!!!! */
/* SET LINKS */
/* !!!!!!!!! */

a:link {
	color: #FFFFFF;
}
a:visited {
	color: #FFFFFF;
}
a:hover {
	color: #FF9900;
}
a:active {
	color: #FF9900;
}

/* !!!!!!!!!!!! */
/* SET HEADINGS */
/* !!!!!!!!!!!! */

h1 {
	font-size: 36px;
}
h2 {
	font-size: 24px;
}
h3 {
	font-size: 18px;
}
h4 {
	font-size: 16px;
}
h5 {
	font-size: 14px;
}
h6 {
	font-size: 12px;
	font-weight:bold;
}

/* !!!!!!!!! */
/* SET FONTS */
/* !!!!!!!!! */

.textHeader {
	font-size: 12px;
	font-weight:bold;
}
.textNotes {
	font-size: 10px;
	font-weight:normal;
}
.textEnd {
	font-size: 10px;
	font-weight:normal;
	font-style:italic;
	color:#2F2F91;
}


.bluetext {color: #2F2F91; 
font-size: 10px;
	font-weight:normal;}

/* !!!!!!!!!!! */
/* SET LAYOUTS */
/* !!!!!!!!!!! */

.encloser {
	background-color: #FFFFFF;
	margin: 33px;
	padding: 7px;
	width: 710px;
}


.contentDark {
	padding: 5px;
	height: auto;
	width: 657px;
	background-color: #2E3091;
}
.contentDarkMed {
	padding: 5px;
	height: auto;
	width: 657px;
	background-color: #3788C7;
}
.contentMed {
	padding: 5px;
	height: auto;
	width: 657px;
	background-color: #A0CEEE;
}
.contentLightMed {
	padding: 5px;
	height: auto;
	width: 657px;
	background-color: #ACDDF7;
}
.contentLight {
	padding: 5px;
	height: auto;
	width: 657px;
	background-color: #D5ECFC;
}

HTML...(less messy)

Code:

<?xml version="1.0" encoding="iso-8859-1"?>
<!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">
<head>
<title>Jake Polonsky : Photography : Curriculum Vitae</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<link href="jp_cv.css" rel="stylesheet" type="text/css" />
</head>
<body onload="MM_preloadImages('images/menu/white/press.gif','images/menu/white/showreel.gif','images/menu/med/introduction.gif','images/menu/med/contactdetails.gif','images/menu/med/promos_b.gif','images/menu/med/commercials_b.gif','images/menu/med/credits_b.gif','images/menu/med/sub_pdf_b.gif')">
<div id="outer"> 
  <div id="centre"> 
    <div id="innercentre"><table width="565" border="0" cellspacing="26" cellpadding="0">
  <tr>
    <td><h3>JAKE POLONSKY<br />
DIRECTOR OF PHOTOGRAPHY</h3>
        <h4>AWARDS</h4>
        <p class="contentMed"><span class="textHeader">Winner Best Cinematography </span><br />
            <span class="bluetext">CADS Music Vision Awards 2004</span></p>
        <p class="contentMed"><span class="textHeader">Best Young Camera/Lighting Person 2002</span><br />
              <span class="bluetext">Broadcast Magazine </span>        </p>
        <p class="contentMed"><span class="textHeader">Winner </span><br />
              <span class="bluetext">Gold Arrow Britsh Advertising Awards 2000</span></p>
        <p class="contentMed"><span class="textHeader">Nominated for Best Cinematography</span><br />
              <span class="bluetext">CADS Music Video awards 2002 </span>        </p>
        <p class="contentMed"><span class="textHeader">Freddie Young/BSC Cinematography Scholar 1996-97</span></p>
        <p class="contentMed"> <span class="textHeader">Winner Arriflex Award for Cinematography</span> <br />
            <span class="bluetext">Fuji Scholarship Competition 1996</span></p>
        <p class="contentMed"> <span class="textHeader">Fulbright Scholarship 1994-95</span><br />
            <span class="bluetext">American Film Institute</span></p>
        <h5> Work featured in : Shots, Promo, Creative Review, Broadcast</h5>
        <h4> EDUCATIONAL HISTORY </h4>
        <p class="contentMed"><strong> 1991-94 Wadham College , Oxford <br />
            <br />
          BA(Hons) English and Modern History - First Class <br />
          <br />
          1994-95 American Film Institute <br />
          <br />
          Center for Advanced Film and Television Studies <br />
          <br />
          First Year MFA program, Cinematography <br />
          <br />
          1995-97 Royal College of Art - MA Film &amp; TV (Cinematography)</strong></p>
        </td>
  </tr>
</table>
    </div></div>
  <div id="top">
    <table width="715" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="592" valign="bottom"><img src="images/headers/curriculum_vitae.gif" alt="Contact Details" width="350" height="50" /></td>
        <td width="123" height="52" align="right" valign="bottom"><img src="images/menu/med/sub_arrow.gif" width="33" height="50" /><a href="CV_%20jakepolonsky.pdf" target="_blank" onmouseover="MM_swapImage('pdf','','images/menu/med/sub_pdf_b.gif',1)" onmouseout="MM_swapImgRestore()"><img src="images/menu/med/sub_pdf_a.gif" name="pdf" width="53" height="50" border="0" id="pdf" /></a></td>
      </tr>
    </table>
  </div>
  <div id="bottom">
    <table width="100%"  border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="1"><img src="images/menu/trans.gif" width="1" height="22" /></td>
        <td width="200" align="left" valign="middle" bgcolor="#88C2EA"><a href="home.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Introduction','','images/menu/med/introduction.gif',1)"><img src="images/menu/med/dark.gif" alt="Introduction Link" name="Introduction" width="200" height="20" border="0" id="Introduction" /></a></td>
        <td width="545" align="right" valign="top" bgcolor="#88C2EA"><div align="right"></div></td>
      </tr>
      <tr>
        <td><img src="images/menu/trans.gif" width="1" height="22" /></td>
        <td align="left" valign="middle" bgcolor="#88C2EA"><a href="contact.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','images/menu/med/contactdetails.gif',1)"><img src="images/menu/med/darkmed.gif" alt="Contact Link" name="Contact" width="200" height="20" border="0" id="Contact" /></a></td>
        <td align="right" valign="top" bgcolor="#88C2EA"><div align="right"></div></td>
      </tr>
      <tr>
        <td><img src="images/menu/trans.gif" width="1" height="22" /></td>
        <td align="left" valign="middle" bgcolor="#88C2EA"><img src="images/menu/med/curriculumvitae.gif" alt="Curriculum Vitae Link" width="200" height="20" border="0" /></td>
        <td align="right" valign="middle" bgcolor="#88C2EA"><div align="right"><img src="images/menu/med/arrow.gif" /><img src="images/menu/med/cv_b.gif" name="cv" width="34" height="20" border="0" id="cv" /><a href="cv_credits.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('credits','','images/menu/med/credits_b.gif',1)"><img src="images/menu/med/credits_a.gif" name="credits" width="60" height="20" border="0" id="credits" /></a><a href="cv_commercials.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('commercials','','images/menu/med/commercials_b.gif',1)"><img src="images/menu/med/commercials_a.gif" name="commercials" width="99" height="20" border="0" id="commercials" /></a><a href="cv_promos.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('promos','','images/menu/med/promos_b.gif',1)"><img src="images/menu/med/promos_a.gif" name="promos" width="64" height="20" border="0" id="promos" /></a><img src="images/ratio/1851.gif" alt="Area Ratio" width="92" height="20" /></div></td>
      </tr>
      <tr bgcolor="#FFFFFF">
        <td><img src="images/menu/trans.gif" width="1" height="22" /></td>
        <td align="left" valign="middle"><a href="press.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Press','','images/menu/white/press.gif',1)"><img src="images/menu/white/lightmed.gif" alt="Press Link" name="Press" width="200" height="20" border="0" id="Press" /></a></td>
        <td align="right" valign="top"><div align="right"></div></td>
      </tr>
      <tr bgcolor="#FFFFFF">
        <td><img src="images/menu/trans.gif" width="1" height="22" /></td>
        <td align="left" valign="middle"><a href="showreel_com.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Showreel','','images/menu/white/showreel.gif',1)"><img src="images/menu/white/light.gif" alt="Showreel Link" name="Showreel" width="200" height="20" border="0" id="Showreel" /></a></td>
        <td align="right" valign="top"><div align="right"></div></td>
      </tr>
    </table>
  </div>
</div>
</body>
</html>

**Paul O'B** · Oct 11, 2004 10:11

Hi,

I think you just need to adjust the bottom and top a bit more if I'm thinking correctly

Also the bottom doesn't seen to be big enough for its content.

Code:

#centre{
 position:absolute;
 top:64px;
 left:0px;
 bottom:107px;
etc..................
#bottom {
 position:absolute;
 bottom:0;
 left:0px;
 width:740px;
 height:105px;
etc..............

However its hard to tell if that solves it with the images missing when I tested locally.

Paul

User Tag List

Thread: Please can some one help me with this div problem

Thread Tools

Display

Please can some one help me with this div problem

That's much better but ... :p

Alignment Errors & Others

Bookmarks

Bookmarks

Posting Permissions