CSS/RB bug or my error??

[Core]

Can't seem to get the CSS class to work

It works in the TD but not for the TR.
Is this my error?

cssclass ".stuff","{
      border: 1px solid red;
}"

cssclass ".test","{
 color: orange;
}"

cssclass ".blue","{
    color: blue;
}"

html "</div>
<table class='stuff'>
  <caption >The Table Head should be Blue and the TD should be Orange</caption>
  <tr><span class = 'blue'>
    <th>Type </th>
    <th> Description</th></span>
  </tr>
  <span class='test'>
    <tr><span class = 'test'>
      <td>This should</td>
      <td>be Orange</td>
      <td><span class='test'>ORANGE TEXT</span></td></span>
    </tr>
  </span>
</table>"

[davos1]

;D
hi,maybe you need to set an id in that part before applying the style.
or if use cssclass set an # in the name.
The id seems to be needle to apply the style and be identified by rb.

if you use an existent cssid, that will be taken, if it is not applied, then it looks for a cssclass.
no mixed calls...

cssid #al,"{
color: orange;
}"

cssclass "#el","{
color: cyan;
}"

cssid #divtest,"{
color: red;
}"
cssclass "#ct","{
color: blue;
}"

html "</div>
<table id=al >
<caption >The Table Head should be BlueTD should be Orange? or cyan</caption>
</table>
<table id='ct' style=ct>
<caption >The Table Hea blue</caption>
</table>
<table id='el' style=divtest>
<caption >The Table cyan, no red</caption>
</table>
<table id='al' style=ct>
<caption >The Table orange, not blue</caption>
</table>"

[rich357]

One thing I noticed is you are spanning across multiple td's which ain't gonna happen.
For styling the text try this in the css:
cssclass "caption","{color:blue;}"
caption can also be td or th or even tr.

you should only use span within a single element not a group of data cells.

[rossconz]

core

I have mucked around with your example and ended up showing various ways of using classes to change color. The class statement should be inside the object you are trying to control whether it is <table>, <tr>,<th>, <td> ...

cssclass ".stuff","{
      border: 1px solid red;
}"

cssclass ".orange","{
 color: orange;
}"
cssclass ".green","{
 color: green;
}"
cssclass ".blue","{
    color: blue;
}"
cssclass ".boldprint", "{
    font-weight: bold;
}"
cssclass ".red", "{
   color: red;
}"

html "
<table class='stuff'>
  <caption >Some Examples of CSS and colors</caption>
  <tr class = 'blue'>
    <th>Type </th>
    <th> Description</th>
  </tr>
  <tr>
    <th>Type </th>
    <th> This is the default color for the table</th>
  </tr>
  <tr class = 'blue'>
    <th>Blue Printed </th>
    <th class='green'>Green on the th has overridden blue on the tr</th>
  </tr>
    <tr class = 'orange'>
      <td>Orange Shown</td>
      <td class='blue'>blue on the td has overridden orange on the tr</td>
    </tr>
    <tr class='orange'>
      <td class='green'>Orange</td>
      <td class='blue boldprint'>multiple classes can be called at a time</td>
    </tr>
</table>"

html "<br>
<table class='stuff red'>
  <caption >Some Examples of CSS and colors</caption>
  <tr class = 'blue'>
    <th>Type </th>
    <th> Description</th>
  </tr>
  <tr>
    <th>Type </th>
    <th> This is the default color for the table</th>
  </tr>
  <tr class = 'blue'>
    <th>Blue Printed </th>
    <th class='green'>Green on the th has overridden blue on the tr</th>
  </tr>
    <tr class = 'orange'>
      <td>Orange Shown</td>
      <td class='blue'>blue on the td has overridden orange on the tr</td>
    </tr>
    <tr class='orange'>
      <td class='green'>Orange</td>
      <td class='blue boldprint'>multiple classes can be called at a time</td>
    </tr>
</table>"

As far as the example by davos1, I would suggest leaving id's until you master classes first.

Ross

[Core]

Thanks guys for the great responses

Being a 'neewbi' at RB, html, CSS, JavaScript I'm sure you can easily see how one can get easily confused.

After a little more experimenting and 'rossconz' and 'davos1' examples I see how the style must be included in the 'object'.

Now for what started all this.

I've been working though some examples in the RB help files on Tables and 'sqlite'. After viewing the source HTML that RB creates on tables and 'sqlite' tables you see some interesting stuff.

Take for example this one in the Help file under 'Tables'

  'present some options
  dim options$(1, 2)
  options$(0, 0) = "Regular"
  options$(0, 1) = "Latte"
  options$(0, 2) = "Espresso"
  options$(1, 0) = "Classic drip"
  options$(1, 1) = "Coffee and frothy milk"
  options$(1, 2) = "Concentrated coffee goodness"
  table #menu, options$()
  #menu columnnames("Drink type,Description")
  #menu caption("Coffee menu")
  #menu link("Drink type", "[order]")
  'set a background color (light blue) to the caption
  cssclass "caption", "{ background: #CCF }"
  cssclass "table", "{ border: 3px ridge #DDF ; border-spacing: 4px }"
  cssclass "tr", "{ background: #CCF }"
  render #menu
  wait

[order]
  print "You ordered "; options$(0, RowIndex-1)
  wait

The above RB code produces the below HTML.

