collapsePanelHeader css.

How can I preserve the header box in a expand collapse type of panel.
The space should not be there.

See attached image and code.
log on to omegalove.cm
user:omegalove1
pass:cupryk
<div class="disignBoxFirst">
                    <div class="boxFirstHeader">
                        <ajaxToolkit:CollapsiblePanelExtender ID="CollapsiblePanelExtender2" runat="server"
                            TargetControlID="PnlContent2" ExpandControlID="PnlTitle2" CollapseControlID="PnlTitle2"
                            TextLabelID="Label2" CollapsedText="Show Details (...)" ExpandedText="Hide Details (...)"
                            ImageControlID="Image2" ExpandedImage="../Images/Frames/toggle_down.png" CollapsedImage="../Images/Frames/toggle_right.png"
                            Collapsed="True" SuppressPostBack="true">
                        </ajaxToolkit:CollapsiblePanelExtender>
                        <asp:Panel ID="PnlTitle2" runat="server" CssClass="collapsePanelHeader">
                            <asp:Image ID="Image2" runat="server" ImageUrl="../Images/Frames/toggle_down.png">
                            </asp:Image>
                            LIFESTYLE AND HABBITS
                            <asp:Label ID="Label2" runat="server" Text="Show Details(...)"></asp:Label>
                        </asp:Panel>
                        <asp:Panel ID="PnlContent2" runat="server" CssClass="collapsePanel">
                            <div class="boxContent">
                                <div id="profile_details_wrapper">
                                    <div class="pad_cont" style="margin: 0;">
                                        <div class="pad_box">
                                            <div class="h1 t_sprite id_card">
                                                Your Physical Appearance and Attributes</div>
                                            <div class="st_col" style="margin-right: 20px;">
                                                <div class="st_title">
                                                    Appearance:</div>
                                                <div class="st_item">
                                                    
                                                </div>
                                                <div class="clear">
                                                </div>
                                                <div class="st_title">
                                                    Style:
                                                </div>
                                                <div class="st_item">
                                                    <asp:Label ID="Label4" runat="server"></asp:Label>
                                                </div>
                                                <div class="clear">
                                                </div>
                                                <div class="st_title">
                                                    Eye Colour:
                                                </div>
                                                <div class="st_item">
                                                    <asp:Label ID="Label5" runat="server"></asp:Label>
                                                </div>
                                                <div class="clear">
                                                </div>
                                                <div class="st_title">
                                                    Facial Hair:</div>
                                                <div class="st_item">
                                                    <asp:Label ID="Label6" runat="server" CssClass="value"></asp:Label>
                                                </div>
                                                <div class="clear">
                                                </div>
                                                <div class="st_title">
                                                    Fashion Sense:</div>
                                                <div class="st_item">
                                                    <asp:Label ID="Label7" runat="server"></asp:Label>
                                                </div>
                                                <div class="clear">
                                                </div>
                                                <div class="st_title">
                                                    Hair Color:
                                                </div>
                                                <div class="st_item">
                                                    <asp:Label ID="Label8" runat="server"></asp:Label>
                                                </div>
                                                <div class="clear">
                                                </div>
                                                <div class="st_title">
                                                    Height:</div>
                                                <div class="st_item">
                                                    <asp:Label ID="Label9" runat="server"></asp:Label>
                                                </div>
                                                <div class="clear">
                                                </div>
                                                <div class="st_title">
                                                    Piercings:</div>
                                                <div class="st_item">
                                                    <asp:Label ID="Label10" runat="server"></asp:Label>
                                                </div>
                                                <div class="clear">
                                                </div>
                                                <div class="st_title">
                                                    Jewelry:</div>
                                                <div class="st_item">
                                                    <asp:Label ID="Label11" runat="server"></asp:Label>
                                                </div>
                                                <div class="clear">
                                                </div>
                                                <div class="st_title">
                                                    Nationality:</div>
                                                <div class="st_item">
                                                    <asp:Label ID="Label12" runat="server"></asp:Label>
                                                </div>
                                                <div class="clear">
                                                </div>
                                            </div>
                                            <div class="st_col">
                                                <div class="st_title">
                                                    Body Type:
                                                </div>
                                                <div class="st_item">
                                                    <asp:Label ID="Label13" runat="server"></asp:Label>
                                                </div>
                                                <div class="clear">
                                                </div>
                                                <div class="st_title">
                                                    Complexion:
                                                </div>
                                                <div class="st_item">
                                                    <asp:Label ID="Label14" runat="server"></asp:Label>
                                                </div>
                                                <div class="clear">
                                                </div>
                                                <div class="st_title">
                                                    Eye Wear:
                                                </div>
                                                <div class="st_item">
                                                    <asp:Label ID="Label15" runat="server"></asp:Label>
                                                </div>
                                                <div class="clear">
                                                </div>
                                                <div class="st_title">
                                                    Facial Shape:</div>
                                                <div class="st_item">
                                                    <asp:Label ID="Label16" runat="server"></asp:Label>
                                                </div>
                                                <div class="clear">
                                                </div>
                                                <div class="st_title">
                                                    Best Feature:</div>
                                                <div class="st_item">
                                                    <asp:Label ID="Label17" runat="server"></asp:Label>
                                                </div>
                                                <div class="clear">
                                                </div>
                                                <div class="st_title">
                                                    Hair Style:
                                                </div>
                                                <div class="st_item">
                                                    <asp:Label ID="Label18" runat="server"></asp:Label>
                                                </div>
                                                <div class="clear">
                                                </div>
                                                <div class="st_title">
                                                    Weight:</div>
                                                <div class="st_item">
                                                    <asp:Label ID="Label19" runat="server"></asp:Label>
                                                </div>
                                                <div class="clear">
                                                </div>
                                                <div class="st_title">
                                                    Tattoos:
                                                </div>
                                                <div class="st_item">
                                                    <asp:Label ID="Label20" runat="server"></asp:Label>
                                                </div>
                                                <div class="clear">
                                                </div>
                                                <div class="st_title">
                                                    Ethnicity:
                                                </div>
                                                <div class="st_item">
                                                    <asp:Label ID="Label21" runat="server"></asp:Label>
                                                </div>
                                                <div class="clear">
                                                </div>
                                            </div>
                                            <div class="clear">
                                            </div>
                                            <br />
                                        </div>
                                    </div>

