We help IT Professionals succeed at work.

Html ---span visiible question

I have html page content stored in a home grown content management system



I have the following in an aspx file

<!-- MAIN CONTENT STARTS HERE -->
                   
                   <table class="mainContent" cellspacing="0" cellpadding="0" width="100%" border="0">
&#9;&#9;&#9;&#9;&#9;&#9;&#9;<tr valign="top">
&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;<td>
                                    <div style="WIDTH: 750px" ;>
                                        <asp:Literal ID="litPageContent" runat="server" EnableViewState="false"></asp:Literal>
                                    </div>
                                   

&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;</td>
&#9;&#9;&#9;&#9;&#9;&#9;&#9;</tr>
&#9;&#9;&#9;&#9;&#9;&#9;</table>
                    <!-- END MAIN CONTENT -->

litPageContent.text is set to the html maintained in the cms system

For some reason the span visible property is being ignored

here is the html


<table class=mainContent border=0 cellSpacing=0 cellPadding=0 width="100%">
<div style="BORDER-BOTTOM: #5a5a5a 1px solid; BACKGROUND-COLOR: #e50100; PADDING-LEFT: 10px; WIDTH: 500px; FONT-FAMILY: Verdana, Arial, Helvetica; HEIGHT: 23px; COLOR: white; FONT-SIZE: 12px; FONT-WEIGHT: bold; PADDING-TOP: 4px">IMPORTANT WARRANTY DOCUMENTS</div>
<div style="BORDER-BOTTOM: #e50100 1px solid; TEXT-ALIGN: center; BORDER-LEFT: #e50100 1px solid; PADDING-BOTTOM: 20px; BACKGROUND-COLOR: #f4f4f4; BORDER-TOP-COLOR: #e50100; PADDING-LEFT: 7px; WIDTH: 494px; PADDING-RIGHT: 7px; FONT-FAMILY: Verdana, Arial, Helvetica; BORDER-TOP-WIDTH: 1px; BORDER-RIGHT: #e50100 1px solid; PADDING-TOP: 20px"><span id=spanUSButton visible="false" runat="server"></div>
<tbody>
<tr>
<td colSpan=2 align=middle><img border=0 alt="" src="images/icon-flag-usa.gif"> USA Warranty Documents<br></td></tr>
<tr>
<td><a href="javascript:;"><img border=0 alt="Procedures for Returning Defective Product - U.S." align=middle src="images/midaslink_us_def_tb.gif" width=87 height=103> <br><strong>Procedures for Returning <br>Defective Product - USA</strong></a> </td>
<td><a href="javascript:;"><img border=0 alt="Warranty Glossary - U.S." align=middle src="images/us_glossary_tb.gif"><br><strong>Warranty Glossary - USA</strong></a> </td></tr>
<tr>
<td colSpan=2 align=middle>
<hr style="HEIGHT: 1px; COLOR: #cccccc">
</td></tr></span></tbody></table>

If I render the html in a page in vs 2010 (view in browser) the

Important warranty documents text is displayed but nothing in the
spanUSButton span tag is displayed.  (which is what I want)

However when the aspx page is rendered (view in browser)  everything is displayed
Comment
Watch Question

Commented:
instead of using visible=false you may want to try using css like style="visibility=hidden; then you can use javascript to show the property.

Author

Commented:
Can you please provide an example?

Author

Commented:
I should mention that Ithe html used to be embedded in the aspx page and all was well

Then I changed to retrieve html from the cms

I was then getting an object not set to reference error when trying to execute

 Me.spanCanButton.Visible = False


so I commented the statements out.   Trying to figure out how to get around the error



Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
     
        If Not Page.IsPostBack Then
           
            Me.litPageContent.Text = FillPageWithContent("TestPage")

           

            'If GetCountry() = "USA" Then
            '    Me.spanCanButton.Visible = False
            '    Me.spanUSButton.Visible = True
            '    Me.divContentUs.Visible = True
            'ElseIf GetCountry() = "CAN" Then
            '    Me.spanCanButton.Visible = True
            '    Me.spanUSButton.Visible = False
            '    Me.divContentUs.Visible = False
            'Else
            '    Me.spanCanButton.Visible = True
            '    Me.spanCanButton.Visible = True
            '    Me.spanbreak.Visible = True
            '    Me.divContentUs.Visible = True
            'End If
        End If



    End Sub
CERTIFIED EXPERT
Most Valuable Expert 2012
Top Expert 2008

Commented:
I don't understand what you are explaining.  Is "spanUSButton" dynamic or static in HTML?  Is it loaded with the content from your CMS?

