SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot Beeper's Avatar
    Join Date
    Sep 2003
    Location
    LONDON UK
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Please can some one help me with this div problem

    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>
    Last edited by Beeper; Oct 11, 2004 at 06:13. Reason: Added images
    Never argue with an idiot.
    They just drag you down to their level...
    and beat you with experience.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,379
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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

  3. #3
    SitePoint Zealot Beeper's Avatar
    Join Date
    Sep 2003
    Location
    LONDON UK
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    That's much better but ... :p

    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
    Never argue with an idiot.
    They just drag you down to their level...
    and beat you with experience.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,379
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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

  5. #5
    SitePoint Zealot Beeper's Avatar
    Join Date
    Sep 2003
    Location
    LONDON UK
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Alignment Errors & Others

    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>
    Last edited by Beeper; Oct 11, 2004 at 09:19. Reason: Image URL
    Never argue with an idiot.
    They just drag you down to their level...
    and beat you with experience.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,379
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •