I have a line that is stated in Firebug as:

td table="views-field view-field-status-time"

In my CSS file I want to contol it to limit text info, but its not working --> Could you help me, pretty please?

.views-field .views-field-status-time {

width: 216px;

white-space: pre-wrap; /* css-3 */

white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */

hite-space: -pre-wrap; /* Opera 4-6 */

white-space: -o-pre-wrap; /* Opera 7 */

word-wrap: break-word; /* Internet Explorer 5.5+ */

}

Comments

anil614sagar’s picture

.views-field-status-time {

width: 216px;

white-space: pre-wrap; /* css-3 */

white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */

hite-space: -pre-wrap; /* Opera 4-6 */

white-space: -o-pre-wrap; /* Opera 7 */

word-wrap: break-word; /* Internet Explorer 5.5+ */

}


Cheers,
Anil Sagar,
Lead Drupal Developer,
Azri Soulutions,
http://azrisolutions.com/

JohnnyW’s picture

Thank you for clarifying.

I tried it that way and may diff ways, but nothing seems to work.

Its located in a block; I wonder if it has to be inserted into another css file and not the style css theme file?

If you could give me more advice, I will....I will give you a virtual foot rub :D

Thank you for helping.

rolodmonkey’s picture

If you want to select one object with two classes, do not use a space in the selector:

.views-field.view-field-status-time {
  /* CSS here */
}

--

Read more at iRolo.net

JohnnyW’s picture

I totally agree with every suggestion, because they are great points that were made...

But, unfortunately they haven't worked with the variety of CSS div, class, id, I've tried.

I've tried everything now:

.views-field-status-time
td.views-field-status-time
td .views-field .views-field-status-time
.views-field .views-field-status-time
.views-field.views-field-status-time
etc.

Its in my right hand block, very top that has a width of 16em

ANY suggestion?

Thank you for your input.

Nonnie

alexrayu’s picture

The above answers are correct. But if previous css files have more priority, they will overwrite your declaration. What you need to do:

1. Try placing "!important" after a declaration like this:

.views-field-status-time {width:160px !important;}

2. Use Firebug to see, what css overrides you. Usually, if some module or base theme css has something like

#zen #holder .node .views-field-status-time {width:160px;}

The above will override a less prioritized declaration. In firebug, your declaration will look strikethrough if it gets overriden. "!important" helps to prioritize it up.

rolodmonkey’s picture

First, remove all of your different attempts and just put this in:

body table tr td.views-field.view-field-status-time {
  border: 1px solid red !important;
}

If that did not work, then it is time to pull out Firebug.

Is the file being included? Check the header and links. If you have CSS compression turned on, turn it off.

Are the files cached? If you are using Zen, make sure that the option to rebuild the template on every page load is turned on. Also, make sure it is turned on in your sub theme. Don't forget to turn this back off when you are done! This setting can kill a production server.

Are your styles actually being parsed? You have a lot of weird stuff in there, it is possible that the parser is just throwing the whole thing out.

Let us know how it works out.

--

Read more at iRolo.net

JohnnyW’s picture

Okay, I tried your code, mixed with mine...

Your code worked -- there is a red boarder around all 5 comments, BUT none of my code to control the width of the text, 120 characters limit in Facebook-style Status :(

So if you type something and it comes up on the top right had block, using views, none of my code can control the long text that runs off the side of the computer screen, elongating the theme.

Here is what I did, yours worked, mine didn't :(

td.views-field.views-field-status-time {

border: 1px solid red !important; /* this worked, only */

width:150px !important;

white-space: pre-wrap !important; /* css-3 */

white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */

white-space: -pre-wrap !important; /* Opera 4-6 */

white-space: -o-pre-wrap !important; /* Opera 7 */

word-wrap: break-word !important; /* Internet Explorer 5.5+ */

}

Help please... Here is what it looks like on Firebug:
td.views-field.views-field-status-time {
border: 1px solid red !important;
width: 150px !important;
word-wrap: break-word !important;
}
style.css?I (line 606)
tr.odd td, tr.even td {
padding: 0.6em;
}
style.css?I (line 17)
Inherited fromtable.views-table
table {
font-size: 0.9em;
}
style.css?I (line 63)
table {
border-collapse: collapse;
}
defaults.css?I (line 21)
Inherited fromtable#content
table {
font-size: 0.9em;
}
style.css?I (line 63)
table {
border-collapse: collapse;
}
defaults.css?I (line 21)
Inherited frombody.cron-check-processed
body {
color: #AF7817;
font: 85% Arial,Helvetica,sans-serif,Verdana;
}

JohnnyW’s picture

It works in Firefox, but not in IE

Here is the code I used:

td .views-field-status-time {

max-width:150px !important;
white-space: pre-wrap !important; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap !important; /* Opera 4-6 */
white-space: -o-pre-wrap !important; /* Opera 7 */
word-wrap:break-word !important; /* Internet Explorer 5.5+ */

}

Any suggestions on getting it to work in IE - Internet Explorer?

THANK you soooo much for the help so far :D

Yuri’s picture

add this to it, and then it worked for me:
word-break: break-all;