[souptoy]

Looking for some input on maybe how to make this slideout box look more appealing:

Specifically separating the messages from one another and maybe message title styling.

Any feedback/criticism is welcome.

Thanks in advance

[souptoy]

I've updated the message box to look like this now after some feedback from a friend:

[D.Mulroy]

I'd move the posted by area below the message, it looks like a subheading where its at. Also i'd make the width of the individual messages a bit shorter its pretty close to the parent container.

This post has been edited by D.Mulroy: 02 June 2011 - 02:47 PM

[souptoy]

Thanks for the feedback. I've made the adjustments you suggested. I also reduced the "Posted by..." font size to 9pt instead of 10pt. It looked too big below the message text.

[D.Mulroy]

Can you post and updated pic?

This post has been edited by D.Mulroy: 02 June 2011 - 04:23 PM

[souptoy]

Here's the updated message box:



Ideally, I would like to get the background of each message to be white so that it stands out more but of course IE looks really stupid when it's set. The border, etc is using a fieldset with a legend and IE includes the white background in the legend portion which causes it to bleed outside the lines as seen below:



I tried switching it over to a rounded div and adjusting the "legend" text upwards but IE doesn't round (this is an Intranet site and the standard is IE7!).

Anyway, this will have to do for now unless someone knows of a solution.

CSS is below:

#content
{
    height: 550px;
}
#welcome
{
    height: 100%;
    padding: 10px;
    text-align: center;
    vertical-align: text-top;
    width: 100%;
}
#welcometitle
{
    text-align: center;
}
#slideout
{
    background-color: #ffbebe;
    height: 100px;
    left: -580px;
    position: absolute;
    top: 200px;
    width: 600px;
}
#slidecontent
{
    /*background: #eee;*/
    background: #f5f7ff; /*google buzz background color */
    border: 1px solid black;
    float: left;
    height: 350px;
    overflow: auto;
    width: 578px;
}
#slidecontent h3, #slidecontent p
{
    padding: 0px 10px;
}
#slidecontent fieldset
{
    background: #fff;
    margin: 0 auto;
    width: 95%;
}

#clickme
{
    background-color: #ff3333; /*dark red*/ /*background-color: #ffbebe;*/ /*light red*/ /*background-color: #66f345;*/ /*dark green*/
    background-image: url('../App_Themes/Images/messages_10x100.png');
    border-top: 1px solid black;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    float: right;
    height: 100px;
    position: relative;
    width: 19px;
    z-index: 1;
}
#clickme:hover
{
    background-color: #ffbebe; /*light red*/ /*background-color: #ff3333;*/ /*dark red*/ /*background-color: #cefbc3;*/ /*light green*/
}
/* Message Styles 
h3.messageTitle 
{
    font-size: 14pt;
    margin-bottom:0;   
}*/
span.messageInfo
{
    font-size:9pt;
    font-weight:bold;
    padding: 0px 10px;
}

And HTML is here:

<div id="slideout">
    <div id="slidecontent">
        <br />
        <asp:Repeater ID="messages" runat="server">
        <ItemTemplate>
        <fieldset>
        <legend><%#WebUtilities.FormProtect(DataBinder.Eval(Container.DataItem, "Title"))%></legend>
        <p><%#WebUtilities.FormProtect(DataBinder.Eval(Container.DataItem, "Body"))%></p>
        <span class="messageInfo">
            Posted by C.Fujii on <%# String.Format("{0:M/d/yyyy}", DataBinder.Eval(Container.DataItem, "EffectiveDate")) %>
        </span>
        </fieldset>
        <br />
        </ItemTemplate>
        </asp:Repeater>
    </div>
    <div id="clickme"></div>
</div>

[D.Mulroy]

You could always make an image the height of the title/legend that has white for the bottom half and the background color of the #slideout for the top half. then set it as the background-image of the legend and repeat it on the x axis.

This post has been edited by D.Mulroy: 02 June 2011 - 07:03 PM

[souptoy]

I've implemented the changes that D.Mulroy suggested. I replaced the fieldset/legend HTML for div/span containers instead and updated the CSS. The screenshots for Chrome and IE 7/8 are below:

Chrome:


IE 7/8: