CSS Display Style

**Samishii23** · Dec 3 '09, 12:21 PM

Nope it doesn't matter if you have <?php ?> Tags inside the <body> tags. You can have as many <?php ?> tags are you want, where ever you want. On the user's end they'll never see any of them unless theres a problem on the server.

Ok I'm going to break down your original post, and give you some hints about how to code this stuff. I've seen a few errors you need to know about if the code from post #1 is exactly your code.

Problem 1:

Code:

<?php
<script type="text/javascript">

Do not have the ANY HTML tags enclosed within the <?php ?> tags. They will never run and will cause PHP errors.

Problem 2:

Code:

$sql = mysql_query("select * from table where Name like '%$term%'");

In my experience, its good practice, and sometimes nessecary to encase the names of the SQL tables, and rows within ' ' and ` ` like so...

Code:

$sql = mysql_query("SELECT * FROM `table` WHERE `Name` LIKE '%".$term."%'");

Although I admit I don't think I've seen the "LIKE" term used in SQL before... *shrug*

Suggestion 1:
Personally I always have all the Javascript <script> tags within the <head> tags at the top to declare functions. While it shouldn't be a problem to put them anywhere, its good practice, and makes the code more readable.

Suggestion 2:

Code:

echo "<table border='1'>
<tr id="table">

Since you want to Show and Hide the table, it would be a better idea to litterally hide the whole table but puting the ID in the <table> tag, and hiding that. Generally tables have alot of <tr> tags so you might end up hiding part of the table, and it might look weird after hiding.

Suggestion 3:

Code:

<script type="text/javascript">
function displayRow(){
var row = document.getElementById("table");
if (row.style.display == '') row.style.display = 'none';
else row.style.display = '';
}
</script>

As pointed out above there is no blank setting for the display style. Its either "block" for on, and "none" for off. So, I would personally have the code like this:

Code:

