Welcome to Dream.In.Code
Become an Expert!

Join 149,598 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 1,898 people online right now. Registration is fast and FREE... Join Now!




Shortening/fixing the width of a list menu

 
Reply to this topicStart new topic

Shortening/fixing the width of a list menu

clintmyster
9 Oct, 2007 - 03:45 AM
Post #1

New D.I.C Head
*

Joined: 1 Oct, 2007
Posts: 6


My Contributions
I have this code. I would like to fix the width of the list menu so it does not exceed lets say 50px. If the text goes over the 50px, I would like the text to be followed by an ellipsis. e.g. if the text is helloworld and the text that fits in the 50px is hello, then I would like the list menu to display hello... and so forth. Can someone please help me out with this? thanks

CODE
<table style="position:absolute; top:247px; left:598px; width:208px; height:; height: 107px;"34px; border="0">
   <tr>
     <td height="129"><form name="Jump" id="Jump">
         <script language="JavaScript" type="text/javascript">
function jumpJumpMenu(){
location=document.Jump.menu.options[document.Jump.menu.selectedIndex].value;
}
      </script>
         <span class="style1">Search by Fragrance </span><br />
         <select name="menu" style="font-family:'Arial';color:#000000;background-color:#FFFFFF;font-size:8pt;">
           <option value="file:///E|/IST/Perfumengifts/Home.html">&lt;&lt; select one &gt;&gt;</option>
           <option value="file:///E|/IST/Perfumengifts/Womens Fragrances/5th Avenue by Elizabeth Arden.html">5th Avenue</option>
           <option value="file:///E|/IST/Perfumengifts/Mens Fragrances/Acqua Di Gio by Giorgio Armani M.html">Acqua Di Gio (M)</option>
           <option value="file:///E|/IST/Perfumengifts/Womens Fragrances/Acqua Di Gio by Giorgio Armani W.html">Acqua Di Gio (W)</option>
           <option value="file:///E|/IST/Perfumengifts/Womens Fragrances/Baby Doll by Yves Saint Laurent.html">Baby Doll</option>
           <option value="file:///E|/IST/Perfumengifts/Mens Fragrances/Boss Soul by Hugo Boss.html">Boss Soul</option>
           <option value="file:///E|/IST/Perfumengifts/Mens Fragrances/CK one by Calvin Klein.html">CK One</option>
           <option value="file:///E|/IST/Perfumengifts/Womens Fragrances/Curious by Britney Spears.html">Curious</option>
           <option value="file:///E|/IST/Perfumengifts/Mens Fragrances/Desire Blue by Alfred Dunhill.html">Desire Blue</option>
           <option value="file:///E|/IST/Perfumengifts/Womens Fragrances/Diesel Green Feminine by Diesel.html">Diesel Green Feminine</option>
           <option value="file:///E|/IST/Perfumengifts/Womens Fragrances/Eternity Moment by Calvin Klein.html">Eternity Moment</option>
           <option value="file:///E|/IST/Perfumengifts/Mens Fragrances/Eternity by Calvin Klein M.html">Eternity (M)</option>
           <option value="file:///E|/IST/Perfumengifts/Mens Fragrances/Fahrenheit by Christian Dior.html">Fahrenheit</option>
           <option value="file:///E|/IST/Perfumengifts/Womens Fragrances/Fendi by Fendi.html">Fendi</option>
           <option value="file:///E|/IST/Perfumengifts/Mens Fragrances/Gentleman by Givenchy.html">Gentleman</option>
           <option value="file:///E|/IST/Perfumengifts/Womens Fragrances/Giorgio G by Giorgio Beverly Hills.html">Giorgio G</option>
           <option value="file:///E|/IST/Perfumengifts/Mens Fragrances/Hugo Dark Blue by Hugo Boss.html">Hugo Dark Blue</option>
           <option value="file:///E|/IST/Perfumengifts/Womens Fragrances/Hugo Deep Red by Hugo Boss.html">Hugo Deep Red</option>
           <option value="file:///E|/IST/Perfumengifts/Womens Fragrances/In Love Again by Yves Saint Laurent.html">In Love Again</option>
           <option value="file:///E|/IST/Perfumengifts/Mens Fragrances/Intuition by Estee Lauder M.html">Intuition (M)</option>
           <option value="file:///E|/IST/Perfumengifts/Womens Fragrances/Joop! Femme by Joop!.html">Joop! Femme</option>
           <option value="file:///E|/IST/Perfumengifts/Mens Fragrances/Joop! Homme by Joop!.html">Joop! Homme</option>
           <option value="file:///E|/IST/Perfumengifts/Womens Fragrances/Kenzo Flower by Kenzo.html">Kenzo Flower</option>
           <option value="file:///E|/IST/Perfumengifts/Mens Fragrances/Kouros by Yves Saint Laurent.html">Kouros</option>
           <option value="file:///E|/IST/Perfumengifts/Mens Fragrances/L'eau D'issey Pour Homme by Issey Miyake.html">L'eau D'issey Pour Homme</option>
           <option value="file:///E|/IST/Perfumengifts/Womens Fragrances/Light Blue by Dolce and Gabbana.html">Light Blue</option>
           <option value="file:///E|/IST/Perfumengifts/Womens Fragrances/Madame Rochas by Rochas.html">Madame Rochas</option>
           <option value="file:///E|/IST/Perfumengifts/Mens Fragrances/Michael Kors by Michael Kors M.html">Michael Kors (M)</option>
           <option value="file:///E|/IST/Perfumengifts/Womens Fragrances/Noa Fleur by Cacharel.html">Noa Fleur</option>
           <option value="file:///E|/IST/Perfumengifts/Mens Fragrances/Nobile by Gucci.html">Nobile</option>
           <option value="file:///E|/IST/Perfumengifts/Mens Fragrances/Opium by Yves Saint Laurent M.html">Opium (M)</option>
           <option value="file:///E|/IST/Perfumengifts/Mens Fragrances/Paco Rabanne Pour Homme by Paco Rabanne.html">Paco Rabanne Pour Homme</option>
           <option value="file:///E|/IST/Perfumengifts/Womens Fragrances/Paris Hilton by Paris Hilton W.html">Paris Hilton (W)</option>
           <option value="file:///E|/IST/Perfumengifts/Womens Fragrances/Touch of Pink by Lacoste.html">Touch of Pink</option>
         </select>
         <a href="java script:jumpJumpMenu();"><img src="http://www.perfumewarehouse.com.au/images/search_magnifyingglass.gif" alt="ss" border="0" /></a>
         </p>
       </form>
         <p><span class="style1">Search by Fragrance House </span><br />
             <select name="select" style="font-family:'Arial';color:#000000;background-color:#FFFFFF;font-size:8pt;">
               <option value="http://www.msn.com/">MSN.com</option>
               <option value="http://www.google.com/">google.com</option>
               <option value="http://www.yahoo.com/">yahoo.com</option>
               <option value="http://www.smh.com.au">smh.com.au</option>
               <option value="http://www.msn.com/">MSN.com</option>
               <option value="http://www.google.com/">google.com</option>
               <option value="http://www.yahoo.com/">yahoo.com</option>
               <option value="http://www.smh.com.au">smh.com.au</option>
               <option value="http://www.msn.com/">MSN.com</option>
               <option value="http://www.google.com/">google.com</option>
               <option value="http://www.yahoo.com/">yahoo.com</option>
               <option value="http://www.smh.com.au">smh.com.au</option>
               <option value="http://www.msn.com/">MSN.com</option>
               <option value="http://www.google.com/">google.com</option>
               <option value="http://www.yahoo.com/">yahoo.com</option>
               <option value="http://www.smh.com.au">smh.com.au</option>
               <option value="http://www.msn.com/">MSN.com</option>
               <option value="http://www.google.com/">google.com</option>
               <option value="http://www.yahoo.com/">yahoo.com</option>
               <option value="http://www.smh.com.au">smh.com.au</option>
               <option value="http://www.msn.com/">MSN.com</option>
               <option value="http://www.google.com/">google.com</option>
               <option value="http://www.yahoo.com/">yahoo.com</option>
               <option value="http://www.smh.com.au">smh.com.au</option>
               <option value="http://www.msn.com/">MSN.com</option>
               <option value="http://www.google.com/">google.com</option>
               <option value="http://www.yahoo.com/">yahoo.com</option>
               <option value="http://www.smh.com.au">smh.com.au</option>
             </select>
           <a href="java script:jumpJumpMenu();"><img src="http://www.perfumewarehouse.com.au/images/search_magnifyingglass.gif" alt="s" border="0" /></a> </p>
       </form>
     </td>
   </tr>
