Width and height not working

HTML & CSS
#1

I have a PHP script that I am using to create a table. The CSS is as follows:

<style type='text/css'> 
.boardsquare { border-color: black; border-width: 1; border-style: solid; width:50px; height:50px; font-size: 2em; text-align: center; background-color:pink; } 
body {margin-right: 10%; margin-left: 10%;  }
</style>

The following PHP script is used to call it:

if(isset($attempt1))  // print out letters of first attempt
	{ 	$letter_place = 0;
		foreach($attempt1 as $try_letter)
			{
				$background_color = in_word ($try_letter, $answer_letters);
				if ($try_letter == $answer_letters[$letter_place]) $background_color='green';
				echo "<td class='boardsquare'>";
				echo $try_letter;
				echo "</td>";
				$letter_place = $letter_place + 1;
			}
	}
else //if no first attempt yet, insert textboxes
	{	
		echo "<td class='boardsquare'> <input type='text' id='1a' name='1a' maxlength='1' value='Z'> </td>";
		echo "<td class='boardsquare'> <input type='text' id='1b' name='1b' maxlength='1'> </td>";
		echo "<td class='boardsquare'> <input type='text' id='1c' name='1c' maxlength='1'> </td>";
		echo "<td class='boardsquare'> <input type='text' id='1d' name='1d' maxlength='1'> </td>";
		echo "<td class='boardsquare'> <input type='text' id='1e' name='1e' maxlength='1'> </td>";
		echo "<tr>";
		$last_row = 'yes';
	}

The problem is that the width and height setting are not applying when I run the program. It is reading the CSS, because the rest of the CSS code works (the cells are pink, for instance). But the cells are not 50px by 50 px like I want. The second half of the script (the else clause) is what is calling it (the Z appears in the first cell).

If I copy the CSS code and put it in a simple html document and create a small table, the cells size just fine, but not when it is called from the PHP program. Does anyone have any idea why the settings don’t take? (I have tried it in three different browsers – all the same.)

#2

Your description doesn’t contain enough information to help you.

What is the html markup for the page that doesn’t work, what result are you getting from that markup, and what exactly is wrong with that result or what should the result look like.

What is the html markup for the simple html document that does produce the expected output and what does that result look like.

You also need to validate the resulting web pages at validator.w3.org

#3

The html markup that precedes the script shown is contained in this php script:

echo "<form action='hurdle.php' method='POST'>";
echo "<table>";
echo "<tr>";

“what result are you getting from that markup”  not sure exactly what you are asking, but I do get a table as I expect, it is just that the size of the cells isn’t correct.

“what exactly is wrong with that result or what should the result look like”  The table comes out with long cells, instead of square 50px by 50px cells.

The code for the other simple html page that I created is:

<style type='text/css'> 
.boardsquare { border-color: black; border-width: 1; border-style: solid; width:50px; height:50px; font-size: 2em; text-align: center; background-color:pink; } 
body {margin-right: 10%; margin-left: 10%;  }
</style>

<table>
<tr> <td class='boardsquare'> Hi </td> <td class='boardsquare'>bye</td> <td>also</td> <tr>
</table>

This generates a table which looks like what I expect. The first two cells are nice squares, 50px by 50px, and the third is not.

I validated the code and fixed all the errors. (Thank you for that tip. I will need to remember to always do that.) Still the same results.
Related question: I don’t know how to view the html code that is generated by my php script. Do you know how I can do this?

#4

Aha! Not exactly the same result. The height seems to be 50px now, but not the width.

#5

To view the html page source in your browser, there’s usually a right-click menu item.

#6

Ah, yes. There is. Thank you. The entire body of the page appears on one line, though!

#7

The CSS for width seems to be okay in the resulting page: “width:50px;”. So I still don’t know why it won’t “take”.

#8

I solved the problem by adding min-width and max-width values. If anyone has an idea why it didn’t work with just the width attribute, I would still love to know. Thanks.

Sponsor our Newsletter | Privacy Policy | Terms of Service