Thursday, October 22, 2009

text-overflow for Firefox

Since I really want to truncate my string that is longer than its block's width and add ... to the end, I looked around many sites and blogs. I have found a very interesting thing to deal with this issue. But, it works for all browsers except the most popular browser for most developers which they have been believing for its features. However, we still have a trick to make it happen :-)

Now have a look at this:

<html>
<head>
    <title>Ellipsis</title>
    <style type="text/css">
        .ellipsis { 
            white-space: nowrap; 
            overflow: hidden; 
            text-overflow: ellipsis; 
            -o-text-overflow: ellipsis; 
            -moz-binding: url('ellipsis.xml#ellipsis'); 
        }
       .test{
        width:250px;
   
       }
     </style>
</head>
<body>
    <div>
        <h4 class="test">
            <a  class="ellipsis" href="#">

              Superior Rooms are richly appointed, decorated in soft tones and offer superior views. The rooms are warm and inviting with hardwood floors and a marble entry.     * Superior Rooms feature air-conditioning, satellite television, a refrigerator and a private bar, and are equipped with telephones, a fax/modem line and high-speed Internet access.    * The bathroom includes a deep soaking tub
            </a>
        </h4>
    </div>

</body>
</html>



  • Explanation 
Please focus on css codes in head section above. you can see one property containing value ellipsis (text-overflow: ellipsis;)-it means it clips the string and add ... to the end, but it supports only for IE. Additionally, -o-text-overflow: ellipsis;  supports for Opera. The last one  -moz-binding: url('ellipsis.xml#ellipsis'); is a hack for firefox. So, you should have an xml file like below then:
<?xml version="1.0"?>
<bindings
  xmlns="http://www.mozilla.org/xbl"
  xmlns:xbl="http://www.mozilla.org/xbl"
  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    <binding id="ellipsis">
        <content>
            <xul:window>
                <xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>
            </xul:window>
        </content>
    </binding>
</bindings>


As a result, you will get your string formatted with ... :-)


P.S: It caused me a very headache to get it done, yet I am still not satified with it yet because you see css codes in HTML. I have tried to extract those css codes to external file; unfortunately I could  not get it worked. If you have any experience with it, please drop your comment. You are always welcome!

Additional Resources:

http://www.rikkertkoppes.com/thoughts/2008/6/  
http://ernstdehaan.blogspot.com/2008/10/ellipsis-in-all-modern-browsers.html
http://www.quirksmode.org/css/textoverflow.html

 

Tuesday, October 20, 2009

Child Selectors (Basic CSS Cont.)

Child selectors are similar to descendant selectors, but they select only children rather than all ancestors. Child selectors are indicated by a greater-than sign (>).
Example:
<ul>
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
  <li>Item four has a nested list
     <ol>
       <li>Sub-item one</li>
       <li>Sub-item two</li>
     </ol>
  </li>
</ul 
Whereas our descendant selector, ul li { color: blue; }, targeted all li elements in this
example, a similar child selector would only select the first four li elements, as they are direct children of a ul element:
ul > li {
  color: blue
}  
It would not target those li elements in item four’s nested ol list.
Note: Microsoft Internet Explorer 6 and below does not support child selectors.

Thursday, October 8, 2009

Centering Div block within its Div container parent

I have HTML Markup in the following:
<div id="adContainer">
                <div id="textAdFrame">
                    <ul id="adFrame">
                        <li class="textad">
                            <a href="#">
                                <h2 class="header">Best HOTEL in town?</h2>
                                <p class="detail">Which hotel has the softest pillow? Do you know? Tell everybody! Give them a Rate!</p>
                            </a>
                        </li>
                        <li class="textad">
                            <a href="#">
                                <h2 class="header">Emergency numbers?</h2>
                                <p class="detail">Click here for POLICE, FIRE, AMBULANCE  and other useful numbers!</p>
                            </a>
                        </li>
                        <li class="textad">
                            <a href="#">
                                <h2 class="header">The best restaurant in Phnom Penh!</h2>
                                <p class="detail">Where to get the best fried rice? Do you know? Tell everybody! Give them a Rate!</p>
                            </a>
                        </li>
                    </ul>
                </div>

</div>

Now please have a look at the css codes below:
#adContainer #textAdFrame{
    margin:0 auto;
}

As a result, you will see <div id="textAdFrame"> and its content is at the center of its parent container. You might wonder why it is so useful, because it is different from text-it is a div block. So, you cannot use text-align:center to make div block sit right in the center of its container.

Monday, October 5, 2009

Basic CSS (Cont.)

Descendant Selectors
Descendant selectors, sometimes called contextual selectors, allow you to create style rules that are effective only when an element is the descendant of another one. Descendant selectors are indicated by a space between two elements. As an example, you may want to style only li elements that are descendants of ul lists (as opposed, say, to those who are part of ol lists). You’d do so like this:
ul li {
          color: blue;

}
This rule will make li text blue—but only when the li is contained within a ul element. So, in the following code, all li elements would be blue:
 <ul>
   <li>Item one</li>
   <li>Item two</li>
   <li>Item three</li>
   <li>Item four has a nested list
     <ol>
       <li>Sub-item one</li>
       <li>Sub-item two</li>
     </ol>
  </li>

</ul>
Even though the nested list in item four is an ol element, the blue color will still be
applied to its list items because they are the descendants of a ul. Descendant selectors can be useful in targeting items deep in your (X)HTML structure, even when they don’t have an ID or class assigned to them. By stringing together many elements, you can target strong elements inside cite elements inside blockquote elements inside div elements:
div blockquote cite strong {
  color: orange;
}

You can combine these with your class and ID selectors to get even more specific. Perhaps we want only li elements in ul elements with a class of ingredients inside our div with the id value recipes:
div#recipes ul.ingredients li {
  font-size 10px;
}

As you can imagine, descendant selectors are powerful, and it’s no coincidence that descendant selectors are among the most-used types of CSS selectors.