Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Oct 2009
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Centre Table (Horizontally & Vertically)

    Hello All,

    I've got a table within a html page that is/was aligned centrally both horizontally and vertically on any screen resolution...until recently!

    in IE 8 the table is shown at the bottom of the page as opposed to the center. In other browsers it does align centrally in both Firefox, Safari, Opera etc.

    Please can anyone advise how in could go about rectifying this in IE8? I've attached the page/table I'm having issues with...

    Many thanks for advance for your assistance.
    Attached Files Attached Files

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Put ALL your code into the CODE tags. You will get more results that way. Click the "#" sign in the header above in the original panel.

    Thus.
    Code:
    *{
    padding:0;
    margin:0;
    }
    EDIT: You can edit your original post.


    Frank
    Last edited by effpeetee; 10-19-2009 at 11:19 AM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • Users who have thanked effpeetee for this post:

    dj_ely (10-19-2009)

  • #3
    New to the CF scene
    Join Date
    Oct 2009
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Full code below:
    Code:
    <!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>
    <meta content="en-gb" http-equiv="Content-Language" />
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>::HOME ::</title>
    <style type="text/css">
    .style1 {
    	font-family: "Century Gothic";
    	font-size: x-large;
    }
    .style5 {	color: #929C9E;
    	font-family: "Century Gothic";
    }
    .style6 {	color: #183A8D;
    }
    .style7 {	font-family: "Century Gothic";
    }
    .style8 {	font-size: large;
    }
    
    * {margin:0;padding:0}
    /* mac hide \*/
    html,body{height:100%;width:100%;}
    /* end hide */
    body {
    
    text-align:center;
    min-height:490px;/* for good browsers*/
    min-width:990px;/* for good browsers*/
    }
    #outer{
    height:100%;
    width:100%;
    display:table;
    vertical-align:middle;
    }
    #container {
    text-align: center;
    position:relative;
    vertical-align:middle;
    display:table-cell;
    height: 490px;
    }
    #inner {
    width: 990px;
    background: #ffffff;
    height: 490px;
    text-align: center;
    margin-left:auto;
    margin-right:auto;
    
    }
    
    </style>
    
    <!--[if IE ]>
    <style type="text/css">
    #container{top:50%}
    #inner{top:-50%;position:relative;}
    </style>
    <![endif]-->
    <meta content="***Text Re Background***" name="description" />
    <meta content="***KEYWORDS*** " name="keywords" />
    <script 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>
    <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
    </head>
    
    <body onload="MM_preloadImages('site nav/practice_blue.jpg','site nav/projects_blue.jpg','site nav/news_blue.jpg','site nav/contact_blue.jpg')">
    <!-- AD -->
    <div id="outer">
    <div id="container">
    <div id="inner">
    <!-- END AD -->
    <table align="center" cellpadding="0" cellspacing="0" style="width: 990px; height: 490px">
    	<!-- MSTableType="layout" -->
    	<tr>
    		<td class="style1" colspan="2" valign="top"><div align="center"><img src="site nav/TITLE.jpg" width="349" height="30" /></div></td>
    	  <td style="height: 30px" valign="top">
    		<!-- MSCellType="empty" -->
    		&nbsp;</td>
    	</tr>
    	<tr>
    		<td style="height: 30px" valign="top">
    		<!-- MSCellType="empty" -->
    		<img src="site nav/home_blue.jpg" width="133" height="30" /></td>
    	  <td colspan="2" rowspan="8" valign="top">
    		<!-- MSCellType="empty" -->
    		<script type="text/javascript">
    AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','857','height','460','src','home/flash/home','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','home/flash/home' ); //end AC code
    </script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="857" height="460">
              <param name="movie" value="home/flash/home.swf" />
              <param name="quality" value="high" />
              <embed src="home/flash/home.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="857" height="460"></embed>
    		  </object></noscript></td>
    	</tr>
    	<tr>
    		<td valign="top" bordercolor="#000000" style="height: 30px">
    		<!-- MSCellType="empty" -->
    		<a href="practice.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','site nav/practice_blue.jpg',1)"><img src="site nav/practice_white.jpg" name="Image2" width="133" height="30" border="0" id="Image2" /></a></td>
      </tr>
    	<tr>
    		<td style="height: 30px" valign="top">
    		<!-- MSCellType="empty" -->
    		<a href="projects.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','site nav/projects_blue.jpg',1)"><img src="site nav/projects_white.jpg" name="Image3" width="133" height="30" border="0" id="Image3" /></a></td>
      </tr>
    	<tr>
    		<td style="height: 30px" valign="top">
    		<!-- MSCellType="empty" -->
    		<a href="news.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','site nav/news_blue.jpg',1)"><img src="site nav/news_white.jpg" name="Image4" width="133" height="30" border="0" id="Image4" /></a></td>
      </tr>
    	<tr>
    		<td style="height: 30px" valign="top">
    		<!-- MSCellType="empty" -->
    		<a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','site nav/contact_blue.jpg',1)"><img src="site nav/contact_white.jpg" name="Image5" width="133" height="30" border="0" id="Image5" /></a></td>
      </tr>
    	<tr>
    		<td style="height: 30px" valign="top">
    		<!-- MSCellType="empty" -->
    		<img src="site nav/blank.jpg" width="133" height="30" /></td>
      </tr>
    	<tr>
    		<td style="height: 30px" valign="top">
    		<!-- MSCellType="empty" -->
    		<img src="site nav/blank.jpg" width="133" height="30" /></td>
      </tr>
    	<tr>
    		<td style="height: 250px" valign="top">
    		<!-- MSCellType="empty" -->
    		<img src="site nav/left_panel.jpg" width="133" height="250" /></td>
      </tr>
    	<tr>
    		<td style="width: 133px"></td>
    		<td style="width: 216px"></td>
    		<td style="height: 1px; width: 641px"></td>
    	</tr>
    </table>
    <!-- AD -->
    </div>
    </div>
    </div>
    <!-- END AD -->
    </body>
    
    </html>

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Thanks.

    First you do have some errors to attend to.

    See here. for html.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    I've got a table within a html page that is/was aligned centrally both horizontally and vertically on any screen resolution...until recently!
    Don't use tables for making your layout, as it's a very bad practice. You should use table only for displaying tabular data.

    With that said, tale a look at the dead centre approach
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    New to the CF scene
    Join Date
    Oct 2009
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    thanks Frank...

    I've just had a quick look and the majority of the errors have been produced by the way in which Frontpage/Expression web has created the table and/or inserted flash content within the page...the table content displays no problem i just have an issue with it not centering on IE8.

    abduraooft...
    Thanks for the links...perhaps Tables aren't best practice but its done now! The link you've sent is for centering text, not quite sure how this would then apply to the table?

    Cheers

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    The link you've sent is for centering text, not quite sure how this would then apply to the table?
    Aren't you seeing that red container?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #8
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Try this link

    Also here.

    Frank

    abduraooft, I couldn't get your link to work.
    Last edited by effpeetee; 10-19-2009 at 12:20 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Tags for this Thread

    Posting Permissions

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