Author

Commented:
It is part of the content that is loaded from the cms

Here is the page

<%@ Page Language="vb" AutoEventWireup="false" Codebehind="Safety.aspx.vb" Inherits="dealer_portal.Safety" %>

<%@ Register TagPrefix="ew" Namespace="eWorld.UI" Assembly="eWorld.UI" %>
<%@ Register TagPrefix="exp" Namespace="ControlFreak" Assembly="ExportPanel" %>
<%@ Register TagPrefix="ctl" TagName="footer" Src="~/controls/footer.ascx" %>
<%@ Register TagPrefix="ctl" TagName="top_header" Src="~/controls/top_header.ascx" %>
<%@ Register TagPrefix="ctl" TagName="left_side_nav" Src="~/controls/left_side_nav.ascx" %>
<%@ Register TagPrefix="cc1" Namespace="skmMenu" Assembly="skmMenu" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://schemas.microsoft.com/intellisense/html-401">
<HEAD id="Head1" runat="server">
    <title>Portal - Safety & Health</title>
    <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema" />
    <link href="images/css/Styles.css" type="text/css" rel="stylesheet" />
</head>
<body leftmargin="0" topmargin="0">
    <form id="Form1" method="post" runat="server">
      <div id="portalcentercontentouter">
    <div id="portalcentercontent">
        <!-- TOP HEADER START -->
        <ctl:top_header ID="top_header" runat="server"></ctl:top_header>
        <!-- TOP HEADER END -->
        <table cellspacing="0" cellpadding="0" width="990" border="0">
            <tr>
                <td class="leftNavContainer" valign="top" width="155">
                    <!-- LEFT SIDE NAV BAR START -->
                    <ctl:left_side_nav ID="left_side_nav" runat="server" DisplayLeftNav="nav"></ctl:left_side_nav>
                    <!-- LEFT SIDE NAV BAR END -->
                </td>
                <td class="mainContentWell" valign="top" align="left" width="100%" rowspan="2">
                                      <!-- MAIN CONTENT STARTS HERE -->
                    <asp:Literal ID="litPageContent" runat="server" EnableViewState="false"></asp:Literal>
                    <!-- END MAIN CONTENT -->
                    <asp:Label ID="lblErrorMessage" runat="server" Width="528px" Visible="True" ForeColor="Red"
                        Font-Bold="True"></asp:Label></td>
            </tr>
                   </table>
            </div>
    </div>
    </form>
</body>
</html>


here is the page load

 If Not Page.IsPostBack Then
         
            Me.litPageContent.Text = FillPageWithContent("SafetyHomePage")

           
        End If

The cms system stores the html in a sql server table.  FillPageWithcontent functions calles a stored proc which loads the html for the page  (in this case SafetyHomePage)
CERTIFIED EXPERT
Top Expert 2015

Commented:
>>I was then getting an object not set to reference error when trying to execute Me.spanCanButton.Visible = False

This makes sense since your span id is spanUSButton.

I think the rest of the problems are because of syntax errors in the HTML.

Two examples:

--The span tag in question begins inside the second div tag but the closing span tag is just before the closing tbody tag.

--Divs cannot be inside the table tag like that.

It's hard to tell what a correctly rendered table is supposed to look like, but the HTML below will get you a little closer to standards.
<table class="mainContent" cellspacing="0" cellpadding="0" style="border:0;width:100%">
<tbody>
<tr>
    <td colspan="2">
        <div style="border-bottom: #5a5a5a 1px solid;background-color:#e50100;padding:4px 0 0 10px;width:500px;font-family:Verdana, Arial, Helvetica;height:23px;color:white;font-size:12px;font-weight:bold;">IMPORTANT WARRANTY DOCUMENTS</div>
        <div style="border-bottom: #e50100 1px solid;text-align:center;border-left:#e50100 1px solid;padding-bottom:20px;background-color:#f4f4f4;border-top-color:#e50100;padding-left:7px;width:494px;padding-right: 7px;font-family:Verdana, Arial, Helvetica;border-top-width:1px;border-right:#e50100 1px solid;padding-top:20px">
            <span id="spanUSButton" style="visibility:hidden" runat="server"></span>
        </div>
    </td>
</tr>
<tr>
    <td colspan="2" style="text-align:center"><img style="border:0" alt="" src="images/icon-flag-usa.gif" /> USA Warranty Documents<br /></td></tr>
