Hi:
I’ve got a small message application I’m trying to build. For some
reason, the message itself isn’t wrapping. I’ve tried a bunch of things
- I’m using a mix of CSS and one table at the end. For whatever reason,
the message keeps forcing the table to expand, even though the div
containing the table has a set width. Even when I try to set the width
for the table with definite pixel widths, the tables expand. Obviously,
there’s a better way. Can anyone help?
Here’s the partial rendering the table:
| <%= image_tag("no_pic.jpg", :size => "60X45", :alt => "user picture") %> |
From:
<%=h User.find(msg.from_id).name %>
Subject: <%=h msg.subject %> Sent: <%=h time_ago_in_words(msg.send_on) %> ago |
<%=h msg.body %>
|
| <%= link_to "Reply" %> | <%= link_to "Forward" %> | <%= link_to "Delete" %> | <%= link_to "Expand" %> | <%= link_to "Collapse" %> | |
And the containers holding the table:
<div id="centerMsg">
<span class="XLgTextBl">Message Center</span>
<button onclick="showPopWin('/messages/new', 500, 350,
null);">Message
<% for message in @messages %>
<%= render(:partial => ‘/messages/message’, :locals => {
:msg => message}) %>
<% end %>
</div>
</div>
And the relevent css styles:
#centerMsg
{
float: bottom;
width: 485px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
margin-bottom: 10px;
background-color: white;
-moz-border-radius : 1em;
border-radius : 1em;
overflow: visible;
}
#msgInfo
{
position: relative;
float: left;
text-align: left;
}
#msgBody
{
position: relative;
float:left;
text-align: left;
overflow: scroll;
}
#msgBodyLinks
{
text-align: right;
}
.tabPane{
height:21px; /* Height of tabs /
border-bottom:1px solid #919b9c;
}
.aTab{
border-left:1px solid #919b9c;
border-right:1px solid #919b9c;
border-bottom:1px solid #919b9c;
overflow: scroll;
}
.tabPane DIV{
float:left;
height:100%; / Height of tabs */
vertical-align:middle;
background-repeat:no-repeat;
background-position:bottom left;
cursor:pointer;
position:relative;
bottom:-1px;
margin-left:0px;
margin-right:0px;
}
.tabPane .tabActive{
background-image:url(‘tab_left_active.gif’);
margin-left:0px;
margin-right:0px;
z-index:10;
}
.tabPane .tabInactive{
background-image:url(‘tab_left_inactive.gif’);
margin-left:0px;
margin-right:0px;
z-index:1;
}
Any help you can provide would be great! I’m sure I’ve got conflicting
parameters in these styles and tables, but I can’t seem to get it to
work! Thanks so much for your time!
Mike