Problem with innerhtml, Css class not working?

Question

_{Sunday, January 13, 2013 9:33 PM}

Hi

I have been looking through a number of sites and it seems i cannot find out why the css is not working.

here is the code:

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

    <h4>
    
        <span>Gallery</span></h4>
    <ul class="lb-album" id="dynamicGal" runat="server">
        
      </ul>
    <div style="clear: both;">
        &nbsp;</div>
</asp:Content>

and this is what i have in the code behind

private void selectAll()
{
string con = "";
con = ConfigurationManager.ConnectionStrings["WebDBConnection"].ConnectionString;

SqlConnection myCon = new SqlConnection(con);

string com = "SELECT * FROM Gallery";
SqlCommand cmd = new SqlCommand(com, myCon);

myCon.Open();

SqlDataReader reader = cmd.ExecuteReader();

while (reader.Read())
{
DataOfGallery temp = new DataOfGallery();
temp.photoNamethumb = reader["PhotoNameThumb"].ToString();
temp.photoNamefull = reader["PhotoNameFull"].ToString();
temp.photoTag = reader["PhotoTag"].ToString();
temp.photoTagDesc = reader["PhotoTagDesc"].ToString();
temp.photoDesc = reader["PhotoDescription"].ToString();
galleryData.Add(temp);
}


reader.Close();
myCon.Close();
}




   struct DataOfGallery
    {
        public string photoNamethumb;
        public string photoNamefull;
        public string photoTag;
        public string photoTagDesc;
        public string photoDesc;
    }

    List<DataOfGallery> galleryData = new List<DataOfGallery>();

    protected void Page_Load(object sender, EventArgs e)
    {

        selectAll();
        dynamicGal.InnerHtml += "";

        for (int i = 0; i < galleryData.Count; i++)
        {

     
       dynamicGal.InnerHtml += " <li><a href='#'> ";
            dynamicGal.InnerHtml += "<img src='imgGal/Try1/" + galleryData[i].photoNamethumb + "' alt='image"+ (i+1)+"'/>";
            dynamicGal.InnerHtml += "<span>" + galleryData[i].photoTag + "</span></a>";
            dynamicGal.InnerHtml += "<div class='lb-overlay' id='image-" + (i + 1) + "' runat='server'>";
            dynamicGal.InnerHtml += "<img src ='imgGal/Try2/" + galleryData[i].photoNamefull + "'alt='image" + (i + 1) + "' />";
             dynamicGal.InnerHtml += "<div>" + "<h4>" + galleryData[i].photoTagDesc + "</h4>";
            dynamicGal.InnerHtml += "<p>" + galleryData[i].photoDesc + "</p></div></div></li>";
             dynamicGal.InnerHtml += "<a href='#page' class='lb-close'>x Close</a>";
 
         
        }
    }

All replies (3)

_{Monday, January 14, 2013 1:10 AM}

first of all... runat="server" attribute is for .net controls... the innerhtml string directly goes inside rendered part

hence, u should use runat="server" in html string used as innerhtml

so, remove this and try again

dynamicGal.InnerHtml += "<div class='lb-overlay' id='image-" + (i + 1) + "' runat='server'>";

if the issue is still there and that the css class used in innerhtml is not being applied... then, u should debug the rendered page in IE developer tools or firefox firebug and check the source of page... make sure that class attribute is still there for given div in page view source also...

then check that the any of the css files loaded in browser (css tab in developer tools) contains the class named lb-overlay

check this to know how u can debug the css in IE developer tools

http://msdn.microsoft.com/en-us/library/dd565627(v=vs.85).aspx

hope this helps...

---

_{Monday, January 14, 2013 5:04 AM}

Thank you for that! I will go see what the problem is!

---

_{Monday, January 14, 2013 7:26 AM}

<ul id="ContentPlaceHolder1_dynamicGal" class="lb-album">
<li>
<a href="#">
<img alt="image1" src="imgGal/Try1/tokyo.fitness.center.03.png">
<span>Gym</span>
</a>
<div id="image-1" class="lb-overlay">
<a class="lb-close" href="#page">x Close</a>
<img alt="image1" src="imgGal/Try2/tokyo-fitness-center-03.png">
<div>
<h4>Fitness Centre</h4>
<p>qweqweasdqweczcz ca edqweqweasdasdq weqwe</p>
</div>
</div>
</li>
</ul>

ya so apparently after the start of my second div with the class lb-overlay. its not following what i want it to do.. its grayed out.

with some more research i just found out that its conficting with a css, and im stuck.

.lb-overlay{
    width:0;
    height:0;
    ;
    overflow: hidden;
    left:0px;
    top: 0px;
    padding: 0px;
    z-index: 199;
    text-align: center;
    background-image:none;
    background: rgb(241,210,194);
    background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%, rgba(241,210,194,1) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.56)), color-stop(100%,rgba(241,210,194,1)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
    background: radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
}

the problem lies with the height and width, but in order for me to give the image an effect the class lb-overlay need to be hidden and once lick it open up..  any suggestions on how to tackle with this?