Solved

align HTML table in chrome...

Posted on 2013-06-12
14
264 Views
Last Modified: 2013-06-16
Hi, I am using the following script to align my table and it does not seem to work in Chrome, it works in FF. Can someone let me know what I can do to have it work in chrome?

div#wrapper {
        display:table;
        position:static;
        margin-top: 60px;
        left:60px;
        }


<body>
<div id="wrapper">
<table width="70%" border="0" cellspacing="4" cellpadding="4" class="table">
  <tr class="heading">
    ......


What I am trying to achieve is to have my table positioned 60px from the left side.

Thank you
0
Comment
Question by:aej1973
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 4
  • 3
14 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39242572
You should be using position:relative instead of position:static

Cd&
0
 

Author Comment

by:aej1973
ID: 39242595
Tried that but it did now work;

div#wrapper {
        display:table;
        position:relative;
        margin-top: 60px;
        padding-left:60px;
        }
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39242636
Then post a link to the page so I can see what is going on. A fragment of code does not tell me much.

Cd&
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:aej1973
ID: 39242673
Hi cd, I have attached my html file and my css file, thank you.

A
InvStyle.css
home.txt
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39242724
Well the code is pretty much worthless.  The CSS does not validate using http://jigsaw.w3.org/css-validator/

The HTML is a disaster.  It is no where near being well formed and valid.  It contains multiple doctype and html tags and is junk based on the results from http://validator.w3.org/

It is a wonder the browser displays anything more than a blank page.  There is no sense in trying to solve a rendering problem when the code is so defective.  So the forst thing you need to do is use the validators to get something that resembles valid code, then if there is still a problem it will be solvable.

Cd&
0
 
LVL 58

Expert Comment

by:Gary
ID: 39242750
Did you join 3 pages together?

Works fine for me in Chrome, though you do have your body margin which you can get rid of with
body {
margin:0;
padding:0;
}

http://jsfiddle.net/g5XpU/
0
 

Author Comment

by:aej1973
ID: 39242784
I guess, I should have stripped out the header, there were two pages joined together. Attached is a screen shot of the page. All I am trying to do is to move the table left, 60px from the left edge, thanks.

A
home.png
0
 
LVL 58

Expert Comment

by:Gary
ID: 39242841
Attach your real html code.
0
 

Author Comment

by:aej1973
ID: 39242870
I apologize regarding my previous attachment, I had copied the source code from view source and I guess it had a lot of unnecessary information.
 
<?php
include 'header_main.php';
include 'footer.html';
?>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/InvStyle.css" />
</head>
<body> 
<div id="wrapper">   
<table width="70%" border="0" cellspacing="4" cellpadding="4" class="table">
  <tr class="heading">
    <th colspan="3">System Information</th>
  </tr>
  <tr>
    <th class="homePage">Total Extensions</th>
    <th class="homePage">Join Date</th>
    <th class="homePage">Registered Phones Lines</th>
  </tr>
  <tr>
    <td class="homePageInfo"><?=$count?></td>
    <td class="homePageInfo"><?=$joinDate?></td>
    <td class="homePageInfo"><?=$rowCount?></td>
  </tr>
  <tr>
    <th class="homePage">Last Login date/time</th>
    <th class="homePage">Last Login IP</th>
    <th class="homePage">Current IP</th>   
  </tr>
  <tr>
   <td class="homePageInfo3"><?=$lastDt?></td>
    <td class="homePageInfo3"><?=$lastIp?></td>
    <td class="homePageInfo3"><?=$ipaddress?></td>
  </tr>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
     </div>
   </body>
</html>

Open in new window

0
 
LVL 58

Accepted Solution

by:
Gary earned 250 total points
ID: 39242893
Code works fine for me

http://jsfiddle.net/RsCqU/
0
 

Author Comment

by:aej1973
ID: 39242900
Chrome? It worked for me in FF.
0
 

Author Comment

by:aej1973
ID: 39242923
well I checked, jsfiddle in Chrome too and it worked. Thank you.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39242926
Does the fiddle work in Chrome? It does for me - 60px from the left even as you resize the window.
View the source of your page in Chrome and attach the code here or better still give a link if it is online.
0
 

Author Closing Comment

by:aej1973
ID: 39252192
Thank you.
0

Featured Post

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question