</table>

User is offlineProfile CardPM
+Quote Post

girasquid
RE: Shortening/fixing The Width Of A List Menu
9 Oct, 2007 - 09:52 AM
Post #2

Barbarbar
Group Icon

Joined: 3 Oct, 2006
Posts: 1,294



Thanked: 18 times
Dream Kudos: 725
My Contributions
Try setting width: 50px, and then text-overflow: ellipsis. That way the maximum width will be 50px, and whenever it extends farther the text will be replaced with '...'.
User is offlineProfile CardPM
+Quote Post

clintmyster
RE: Shortening/fixing The Width Of A List Menu
9 Oct, 2007 - 11:40 PM
Post #3

New D.I.C Head
*

Joined: 1 Oct, 2007
Posts: 6


My Contributions
so if the code is like this,
CODE
<table style="position:absolute; top:247px; left:598px; width:208px; height:; height: 107px;"34px; border="0">
   <tr>
     <td height="129"><form name="Jump" id="Jump">
         <script language="JavaScript" type="text/javascript">
function jumpJumpMenu(){
location=document.Jump.menu.options[document.Jump.menu.selectedIndex].value;
}
      </script>
         <span class="style1">Search by Fragrance </span><br />
         <select name="menu" style="font-family:'Arial';color:#000000;background-color:#FFFFFF;font-size:8pt;">
           <option value="

should it now be like this?

CODE
<table style="position:absolute; top:247px; left:598px; width:208px; height:; height: 107px;"34px; border="0">
   <tr>
     <td height="129"><form name="Jump" id="Jump">
         <script language="JavaScript" type="text/javascript">
function jumpJumpMenu(){
location=document.Jump.menu.options[document.Jump.menu.selectedIndex].value;
}
      </script>
         <span class="style1">Search by Fragrance </span><br />
         <select name="menu" style=width: 50px;text-overflow: ellipsis;"font-family:'Arial';color:#000000;background-color:#FFFFFF;font-size:8pt;">
           <option value="


if not, what should it look like? btw, looking on google i noticed that this css thingy may not work for firefox? is that correct? because i need something that will work in both IE and firefox.

This post has been edited by clintmyster: 10 Oct, 2007 - 12:07 AM
User is offlineProfile CardPM
+Quote Post

Fast ReplyReply to this topicStart new topic
Time is now: 1/7/09 11:35PM

Be Social

Dream.In.Code RSS Feed Dream.In.Code LinkedIn Group Follow Us On Twitter

Live Help!

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

DIC Chatroom

Bye Bye Ads

Monthly Drawing

Thumb Drive

Top Contributors

Top 10 Kudos This Month