<table>
  <caption >Coffee menu</caption>
  <tr>
    <th>Drink type</th><th>Description</th>
  </tr>
  <span class="row-odd">
    <tr>
      <td><a href="?_s=sval1_k=kval2">Regular</a></td>
      <td>Classic drip</td>
    </tr>
  </span>
  <tr>
    <td><a href="?_s=sval3_k=kval4">Latte</a></td>
    <td>Coffee and frothy milk</td>
  </tr>
  <span class="row-odd">
  <tr>
    <td><a href="?_s=sval5_k=kval6">Espresso</a></td>
    <td>Concentrated coffee goodness</td>
  </tr>
  </span>
</table>

Notice that every other Table row is given a 'class' of 'row-odd'. This concept is a great idea but the 'span class= row-odd' is useless because it has 'no' effect what-so-ever on the Elements it encases.

SO being a 'neewbi' I assumed I was in error. But after further review I believe RB is in error.
Corrrect me if I'm wrong but this should be parsed as:

<tr class = 'row-odd'>
  <td>1</td>
  <td>2</td>
</tr>

and not as.

<span class='row-odd'>
 <tr>
    <td>1</td>
    <td>2</td>
 </tr>
</span>

also when you crreate a 'sqlite' table the 'output HTML' from RB changes slightly as shown below.

<table>
  <caption>My sqlite database</caption>
     <tr>
          <th>Name</th>
          <th>Location</th>
     </tr>
     <tr>
        <span class="row-odd">
          <td>Person A</td>
          <td>USA</td>
        </span>
     </tr>
</table>

Notice how the rendered HTML for the 'sql table' is different from the 'Table' rendered above? The <span class=> is now a 'child of the <tr> but has no usefull on its children.

It appears that 'both' tables are parsed incorrectly by RB as both 'span elements' will have no effect on the objects.
PLEASE correct me if I am WRONG with the above statements.

This is where this 'neewbi' got confused. What is the purpose of the 'span' element that RB creates?

Thanks guys for the help.

Respectfully,

Core

[rossconz]

core

In your code example above - RB generates the following HTML code -

<table>
  <caption >Coffee menu</caption>
  <tr>
    <th>Drink type</th><th>Description</th>
  </tr>
  <span class="row-odd">
    <tr>
      <td><a href="?_s=sval1_k=kval2">Regular</a></td>
      <td>Classic drip</td>
    </tr>
  </span>
  <tr>
    <td><a href="?_s=sval3_k=kval4">Latte</a></td>
    <td>Coffee and frothy milk</td>
  </tr>
  <span class="row-odd">
  <tr>
    <td><a href="?_s=sval5_k=kval6">Espresso</a></td>
    <td>Concentrated coffee goodness</td>
  </tr>
  </span>
</table>

When I ran this and then started analysing the web page with webdeveloper.com's Firefox plug-in I found it's 'View Generated Source' produced -

<form action="" name="form1312" method="post">
	<div id="monospaced">
		<span class="row-odd"></span>
		<span class="row-odd"></span>
		<table id="#menu">
			<caption>Coffee menu</caption>
			<tbody>
				<tr>
					<th>Drink type</th>
					<th>Description</th>
				</tr>
				<tr>
					<td><a href="?_s=tctMdYiILKMZUKlQ&_k=ZNCayOyP&2" onclick="submitFormTriggeringCallback('form1312', '2', "href" ); return false;">Regular</a></td>
					<td>Classic drip</td>
				</tr>
				<tr>
					<td><a href="?_s=tctMdYiILKMZUKlQ&_k=ZNCayOyP&3" onclick="submitFormTriggeringCallback('form1312', '3', "href" ); return false;">Latte</a></td>
					<td>Coffee and frothy milk</td>
				</tr>
				<tr>
					<td><a href="?_s=tctMdYiILKMZUKlQ&_k=ZNCayOyP&4" onclick="submitFormTriggeringCallback('form1312', '4', "href" ); return false;">Espresso</a></td>
					<td>Concentrated coffee goodness</td>
				</tr>
			</tbody>
		</table>
	</div
	><div>
	<input name="_s" value="tctMdYiILKMZUKlQ" class="hidden" type="hidden"> <input name="_k" value="ZNCayOyP" class="hidden" type="hidden"> 
	</div>
</form>

The <span> elements have been shifted up to before the <table> start. This is probably what the web browser is doing to the HTML generated by RB before actually displaying anything on screen. This is why alternate color changes are not taking effect.

Also I notice TBODY Elements are being inserted.

So -
1. The Firefox Browser is effectively ignoring <span>elements within a <table> definition.
2. The class definitions are being applied to the whole table regardless of the </SPAN> position.
3. RB is not making the correct assumptions about SPAN use.

I would write my own Table HTML code anyway and not use RB's table facility - That way I have more control.

I am still not certain about exactly how <span></span> should be used.

Best Regards
Ross

[Core]

Ross,

Yes there is a BIG difference between the 'View Source' that RB sends to the browser and the 'View generated source' that is interpreted by the browser.

I decided to not spend any more time on it as time is precious. I've already started putting together an RB/JavaScript function to resolve all this and add flare to my sqLite tables.

The code is almost complete but VERY VERY messy.

Here is a snapshot of a sample sqLite table.
But I tell you it would be very easy to to do the below if the 'odd-row' class worked.

[rossconz]

core

I would have thought that you could achieve alternating row colours with a bit of code something like -

rows=rows+1
if rows mod 2=0 then
html "<tr class='evencolour'>"
else
html "<tr class='oddcolour'>"
end if

Ross