CSS - Making A 4x2 Grid From A Flickr Badge

So this is the code that Flickr spat out:
Code:

<!-- Start of Flickr Badge -->
  <style type="text/css">
.zg_div {margin:0px 5px 5px 0px; width:117px;}
.zg_div_inner {border: solid 1px #000000; background-color:#ffffff;  color:#666666; text-align:center; font-family:arial, helvetica; font-size:11px;}
.zg_div a, .zg_div a:hover, .zg_div a:visited {color:#0063dc; background:inherit !important; text-decoration:none !important;}
</style>
  <script type="text/javascript">
zg_insert_badge = function() {
var zg_bg_color = 'ffffff';
var zgi_url = 'http://www.flickr.com/apps/badge/badge_iframe.gne?zg_bg_color='+zg_bg_color+'&zg_person_id=72341505%40N00';
document.write('<iframe style="background-color:#'+zg_bg_color+'; border-color:#'+zg_bg_color+'; border:none;" width="113" height="151" frameborder="0" scrolling="no" src="'+zgi_url+'" title="Flickr Badge"></iframe>');
if (document.getElementById) document.write('<div id="zg_whatlink"><a href="http://www.flickr.com/badge_new.gne"	style="color:#0063dc;" onclick="zg_toggleWhat(); return false;">what is this?<\/a><\/div>');
}
zg_toggleWhat = function() {
document.getElementById('zg_whatdiv').style.display = (document.getElementById('zg_whatdiv').style.display != 'none') ? 'none' : 'block';
document.getElementById('zg_whatlink').style.display = (document.getElementById('zg_whatdiv').style.display != 'none') ? 'none' : 'block';
return false;
}
</script>
  <div class="zg_div">
    <div class="zg_div_inner"><a href="http://www.flickr.com">www.<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong>.com</a><br>
      <script type="text/javascript">zg_insert_badge();</script>
      <div id="zg_whatdiv">This is a Flickr badge showing public photos from <a href="http://www.flickr.com/photos/72341505@N00">illEATurHARTout</a>. Make your own badge <a href="http://www.flickr.com/badge_new.gne">here</a>.</div>
      <script type="text/javascript">if (document.getElementById) document.getElementById('zg_whatdiv').style.display = 'none';</script>
    </div>
  </div>
  <!-- End of Flickr Badge -->

How the heck would I go about centering this thing on my webpage?

Hey everyone,

I have been working on a sudoku php / html game using sessions but I have run into an issue. Here is the link to my page http://waynemarsh.byethost9.com/sudoku.php , my problem is that in Opera and IE the page doesn't look like i would think the code says it would.

in firefox, safari, epiphany, konqueror, firefox 1.0-2.0, mozilla 1.7/netscape 7, it looks great

in netscape 6 it shows 3 9x3 grids on top of each other about 2 pixels offset

in IE 5/5.5/6/7 & opera 7 it looks like a crossword

in opera 8/9 it looks like 9 3x3 grids in one column

of course netscape <= 4.8, ie <= 4, it just doesn't show, who uses them anyway?

in lynx well, it's lynx, all the text inputs show up below each other so there are 81 vertical inputs

from what I see in the code, it should show fine. anyone have any ideas? what could it be? i'm mostly worried about the opera browsers

the issue seems like it's somewhere with .sudoku_grid

Hi there,

How do I use CSS to format a list into a 3x4 grid of boxes?
I'v tired using float:left but then a one item is taller than another it goes mad, pushing everything out of place.

eg. html code:
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5...</li>
and so on
</ul>
Or is there better of doing this?

Thanks,

Sorry for the boring thread. What I am basically trying to do is make a grid of numbers (its for a small calendar), and I want to do it using css. Would appreciate any suggestions for the best way to go about it.

(an expample is the HTML code that it would be)

Code:

<table width="150" border="1">
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td></tr>
<tr><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td></tr>
<tr><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td></tr>
<tr><td>30</td><td>31</td><td>32</td><td>33</td><td>34</td><td>35</td><td>36</td></tr>
</table>

I am not to bad at the css thing but this got me foxed... I started of by indenting the margin of each <td> as <div> and appling a more negative of a top margin for each one... it started to get confusing!
Cheers,

hey guys im makling an auto dealer script for my buddy and i have an inventory page that show like a catalogue.
pic and info in a table.

i would like to make it that each new info is a diffrent color.

like product one blue background

product 2 yellow then it starts back to blue..

like a table grid view in php my admin ..