<tr>
    <td>
        <a href="javascript:;"><img style="border:0;text-align:center;width:87px;height:103px" alt="Procedures for Returning Defective Product - U.S." src="images/midaslink_us_def_tb.gif" />
            <br />
            <strong>Procedures for Returning <br />Defective Product - USA</strong>
        </a>
    </td>
    <td>
        <a href="javascript:;"><img style="border:0;text-align:center" alt="Warranty Glossary - U.S." src="images/us_glossary_tb.gif" />
            <br />
            <strong>Warranty Glossary - USA</strong>
        </a> </td></tr>
<tr>
    <td colspan="2" style="text-align:center">
        <hr style="height:1px; color:#ccc" />
    </td>
</tr>
</tbody>
</table>

Open in new window

CERTIFIED EXPERT
Most Valuable Expert 2012
Top Expert 2008

Commented:
Are you trying to access a control in code-behind?

Author

Commented:
Hi TommyBoy

I should have mentioned that I only posted a snippet of html to try and make it easier

There is a span id of spanCanButton as well.

I really did just leave the  Me.spanUSButton.Visible = True uncommented and it gave me the error

Are you saying my issue is that I have syntax errors in my html?

I guess what's driving me nuts is that if I do a view source after the page is rendered when I have the html embedded and after the page is rendered when the html is pulled from the cms it is the same html
(syntax errors and all)


yet the span id is not ignored if the html is embedded but it is if the html is retrieved from cms

I hope I am explaining this clearly





Author

Commented:
Hi Learned One

I am accessing a control in the code behind for the footer and header but not the "main" html
CERTIFIED EXPERT
Most Valuable Expert 2012
Top Expert 2008
Commented:
Are you using code like Me.spanUSButton, or FindControl("spanUSButton")?

Author

Commented:
I am using Me.spanUSbutton

To give a bit of background.  

We have locations in both us and canada


Some of our pages have content that is country specific but the vast majority is the same

The thought process of the person who designed our portal (not me :-))  was to create a single page and put a span or div tag around the content that was country specific.

Each user has a country code associated with them. (US or CAN)

Admins have a country code of All which means they see both the us and canada content.

The code behind checks the country code for the user and sets the visible property of the tags to determine which country specific code to display.


Thus the code below

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
     
        If Not Page.IsPostBack Then
           
            Me.litPageContent.Text = FillPageWithContent("TestPage")

           

            'If GetCountry() = "USA" Then
            '    Me.spanCanButton.Visible = False
            '    Me.spanUSButton.Visible = True
            '    Me.divContentUs.Visible = True
            'ElseIf GetCountry() = "CAN" Then
            '    Me.spanCanButton.Visible = True
            '    Me.spanUSButton.Visible = False
            '    Me.divContentUs.Visible = False
            'Else
            '    Me.spanCanButton.Visible = True
            '    Me.spanCanButton.Visible = True
            '    Me.spanbreak.Visible = True
            '    Me.divContentUs.Visible = True
            'End If
        End If

    End Sub

You'll notice the commented code.

As I mentioned earlier this code worked great but we have been migrating as many pages as we can
to use the database driven cms so we can make changes without having to potentially recompile or move pieces.

 Now when it tries to set the visible property the dreaded object not set to an instance
error is received.

I know TommyBoy mentioned that div tags can't be nested in tables.  I had asked this question and the response was  "yes...it's only a warning and it works"  (at least it used to :-))


Hope this helps.  It's hard to explain just using words.
CERTIFIED EXPERT
Top Expert 2015
Commented:
The reality is that nothing should be directly inside the table tags except table sub tags like tbody, tr, etc..

I understand what you are saying with embedded vs. retrieved from cms. Maybe there's something in the page life cycle that is having an affect when the html is retrieved from the cms as opposed to embedding it directly. Maybe a pre-render stage in the former that does not exist in the later. I don't know, but fixing the html would be step 1 for me in your situation, just to eliminate the possibility.

Have you looked at the rendered page in different browsers. Some browsers tolerate non-standard html better than others. It would just be a test of the theory of course, not a solution.
CERTIFIED EXPERT
Most Valuable Expert 2012
Top Expert 2008

Commented:
If the control is dynamic, and not defined statically in the HTML, then you might be able to use FindControl("spanUSButton"), but you can't use Me.spanUSButton to reference the control.

Author

Commented:
Thanks for the replies!

I was able to get the desired results by leaving the span tag embedded in the aspx page and calling the cms text in bewetween the tags.

Of course this meant I had to create additional CMS pages but as usual there was a mad rush so
I did what I had to do.   I will go back if/when I have time to try the suggestions you both have provided

Thanks again

Explore More ContentExplore courses, solutions, and other research materials related to this topic.