CSSClass and DIVs

This code works.

 Cls
 Dim key(5, 5)
 For row = 1 to 5
 For col = 1 to 5
 key(col, row) = Int(Rnd(1) * 9) + 1
 n = Int(Rnd(1) * 2)
 If n Then
 key(col, row) = key(col, row) * -1
 End If
 Next col
 Next row
 Call Containers
 For row = 1 to 5
 For col = 1 to 5
 Call SetClassBox col, row ' Assigns cssClass to links
 Next col
 Next row
 Div NumberGrid
 For row = 1 to 5
 For col = 1 to 5
 lnk$ = "#box";col;row
 If key(col, row) > 0 Then
 n$ = Str$(key(col, row))
 Else
 n$ = ""
 End If
 Link #lnk,ドル n,ドル QuitApp
 #lnk$ cssClass(Mid$(lnk,ドル 2))
 Next col
 Next row
 End Div
Wait

Sub QuitApp key$
 Print key$
End
End Sub

Sub SetClassBox col, row
 lnk$ = "a.box";col;row
 cssClass lnk,ドル "{
 Text-Decoration: None;
 Font-Family: Verdana;
 Font-Size: 24pt;
 Text-Align: Center;
 Color: #9999FF;
 Width: 30px;
 Height: 34px;
 Display: Block;
 Border-Top: 1px Dotted Red;
 Border-Left: 1px Dotted Red;
 Float: Left;
 }"
 If col = 5 Then
 cssClass lnk,ドル "{Border-Right: 1px Dotted Red}"
 End If
 If row = 5 Then
 cssClass lnk,ドル "{Border-Bottom: 1px Dotted Red}"
 End If
 cssClass lnk$;":Hover", "{
 Color: #000099;
 Background: #99FF99;
 }"
End Sub

Sub Containers
 cssID #NumberGrid, "{
 Background: #FFFFCC;
 Width: 156px;
 Height: 176px;
 }"
End Sub

If the CSSClASS command is moved inside of the DIV, RB hangs

 Cls
 Dim key(5, 5)
 For row = 1 to 5
 For col = 1 to 5
 key(col, row) = Int(Rnd(1) * 9) + 1
 n = Int(Rnd(1) * 2)
 If n Then
 key(col, row) = key(col, row) * -1
 End If
 Next col
 Next row
 Call Containers
 For row = 1 to 5
 For col = 1 to 5
' Call SetClassBox col, row (Moved to inside of DIV)
 Next col
 Next row
 Div NumberGrid
 For row = 1 to 5
 For col = 1 to 5
 Call SetClassBox col, row ' Will now cause RB to hang
 lnk$ = "#box";col;row
 If key(col, row) > 0 Then
 n$ = Str$(key(col, row))
 Else
 n$ = ""
 End If
 Link #lnk,ドル n,ドル QuitApp
 #lnk$ cssClass(Mid$(lnk,ドル 2))
 Next col
 Next row
 End Div
Wait

Sub QuitApp key$
 Print key$
End
End Sub

Sub SetClassBox col, row
 lnk$ = "a.box";col;row
 cssClass lnk,ドル "{
 Text-Decoration: None;
 Font-Family: Verdana;
 Font-Size: 24pt;
 Text-Align: Center;
 Color: #9999FF;
 Width: 30px;
 Height: 34px;
 Display: Block;
 Border-Top: 1px Dotted Red;
 Border-Left: 1px Dotted Red;
 Float: Left;
 }"
 If col = 5 Then
 cssClass lnk,ドル "{Border-Right: 1px Dotted Red}"
 End If
 If row = 5 Then
 cssClass lnk,ドル "{Border-Bottom: 1px Dotted Red}"
 End If
 cssClass lnk$;":Hover", "{
 Color: #000099;
 Background: #99FF99;
 }"
End Sub

Sub Containers
 cssID #NumberGrid, "{
 Background: #FFFFCC;
 Width: 156px;
 Height: 176px;
 }"
End Sub

While this may be more a peculiarity of css styling than an RB bug, mention should be made somewhere in the help file that all styling should be assigned before the page is rendered and not during the rendering itself.

This is very interesting, Janet!

Run the version that works, and take a look at the HTML source for the page. Then do the same with this version:

'by Janet, from Run BASIC Forum, 1 Feb 2008 
 Cls
 Dim key(5, 5)
 For row = 1 to 5
 For col = 1 to 5
 key(col, row) = Int(Rnd(1) * 9) + 1
 n = Int(Rnd(1) * 2)
 If n Then
 key(col, row) = key(col, row) * -1
 End If
 Next col
 Next row
 Call Containers
 'For row = 1 to 5
 ' For col = 1 to 5
 Call SetClassBox ' Assigns cssClass to links
 ' Next col
 'Next row
 Div NumberGrid
 For row = 1 to 5
 For col = 1 to 5
 lnk$ = "#box";col;row
 If key(col, row) > 0 Then
 n$ = Str$(key(col, row))
 Else
 n$ = ""
 End If
 Link #lnk,ドル n,ドル QuitApp
 #lnk$ cssClass(Mid$(lnk,ドル 2))
 Next col
 Next row
 End Div
Wait

Sub QuitApp key$
 Print key$
End
End Sub

Sub SetClassBox
 lnk$ = "a.box";col;row
 cssClass "a", "{
 Text-Decoration: None;
 Font-Family: Verdana;
 Font-Size: 24pt;
 Text-Align: Center;
 Color: #9999FF;
 Width: 30px;
 Height: 34px;
 Display: Block;
 Border-Top: 1px Dotted Red;
 Border-Left: 1px Dotted Red;
 Float: Left;
 }"
 If col = 5 Then
 cssClass lnk,ドル "{Border-Right: 1px Dotted Red}"
 End If
 If row = 5 Then
 cssClass lnk,ドル "{Border-Bottom: 1px Dotted Red}"
 End If
 cssClass "a";":Hover", "{
 Color: #000099;
 Background: #99FF99;
 }"
End Sub

Sub Containers
 cssID #NumberGrid, "{
 Background: #FFFFCC;
 Width: 156px;
 Height: 176px;
 }"
End Sub

Carl does some sneaky stuff under the hood, doesn't he? ::)

It works OK if 'div and end div' are replaced by html "<div id=""NumberGrid"">" and html "</div>"

There is another reported bug relating to css not working inside a native div.

Mike.

I'd call that a bug. Fascinating (call me Spock). Thanks for reporting it.

-Carl

Okay, we have a fix for this now for v1.0.1.

How come nobody called me Spock? :P

-Carl

SPOCK!

I'd say our Dr. Spock is pretty ingenious indeed! ;)
I'm finding I rather like these customized links.