CSSClass and DIVs

[Janet]

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.

[Jerry Muelver]

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?

[mikeukmid]

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.

[carlgundel]

janet said:

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

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.

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

-Carl

[carlgundel]

carlgundel said:

janet said:

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

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.

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?

-Carl

[turbov21]

carlgundel said:

How come nobody called me Spock?

-Carl

SPOCK!

[Janet]

jerrymuelver said:

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:

<code snipped>

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

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