Unable to center table in CSS (Internet explorer)

Question

Centering and alignments works just fine on Chrome and Firefox. I haven't done HTML/CSS for quite some time, so I am unsure as to what I am doing wrong. I have already searched around and no table centering has worked for me.

fiddle: http://jsfiddle.net/y6n7ufL9/2/

    /* different things I tried to get to work */
    #table {
      display: table;
      text-align: center;
      margin-left: auto;
      margin-right: auto;
      table-layout: auto;
    }

    body {
      background-color: #ececec;
    }
    #navborderline {
      width: 50%;
      margin: auto;
      margin-top: 5px;
      height: 2px;
      background-color: black;
    }
    #navborder ul {
      text-align: center;
    }
    #navborder ul li {
      list-style-type: none;
      display: inline;
      margin-left: 5%;
      margin-right: 5%;
    }
    #navborder a {
      text-decoration: none;
      color: black;
      font-size: 18px;
      border-bottom: 1px solid transparent;
      -webkit-transition: all .3s ease-in-out;
      -moz-transition: all .3s ease-in-out;
      -o-transition: all .3s ease-in-out;
      transition: all .3s ease-in-out;
    }
    #navborder a:hover {
      border-bottom: 1px solid red;
    }
    #navborder {
      margin-top: 10px;
    }
    #table {
      width: 60%;
      margin: auto;
      margin-top: 5px;
      text-align: center;
    }
    #table td,
    tr {
      border: 1px solid black;
      width: 50%;
    }

<html>

<head>
  <title>Travis' Portfolio</title>
  <link rel="stylesheet" type="text/css" href="css/css.css" />
  <!--[if IE]>
                <link rel="stylesheet" type="text/css" href="css/ie.css" />
            <![endif]-->
  <link rel="stylesheet" type="text/css" href="css/reset.css" />
</head>

<body>
  <div id="navborder">
    <ul id="ie">
      <li><a href="#">Home</a>
      </li>
      <li><a href="#">Assignments</a>
      </li>
      <li><a href="#">Contact</a>
      </li>
      <li><a href="#">Random</a>
      </li>
    </ul>
  </div>

  <div id="mainbody">
    <table id="table">
      <thead>
        <tr>
          <td colspan="2">Ello</td>
        </tr>
      </thead>
      <tr>
        <td>Hello</td>
        <td>hello v2</td>
      </tr>
      <tr>
        <td>Hello</td>
        <td>hello v2</td>
      </tr>
    </table>
  </div>

  <div id="mainfooter"></div>
</body>

</html>

dude... just remove the padding on the menu items. they are off center by about 10px because of the default UL css. — Cayce K, Oct 29 '14 at 17:10
Cayce, that doesn't fix the table. I already have a reset in place, if you were wondering. — travis, Oct 30 '14 at 16:29
sorry to say then, but I don't see the problem :(... It isn't happening for anything that I looked at. By removing the padding it is centered in all browsers that I have tested it on... Is there a more complete area I can view it. — Cayce K, Oct 30 '14 at 16:37
I checked all of them... Are you still not seeing progress on this? I may need to attempt something else, but it will be a little bit before I can do that :( — Cayce K, Nov 03 '14 at 12:50

score 0 · Answer 1 · answered Oct 29 '14 at 17:06

0

Actually, I think it's your menu that's not quite centered (or at least the li). Probably something to do with the margins not affecting inline elements.

Jsfiddle Demo

#navborder ul li {
    list-style-type:none;
    display:inline-block; /* not just inline */
    margin-left:5%;
    margin-right:5%;
}

answered Oct 29 '14 at 17:06

Paulie_D

107,962
13
142
161

I already do have a reset that I placed. Since I don't think JSFiddle, and pasting it on here, ill link you different pages that contain the code, just so you can see it more fully, instead of cut and reduced snippets. HTML: http://pastebin.mozilla.org/7007613 Main CSS: http://pastebin.mozilla.org/7007615 IE CSS is the same as main CSS. Reset CSS: http://pastebin.mozilla.org/7007617 – travis Oct 30 '14 at 16:37

score -1 · Answer 2 · answered Oct 29 '14 at 17:05

-1

have you tried giving the div containing the table text align

#mainbody{
text-align: center;
}

i think it may work

answered Oct 29 '14 at 17:05

Moneer Kamal

1,837
16
25

Unable to center table in CSS (Internet explorer)

2 Answers2