Open in new window

space.png
omegaloveAsked:
Who is Participating?
 
masterpassConnect With a Mentor Commented:
Try this,

In the StyleProfile.css (line 242) .. MODIFY padding attribute .. use this class

.boxFirstHeader {
border-bottom:1px solid #CCCCCC;
color:#666666;
font-size:12px;
font-weight:bold;
padding:3px 0px 0px 0px;
text-align:left;
text-transform:uppercase;
}

Open in new window

0
 
mreuringCommented:
HTML and CSS interact with each other, for any CSS expert to help on a problem like this, he/she would need the full page and related CSS (for instance an archive created from a 'save entire page' option). Although there may be a few .Net experts with enough knowledge of CSS to figure this out, or perhaps there is some 'code-behind' options to configure it, you will get far better responses if you'd have a rendered page for 'us' to look at :)
0
 
LZ1Commented:
As mreuring stated above:  Do you have a live link for us to see?
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
omegaloveAuthor Commented:
Is it this class.
Hi master, just wondering if I need to modify this class as well?

.collapsePanelHeader
{
    font-weight: bold;
    float: none;
    cursor: pointer;
    vertical-align: middle;
 /*   padding-top: 3px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 8px;
    font-size: 12px;*/
    font-weight: bold;
    color: #666666;
    text-align: left;
    text-transform: uppercase;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #cccccc;
}
0
 
masterpassCommented:
no need ..just modify .boxFirstHeader alone and try ...
0
 
omegaloveAuthor Commented:
Awesome work again. Guru!!!
0
 
masterpassCommented:
thanks for the grade and points mate...
0
 
omegaloveAuthor Commented:
no worries a job well done.
0
All Courses

From novice to tech pro — start learning today.