<script type="text/javascript">
function displayRow() {
var dRow = document.getElementById("table").style;
if ( dRow.display == "block" ) { dRow.display == "none"; }
else { dRow.display == "block"; } </script>

Now. I noticed that you have multiple rows. I can suggestion some other code if you would like to hide each row. Good Luck.

**Dormilich** · Dec 3 '09, 01:24 PM

As pointed out above there is no blank setting for the display style. Its either "block" for on, and "none" for off.

"block" is not the correct choice for tables, use "table" (as Frinny posted earlier)

Although I admit I don't think I've seen the "LIKE" term used in SQL before... *shrug*

LIKE is a valid SQL operator, nothing wrong there.

**Samishii23** · Dec 3 '09, 02:04 PM

CSS Display Style

"block" is not the correct choice for tables, use "table" (as Frinny posted earlier)

Tested on Windows XP, with Fire Fox (Up to Date), Chrome, and IE 6. All work fine. Although in FF, when the Table was shown again, the table width extended to "100%" of the screen. So might want to use a width deceleration.

Code:

function dRow() {
	var ele = document.getElementById("Table").style;
	if ( ele.display == "none" ) { ele.display = "block"; }
	else { ele.display = "none"; }
	}

Since Block is a general CSS term I would use it personally, rather then worry about using one term for the Table element, and another one for another element. It works on 3 browsers.

**Dormilich** · Dec 3 '09, 02:40 PM

Although in FF, when the Table was shown again, the table width extended to "100%" of the screen.

well, that’s what block elements usually do.

Since Block is a general CSS term I would use it personally

what makes "block" a general and "table" a special term? the frequency you use it would defy any logic.

**Samishii23** · Dec 3 '09, 02:47 PM

what makes "block" a general and "table" a special term? the frequency you use it would defy any logic.

Until this thread, I hadn't even heard of display having another 'option' in it. I've been using Block and None for years now. As for Block being a general term. You can use Block on all HTML elements that allow for a Style attribute. The most popular are DIV, SPAN, and of course TABLE and its inner tags.

**Dormilich** · Dec 3 '09, 02:54 PM

Until this thread, I hadn't even heard of display having another 'option' in it.

every page discussing the display property should have listed the allowed values.

you should have observed that a table and a block element are different (like the mentioned stretching ("bock" uses full width*, "table" uses minimum width* (similar to "inline-block")), "block" does not have vertical align, etc.)

* - by default

**Frinavale** · Dec 3 '09, 03:06 PM

Originally posted by Samishii23

Tested on Windows XP, with Fire Fox (Up to Date), Chrome, and IE 6. All work fine. Although in FF, when the Table was shown again, the table width extended to "100%" of the screen. So might want to use a width deceleration.

Code:

function dRow() {
    var ele = document.getElementById("Table").style;
    if ( ele.display == "none" ) { ele.display = "block"; }
    else { ele.display = "none"; }
    }

Since Block is a general CSS term I would use it personally, rather then worry about using one term for the Table element, and another one for another element. It works on 3 browsers.

Samishii23, you should not be using a CSS display style of "block" for a table...likewis e you should not be using a display style of "block" for a table-row.

Why?
Tables are not Blocks of data. They are Tables of data.

Here's what w3c has to say on the block dispaly style:

block:The element will generate a block box (a line break before and after the element)

Here's what w3c has to say on the table display style:

table: The element will behave like a table (like <table>, with a line break before and after)

And here's what w3c has to say about a table-row display style:

table-row: The element will behave like a table row

Now, a "table" display style and a "block" display style sounds like the same thing.

I mean, both are displayed with a line break before and after the element....but the big difference is that a table style treats the element like a table and the block style does not.

You can really mess things up using CSS. Sometimes it's very helpful to be able to turn a table into a block...but only if you know what you're doing and only if you have to do this.

Take a look at what happens to the table if you set the table element, the row elements, and the table data elements to have display styles of block:

Code:

<html>
<head>
</head>
<body>

<table id="tableID" border='1' style="display:block">
  <tr id="row1" style="display:block">
    <td style="display:block">first row, first column</td>
    <td style="display:block">first row, second column</td>
  </tr>
  <tr id="row2" style="display:block">
    <td style="display:block">second row, first column</td>
    <td style="display:block">second row, second column</td>
  </tr>
</table>

</body>
</html>

Messed up eh?
Now put it back to normal:

Code:

<html>
<head>
</head>
<body>

<table id="tableID" border='1'>
  <tr id="row1">
    <td>first row, first column</td>
    <td>first row, second column</td>
  </tr>
  <tr id="row2">
    <td>second row, first column</td>
    <td>second row, second column</td>
  </tr>
</table>

</body>
</html>

Looks like a normal table again.

You can do the same weird thing with blocks (divs)...you can force them to behave like a table.

This is how they would normally behave:

Code:

<html>
<head>
</head>
<body>

<div id="tableID" style="border:solid 1px black;">
  <div id="row1" style="border:solid 1px black; margin:1px;">
    <div style="border:solid 1px black;margin:1px;">first row, first column</div>
    <div style="border:solid 1px black;margin:1px;">first row, second column</div>
  </div>
  <div id="row2" style="border:solid 1px black; margin:1px; margin-top:0px;">
    <div style="border:solid 1px black;margin:1px;">second row, first column</div>
    <div style="border:solid 1px black;margin:1px;">second row, second column</div>
  </div>
</div>

</body>
</html>

Now let's force the divs (blocks) to behave like a table:

Code:

<html>
<head>
</head>
<body>

<div id="tableID" style="display:table; border:solid 1px black;">
  <div id="row1" style="display:table-row;border:solid 1px black; margin:1px;">
    <div style="display:table-cell;border:solid 1px black;margin:1px;">first row, first column</div>
    <div style="display:table-cell;border:solid 1px black;margin:1px;">first row, second column</div>
  </div>
  <div id="row2" style="display:table-row; border:solid 1px black; margin:1px; margin-top:0px;">
    <div style="display:table-cell;border:solid 1px black;margin:1px;">second row, first column</div>
    <div style="display:table-cell;border:solid 1px black;margin:1px;">second row, second column</div>
  </div>
</div>

</body>
</html>

Cool huh?

CSS is very powerful.

It is very important to use the appropriate styles for the appropriate purpose. This will save you many CSS bugs/headaches that may appear in the future.

You should always try to use the correct style for the correct application or
else you could end up with some very unexpected results.

-Frinny

**Frinavale** · Dec 3 '09, 03:54 PM

Since the discussion about the CSS display style was hijacking the original thread I have moved any posts regarding the CSS display style into a new thread in the HTML forum.

This will make it easier for the poster of the original thread to get help with their problem because they won't have to read through an unrelated topic regarding the CSS display style.

The original thread can be found here:

http://bytes.com/topic/php/answers/877940-php-javascript-question

Cheers!

-Frinny

CSS Display Style

CSS Display Style

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment