Class'

[Cronthenoob]

In every class put

padding:0px;margin:0px;

[holmedwa04]

In every class put

padding:0px;margin:0px;

Nope, sorry that has just messed it up even more.

[Jack McKalling]

Maybe it would work if you define the width and height AND the padding and margin?And another thing, replace the <h1> element with the <p> element. And the other data in those cells that should not be bold/red, place that also in a <p> element, but without the bold/red class Like this:

...<td class="ncell"><p>1</p></td><td class="ncell"><p>2</p></td><td class="rcell"><p class="contrast">3</p></td>...

And then some CSS changes:

td { width:120px; height:120px; padding:0; }p { padding:0; margin:0; }p.contrast { font-weight:bold; color:red; font-family:arial; font-size:12px; }

Don't know if this can solve the problem, you should try it.

[holmedwa04]

It seems to work fine when I dont use the H1

[aspnetguy]

you could do this

		#grid{border:1px solid #000;font-family:monospace}		#grid td{padding:5px;border:1px solid #000;text-align:center}		#grid td.rcell{border-bottom:0px}		#grid td.ncell{border-right:0px;border-bottom:0px}		#grid td.bcell{border-right:0px}		#grid td.xcell{border:0px;padding:0px;}

[holmedwa04]

Is there a code to stop cells from strectching?

[Jack McKalling]

Not in CSS1 I think, but with CSS2, you can specify max-width and max-height. CSS2 is not supported in IE though.

[holmedwa04]

Right I think I have worked it out now, phew, at last! I used you first suggestion about <p> and <p class="contrast">Just I didn't need the height one, because it made all cells twice as long for some reason.Thanks Edd

[Jack McKalling]

You're welcome It got me puzzling for a while too lol

[holmedwa04]

Im ever so sorry, but I have another problem. When I put the sudoku in my page template it messed it up, reason being my normal template is a table. So if I take the bit in bold out of my CSS it works:td {font-family:arial;color:black;font-size:12pt;text-align:center;width:120px;padding:0;}But I need that, otherwise my Sudoku wont work properly, any help?

[Jack McKalling]

Apply that bolded CSS to all the td statements that have classes like "td.ncell".Because you want only those cells to have that style, and not the cells of the table this whole thing is in

#grid{border:2px solid #000} #grid td{padding:0px;border:1px solid #000; width:120px;} #grid td.rcell{border-bottom:0px} #grid td.ncell{border-right:0px;border-bottom:0px} #grid td.bcell{border-right:0px} #grid td.xcell{border:0px;padding:0px;}

[holmedwa04]

Please can you?

a:link { color:#0000ff; text-decoration:none; }a:visited { color:#0000ff; text-decoration:none; }a:hover { color:#006633; text-decoration:underline overline; }a.2:link { color:#0000ff; text-decoration:none; font-weight:bold; }a.2:visited { color:#0000ff; text-decoration:none; font-weight:bold; }a.2:hover { color:#006633; text-decoration:underline overline; font-weight:bold; }a.3:link { color:#000000; text-decoration:none; }a.3:visited { color:#000000; text-decoration:none; }a.3:hover { color:#006633; text-decoration:underline overline; }a.4:link { color:#ff0000; text-decoration:none; }a.4:visited { color:#ff0000; text-decoration:none; }a.4:hover { color:#006633; text-decoration:underline overline; }body { scrollbar-3dlight-color:#000000;scrollbar-arrow-color:#FFFFFF;scrollbar-base-color:#000033;scrollbar-darkshadow-color:#000000;scrollbar-face-color:#000066;scrollbar-track-color:#000099;scrollbar-shadow-color:#000033; }body {font-family:arial;color:black;font-size:12pt;}td {font-family:arial;color:black;font-size:12pt;text-align:center;width:120px;padding:0;}#grid{border:1px solid #000}#grid td{padding:5px; border:1px solid #000; text-align:center;}#grid td.rcell{border-bottom:0px}#grid td.ncell{border-right:0px;border-bottom:0px}#grid td.bcell{border-right:0px}#grid td.xcell{border:0px;padding:0px;}p { padding:0; margin:0; }p.contrast { font-weight:bold; color:red; font-family:arial; font-size:12pt; }

[holmedwa04]

Now, I have managed to do that, but now text will not align in the actual grid, and the p.answer and p that we set are not working now.Please can you help me???This is my code:

#grid{border:3px solid #000;}#grid td{padding:0px; border:1px solid #000; width="120;text-align:center;}#grid td.rcell{border-bottom:0px; padding:0px; width:120px; text-align:center;}#grid td.ncell{border-right:0px;border-bottom:0px; padding:0px; width:120px; text-align:center;}#grid td.bcell{border-right:0px; padding:0px; wodth:120px; text-align:center;}#grid td.xcell{border:0px;padding:0px; padding:0px; width:120px; text-align:center;}p { padding:0; margin:0; }p.answer { font-weight:bold; color:red; font-family:arial; font-size:12pt; }

[Jack McKalling]

There is a little equal sign and a double quote on the second line of that piece of CSS They should be together replaced by a colon.

[holmedwa04]

There is a little equal sign and a double quote on the second line of that piece of CSS They should be together replaced by a colon.

Wow, thanks it is working now, its just I am used to write blah="blah" so I did that by mistake.With Many Thanks Edward

[Jack McKalling]

Haha you're welcome Anyone makes that mistake now and then so don't worry.

[holmedwa04]

Haha you're welcome Anyone makes that mistake now and then so don't worry.

I know this sounds really random... but what does that smiley mean, this one ?

[Jack McKalling]

Its a wink, haha lol

[holmedwa04]

Now, although I said I thought that I had got it working it doesn't seem to work when I fill it in completely, and it seems to be when there are 3 red and bold numbers below a row that has normal numbers, I have put a print screen below and my code. The funny thing is that although it doesn't seem to work, when I look at the print preview it looks fine.This is my code:

<html><head><title>Sudoku Puzzle 01 Answers (Easiest)</title></head><LINK rel="stylesheet" type="text/css" href="sudokustylesheet.css"><body bgcolor="#000066" link="blue" vlink="blue"><font size="3"><font face="Arial"><font color="black"><center><table border="0" cellpadding="100" cellspacing="0" width="85%" bordercolor="#000000" bgcolor="#FFFFFF"><tr><td><BR><font size="5"> <center><b><u>Sudoku Puzzle 01 Answers (Easiest)</u></b><BR><BR></center><font size="2">Check your answers by marking of all of the numbers that you have correct by checking them off with the red answers.<BR><BR><BR><BR><center><table id="grid" cellspacing="0" cellpadding="0" width="120" height="120"> <tr>  <td class="xcell">   <table cellspacing="0" cellpadding="0" width="120" height="120">    <tr>     <td class="ncell"><p class="a">2</p></td>     <td class="ncell"><p class="">5</p></p></td>     <td class="rcell"><p class="">1</p></td>    </tr>    <tr>     <td class="ncell"><p class="">3</p></td>     <td class="ncell"><p class="a">6</p></td>     <td class="rcell"><p class="a">9</p></td>    </tr>    <tr>     <td class="bcell"><p class="">8</p></td>     <td class="bcell"><p class="a">7</p></td>     <td><p class="a">4</p></td>    </tr>   </table>  </td>  <td class="xcell">   <table cellspacing="0" cellpadding="0" width="120" height="120">    <tr>     <td class="ncell"><p class="a">9</p></td>     <td class="ncell"><p class="a">6</p></td>     <td class="rcell"><p class="a">8</p></td>    </tr>    <tr>     <td class="ncell"><p class="">4</p></td>     <td class="ncell"><p class="a">7</p></td>     <td class="rcell"><p class="">5</p></td>    </tr>    <tr>     <td class="bcell"><p class="a">1</p></td>     <td class="bcell"><p class="">3</p></td>     <td><p class="a">2</p></td>    </tr>   </table>  </td>  <td class="xcell">   <table cellspacing="0" cellpadding="0" width="120" height="120">    <tr>     <td class="ncell"><p class="">4</p></td>     <td class="ncell"><p class="">3</p></td>     <td class="rcell"><p class="a">7</p></td>    </tr>    <tr>     <td class="ncell"><p class="a">8</p></td>     <td class="ncell"><p class="a">1</p></td>     <td class="rcell"><p class="">2</p></td>    </tr>    <tr>     <td class="bcell"><p class="a">9</p></td>     <td class="bcell"><p class="a">5</p></td>     <td><p class="">6</p></td>    </tr>   </table>  </td> </tr> <tr>  <td class="xcell">   <table cellspacing="0" cellpadding="0" width="120" height="120">    <tr>     <td class="ncell"><p class="a">5</p></td>     <td class="ncell"><p class="">2</p></td>     <td class="rcell"><p class="a">8</p></td>    </tr>    <tr>     <td class="ncell"><p class="a">7</p></td>     <td class="ncell"><p class="a">1</p></td>     <td class="rcell"><p class="">3</p></td>    </tr>    <tr>     <td class="bcell"><p class="a">9</p></td>     <td class="bcell"><p class="">4</p></td>     <td><p class="a">6</p></td>    </tr>   </table>  </td>  <td class="xcell">   <table cellspacing="0" cellpadding="0" width="120" height="120">    <tr>     <td class="ncell"><p class="">3</p></td>     <td class="ncell"><p class="">9</p></td>     <td class="rcell"><p class="">1</p></td>    </tr>    <tr>     <td class="ncell"><p class="a">6</p></td>     <td class="ncell"><p class="a">8</p></td>     <td class="rcell"><p class="a">4</p></td>    </tr>    <tr>     <td class="bcell"><p class="">2</p></td>     <td class="bcell"><p class="">5</p></td>     <td><p class="">7</p></td>    </tr>   </table>  </td>  <td class="xcell">   <table cellspacing="0" cellpadding="0" width="120" height="120">    <tr>     <td class="ncell"><p class="a">6</p></td>     <td class="ncell"><p class="">7</p></td>     <td class="rcell"><p class="a">4</p></td>    </tr>    <tr>     <td class="ncell"><p class="">5</p></td>     <td class="ncell"><p class="a">2</p></td>     <td class="rcell"><p class="a">9</p></td>    </tr>    <tr>     <td class="bcell"><p class="a">1</p></td>     <td class="bcell"><p class="">8</p></td>     <td><p class="a">3</p></td>    </tr>   </table>  </td> </tr> <tr>  <td class="xcell">   <table cellspacing="0" cellpadding="0" width="120" height="120">    <tr>     <td class="ncell"><p class="">4</p></td>     <td class="ncell"><p class="a">3</p></td>     <td class="rcell"><p class="a">5</p></td>    </tr>    <tr>     <td class="ncell"><p class="">6</p></td>     <td class="ncell"><p class="a">8</p></td>     <td class="rcell"><p class="a">7</p></td>    </tr>    <tr>     <td class="bcell"><p class="a">1</p></td>     <td class="bcell"><p class="">9</p></td>     <td><p class="">2</p></td>    </tr>   </table>  </td>  <td class="xcell">   <table cellspacing="0" cellpadding="0" width="120" height="120">    <tr>     <td class="ncell"><p class="a">7</p></td>     <td class="ncell"><p class="">1</p></td>     <td class="rcell"><p class="a">6</p></td>    </tr>    <tr>     <td class="ncell"><p class="">5</p></td>     <td class="ncell"><p class="a">2</p></td>     <td class="rcell"><p class="">9</p></td>    </tr>    <tr>     <td class="bcell"><p class="a">8</p></td>     <td class="bcell"><p class="a">4</p></td>     <td><p class="a">3</p></td>    </tr>   </table>  </td>  <td class="xcell">   <table cellspacing="0" cellpadding="0" width="120" height="120">    <tr>     <td class="ncell"><p class="a">2</p></td>     <td class="ncell"><p class="a">9</p></td>     <td class="rcell"><p class="">8</p></td>    </tr>    <tr>     <td class="ncell"><p class="a">3</p></td>     <td class="ncell"><p class="a">4</p></td>     <td class="rcell"><p class="">1</p></td>    </tr>    <tr>     <td class="bcell"><p class="">7</p></td>     <td class="bcell"><p class="">6</p></td>     <td><p class="a">5</p></td>    </tr>   </table>  </td> </tr></table></center><BR><BR><BR><center><BR><form> <input type="Button" value="Back" onclick="history.back()"> </form><BR>______________________________________________________<BR><font size=1>Edward Holmes, SMC @ CCMS, <a href="mailto:shapemakingclub@btconnect.com">shapemakingclub@btconnect.com</a></center></td></tr></table></center></body></html>

...And this is my CSS:

a:link { color:#0000ff; text-decoration:none; }a:visited { color:#0000ff; text-decoration:none; }a:hover { color:#006633; text-decoration:underline overline; }a.2:link { color:#0000ff; text-decoration:none; font-weight:bold; }a.2:visited { color:#0000ff; text-decoration:none; font-weight:bold; }a.2:hover { color:#006633; text-decoration:underline overline; font-weight:bold; }a.3:link { color:#000000; text-decoration:none; }a.3:visited { color:#000000; text-decoration:none; }a.3:hover { color:#006633; text-decoration:underline overline; }a.4:link { color:#ff0000; text-decoration:none; }a.4:visited { color:#ff0000; text-decoration:none; }a.4:hover { color:#006633; text-decoration:underline overline; }body { scrollbar-3dlight-color:#000000;scrollbar-arrow-color:#FFFFFF;scrollbar-base-color:#000033;scrollbar-darkshadow-color:#000000;scrollbar-face-color:#000066;scrollbar-track-color:#000099;scrollbar-shadow-color:#000033; }body {font-family:arial;color:black;font-size:12pt;}td {font-family:arial;color:black;font-size:12pt;}#grid{border:3px solid #000;}#grid td{padding:0px; border:1px solid #000; width:120;text-align:center;}#grid td.rcell{border-bottom:0px; padding:0px; width:120px; text-align:center;}#grid td.ncell{border-right:0px;border-bottom:0px; padding:0px; width:120px; text-align:center;}#grid td.bcell{border-right:0px; padding:0px; wodth:120px; text-align:center;}#grid td.xcell{border:0px;padding:0px; padding:0px; width:120px; text-align:center;}p { padding:0; margin:0; }p.n { padding:0; margin:0; color:white; }p.a { font-weight:bold; color:red; font; }

[holmedwa04]

Please can you help me?

[Jack McKalling]

I understand what the problem is. At first, I didn't see what the problem was. What the problem is, that each row without any bold numbers, shortenout a little, where the row below that one would take in the left space :blink:It is just that the cells with bold numbers are theoretical bigger than the ones without boldness, and that is caused by the margin:0;. You do can specify margins, but only for the cells without bold numbers. You should use trial and error there to determine what exactly the margins should be there. Because the margins are down for all cells, it thinks the cells get bigger when the content is bold So you should compensate it at the cells that don't get bigger. Only the normal cells that have no bolded cell in the same row would get affected because when there is a bolded cell, the normal cells are on the same row and will always be equeally heighted eventhough they are defined to be smaller.I see you don't have specified the "n" class at the cells, I would ask you to do so, or remove the class attribute. :blink:CSS for compensation:

p { padding:0; margin:0; }p.n { padding:0; margin:2px; color:white; }p.a { font-weight:bold; color:red; font; }

Please remove the red part, it doesn't do anything The blue part I am not sure of, but if you would try what effect what number has, you can probably come to the correct number :blink:Am I clear enough, or should I not explain so thouroughly ?

[holmedwa04]

Nope, sorry that hasn't worked.

[holmedwa04]

Why isent dan answering? I NEED HELP PLEASE

[Jack McKalling]

Sorry Have a real life too you know :)I don't know what you mean with "it is not working", could you specify what goes wrong?

[holmedwa04]

Sorry Have a real life too you know :)I don't know what you mean with "it is not working", could you specify what goes wrong?

Well, you said about playing around with the margin, and even when I set it to 100 it didn't alter anything.