Jump to content

Centering DIV problem in IE6


Err

Recommended Posts

Hey all. How's it going?My <div>'s aren't centering inside of their table cells. I've tried and tried many ways, but I can't seem to get my finger on it. Please take a look at my code and give me any tips on this. It's fine on Firefox, but not on IE6.

<style type="text/css">#albums {  width: 100%;  text-align: center;}#albums tr {  text-align: center;}#albums td {  text-align: center;  width:200px;  height:200px;  border-collapse: collapse;  border: 1px solid red;}#albums div {  font-size: 13px;  color: orange;  border: 1px solid green;  width:200px;  height:200px;  margin-right: auto;  margin-left: auto;}#albums .title {  font-weight: bold;  height: 16px;  border-bottom: 0px;  vertical-align: bottom;  text-align: center;  font-family: Verdana;}</style><table id="albums">  <tr>    <td><div class="title">01/01/07: Blank Title</div><div> </div></td>    <td><div class="title">01/01/07: Blank Title</div><div> </div></td>    <td><div class="title">01/01/07: Blank Title</div><div> </div></td>  </tr>  <tr>    <td><div class="title">01/01/07: Blank Title</div><div> </div></td>    <td><div class="title">01/01/07: Blank Title</div><div> </div></td>    <td><div class="title">01/01/07: Blank Title</div><div> </div></td>  </tr></table>

Similarly, you can see it here: http://oneuse.awardspace.com/test/test_d1.html

Link to comment
Share on other sites

You've got some conflicting CSS statements. You say the table width is 100%, and then say that each td is 200px. There are only three tds, so how do you fit three 200px boxes into a 1280px table? You might want to remove the width from the tds. Also, instead of specifying the left and right margins I always use this to specify both:margin: 0 auto;In doesn't look like it should make a difference, but then again it's IE.

Link to comment
Share on other sites

Thank for your suggestions. Yeah, I put those pixels on the table cells because I was trying many ways to get it working. Funny thing is when I took off the height and width off of the table cell CSS it started working fine. I must of fixed the issue a while ago but I probably was over thinking it and overlooked that. :) Moreover, the original table isn't full browser width. The table was inside a <div> container that was a lot smaller than 1280 pixels. Thanks

Link to comment
Share on other sites

What? You are using cells? That is very dangerous with IE! :) Beside, I don't realy understand why you are using a table if you are creating one div per cell, you might as well replace the table by other divs and avoid some complications (especialy with IE). :)

Link to comment
Share on other sites

What? You are using cells? That is very dangerous with IE!
What? IE, like all other browsers, has supported tables for over 11 years without problems. There is nothing "dangerous" about using tables in IE or any other browser, the only browsers that would have a problem with tables are versions more then 11 years old, and I can't imagine why anyone would be using one of those browsers other then for nostalgia.
Link to comment
Share on other sites

What? You are using cells? That is very dangerous with IE! :) Beside, I don't realy understand why you are using a table if you are creating one div per cell, you might as well replace the table by other divs and avoid some complications (especialy with IE). :)
Simply put, I'm using a table to center the <div>s evenly. That way my <div>s can always be centered even when the browser is resized (something that's not easily done in with <div>s).
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...