Question

I have a web forms app with a CSS file for layout. One of my elements, which will be much more difficult to do in CSS without using IDs, also has to have runat="server" since I control visibility server side.

<div id="x">
    <div id="whatever" runat="server" visible="false">
        <div id="y">
            ....
        </div>
    </div>
</div>

My problem is that in the CSS, I don’t know how to ignore that whatever div with my selectors, and unless I inline the CSS and put in server to client control translation, I won’t know the control names until runtime.

#x
{
    position:absolute;
    height:30px;
}

    #x #whatever??? #y img
    {
        margin:-7px 15px 0 30px;
    }

    #x #whatever??? div
    {
        width:250px;
        float:left;
    }
etc.

How should I work around this? Is there a server side container control that doesn’t render output but could be used to contol the visibility/rendering of its contents, or is there a trick in CSS to ignore that intermediate div?

This is additionally confused by the fact I have the x div in a master page and the whatever and y divs are both in the page itself. I know this wouldn’t be an issue if I were using MVC, but at this point switching is not an option.

Answer 1

using CSS class selectors is a quick and easy way around this problem- not as fast as CSS id selectors but they will ALWAYS work (you could calculate the client ID of the “whatever” div element but this will change if you for example, move it into a Panel control, repeater control, etc.)