|
HTML - Drop Down List Width
Hi all!
I need some help with my site. In firefox, the Select Category dropdown under filters (on the left) expands to display the full text of the options. In IE, it doesn't do that - the options are cut off. How do I force that to happen in IE? site is at: www.v_an_darn_.com (remove _ ) Thanks! Similar TutorialsHi, I have a website at http://www.homecookingdiary.com with a drop down menu on the right side. The problem I am having is that once you click on the arrow, the size of the table containing the words isn't consistent on Firefox and IE. On Firefox, the width automatically changes according to the length of the submenu. On IE, the width is fixed so that any long subtitles are cut off. I want to fix this problem so that on IE, the width automatically adjusts according to the words. I used this code below. <select onchange="self.location.href=''+this.options[this.selectedIndex].value+''" style="font-size:12px;color:#006699;font-family:verdana;background-color:#ffffff;width:140px" name="menu"> Please let me know how I can fix this problem. Thank you. I've created a drop down list with 4000 options on it which I did from an example I found on line. This is fine - loads quite quickly! I then had to add another 9 fields with the same 4000 options on and now the page doesn't load as quicky as I'd like. I was wondering if there was a way of defining the list of 4000 options once and then asking the ten drop down lists to reference it? I recently posted this in the middle of someone else's thread, which wasn't the best thing to do, so here it is again in its own thread. On my web site I have a drop-down menu with a "Go" button beside it. when JavaScript is enabled in Firefox and IE7, selecting an option from the list automatically takes you to that location without touching the Go button. However, when JavaScript is disabled, the drop-down's automatic redirection is also disabled. So you need a "Go" button next to the drop-down bar. This works in Firefox, but it doesn't work in IE7, and I don't know why. Any help would be gratefully received. You can see the drop-down working at: http://www.historyfiles.co.uk/MainFeaturesIndex.htm Here's the script: <table border="0" cellpadding="0" cellspacing="0"> <form method="get" action="" tabindex="3" target="_top"> <tbody> <tr> <td height="16"> <select name="link" class="xbar" onchange="if (this.options[selectedIndex].value != '') location.href=this.options[selectedIndex].value"> <option value="#"> Choose a topic </option> <option value="MainFeaturesIndex.htm"> British Isles </option> </select> <input value="Go" src="images/nav-gobutton.jpg" border="0" value="Go" alt="Go" type="image" class="xGo" tabindex="4" onclick="if (this.options[selectedIndex].value != '') location.href=this.options[selectedIndex].value" width="22" height="16"> </td> </tr> </tbody></form> </table> i want to create a drop down list that lists my favorite films but use my own image instead of a go button show me how to do this and i would also like to add colors to the list so it isn't just black & white and have it automatically sort alphabetically if possible. I have an issue where a drop down list is displaying diffrent amounts of options on 2 machines. The 2 machines are simillar if not the same. Both using internet explore 6 and windows xp. As an example if you go to the website http://au.asus.com/index.aspx and look at the select country /area drop down box in the top left hand corner computer 1 will display all the options down to romania where computer 2 only shows all the options down to germany. Are there any settings in internet explore or windows XP which could be diffrent between the 2 machines which would cause the number of options shown in a drop down list to differ. Any help would be much appreciated. I have 3 radio buttons in my web page and nothing else initially. Say A,B and C. If i choose Radio button A, i should get a drop down menu in the same page. After that if i choose radio button B, the drop down menu corresponding to Radio button A should disappear and drop down corresponding to B should appear. Similarily for radio button C also. All these should happen on the same page. Is this possible with HTML or should i go for some other scripts like java scripts, or JSP etc can anyone help me out with this? Hi All, first post in the forum. I would like to know if it is possible to create a drop down list from which the user could select a value but could also decide to enter a new one ? What I want is to offer the user to select an existing company name or enter a new one, but I would like to have only one field to do it instead of two. Is this possible Thanks for helping. ALex Is it possible to choose an image from a drop down menu which would change an image on the page? for example using mouseover you can make thumbnail images or hyperlinks when hovered over, change an image on the page to the image that the link or thumbnail represents. can the same be done with a drop down list when an image number is chosen from a list can a centre image be linked with the choice chosen? Hi, I'm new to programming here. How do I enable a checkbox to work with a drop down list? For example, If the value inside the drop down list will only be registered or activated when i check the checkbox. I want to send an order via email to my server and I want the dropdownlist with the checkbox not checked to not display anything. How do i do that? Thanks! How can I drop down a select list with onmouseover instead of clicking it. Select list cannot be clicked in javascript to emulate that. eg: onmouseover="(this.click())" Also setting the 'size of select list' = 'its length' in javascript does not accurately emulate the click event because the adjacent layout changes. I tried using z-index and position attribute but doesn't help. Hi All, Kindly help me in striking out a single value in drop down list options. I have 3 options - Hello,HI ,BYE. I want to strike out "Hi"when the list is shown, I was able to put color for single option but I could not stike it out. <html> <head> <style type="text/css"> .test { background: #708090; color: #DC143C; /*text-decoration: line-through;*/ } </style> </head> <body> <form> Select One: <select id="myList" > <option>Hello</option> <option disabled="disabled">---------</option> <option class="test">Hi</option> <option disabled="disabled">---------</option> <option>Bye</option> </select> </form> </body> </html> So, I'm looking to make a drop down style menu that can be seen on all (or at least the vast vast majority) browsers/universal. Basically, I don't want anything too flashy, but I just have no idea to do any sort of dropdown list aside from the basic html menu and input type of thing. To give an example of something I'm trying to do, I made a simple picture. I'm not looking to make it with flash or anything fancy; as I said, it's really basic and I just want it to be text. Any help or links would be appreciated! Hello, I have a simple html form drop down list as a quick reference and link to pages on my site. It is not nested with subcategories, however there are still hundreds of options in the list, and it is causing the page load time to slow considerably. When the list is created dynamically it is painfully slow. I tried to speed things up by making a static html file of the code and using INSERTFILE on my pages. This helped a little, but not enough to suit me. Is there a way to cache this code snippet, or something like that, to speed up the load time? Thanks! The tutorial on how to make a search form with multiple search options was excellent! http://www.mediacollege.com/internet...ti-search.html However, is it possible to use radio buttons instead of a drop-down list? Can someone be kind enough to show me the code for it? Million thanks. So I'd like to have a 160*600 box with hyperlinks displaying only a headlines I select. I would like the bottom of the box to have arrows for navigating between sections of links that fit in the box with a place to enter a page number in between them. I would like it to begin with displaying the most recently posted links starting on the last page number with that being the first page it displays. I want the bottom of the box to include below the browsing chronological browsing feature an arrow facing left with the word "search" that would open a box with a place to type in text for it to search link headlines. At the bottom of the search box I would like an arrow facing down with the words "search by label". Yes, I would like to not only select a headline for each link but also categorically label them. If I could also select images for it to automatically fill the empty space with when a new page number is started that would be great, even better if it selects ones that fill the most depending on how long the headlines are. If it repeated headlines in extra page space instead of showing images that would be cool too. I'd also like it to automatically expand in height past 160*600 to make a new page number just for a headline that doesn't fit in 160*600. I need this in HTML. My blog is episin.blogspot.com im creatinh a box containing a text. The box must be wide enough to fill a text. menu.style.width = tekst.length - this functioin gives the number of letters in text. So if the text is "hello" then the width is 5 pixels. But i need the widith of pixels needed to fit the text in a box. How can i do that? Hi, Is there away to force my website to fit an Iphone screen when viewed on the iphone. At the moment the width doesn't full span the Iphones screen so it looks bad. http://pjm.co.uk.uksite4.yourwebserv...splay&PageID=5 Thanks alot Joe I have a big list and I want to show on my webpage 6lines from that list randomly (when webpage is refreshed another 6 lines appear). can anyone help me with he code, how should the list look like so it works...or where can I find more info on this ? thanks I am making a website with a list inside list for my navigation bar. It looks good on safari(win/mac) and firefox but the list looks horrible in IE7.0(didnt check 6.0) I was wondering if anyone know what it could be HTML Code: Code: <div id="nav"> <img class="menupic" src="images/mainmenu.png" alt="Main Menu"/> <ul class="navli"> <li><a class="point" href="#"><img src="images/menu_findme.png" alt="findMe"/></a></li> <li> <ul class="navlinks"> <li><a href="#goto_facebook" id="facebook">- Facebook</a></li> <li><a href="#goto_myspace" id="myspace">- Myspace</a></li> <li><a href="#goto_youtube" id="youtube">- Youtube</a></li> </ul> </li> </ul> <ul class="navli"> <li><a class="point" href="#"><img src="images/menu_blog.png" alt="blog"/></a></li> <li> <ul class="navlinks"> <li><a href="#blogid2" id="blogid2">- Testing | May 01</a></li> <li><a href="#blogid1" id="blogid1">- Debut Album | Apr 30</a></li> <li><a href="#goto_blogarchive" id="blogarchive">- Archives</a></li> <li class="donthidethis"><ul class="navli donthidethiseither" style="padding:0;"> <li><a class="point" href="#">- Categories</a></li> <li><ul class="navlinks"> <li><a href="#goto_catid2" id="catid2">- Media</a></li><li><a href="#goto_catid1" id="catid1">- News</a></li><li><a href="#goto_catid3" id="catid3">- Off Topic</a></li><li><a href="#goto_catid4" id="catid4">- Tutorials</a></li> </ul></li> </ul></li> </ul></li> </ul> <ul class="navli"><li><a class="point" href="#"><img src="images/menu_eliasmusictv.png" alt="eliasMusic Tv"/></a></li> <li><ul class="navlinks"> <li><a href="#" id="coming">- Coming soon...</a></li> </ul></li> </ul> <ul class="navli"><li><a class="point" href="#"><img src="images/menu_about.png" alt="about"/></a></li> <li><ul class="navlinks"> <li><a href="#goto_biography" id="biography">- biography</a></li> </ul></li> </ul> <ul class="navli"><li><a class="point" href="#"><img src="images/menu_links.png" alt="links"/></a></li> <li><ul class="navlinks"> <li><a href="#" id="links">- Coming soon...</a></li> </ul></li> </ul> <ul class="navli"><li><a class="point" href="#"><img src="images/menu_contact.png" alt="contact"/></a></li> <li><ul class="navlinks"> <li><a href="#goto_contact" id="contactpage">contactForm</a></li> </ul></li> </ul> CSS Code: Code: #nav { float:right; width:195px; padding-left:20px; background:url("images/navback.png"); } #nav ul { list-style: none; margin-left:1px; border: none; } #nav .navli { padding-top:3px; padding-bottom:3px; } #nav .navlinks { padding-left:25px; } #nav .navlinks a,a:link { color:#262626; } #nav .navli img { margin-top:5px; margin-bottom:5px; } #nav .navlinks a:hover { color:#dadada; } #nav img.menupic { margin:20px 10px 5px 95px; } #nav a { font-size:14px; display:block; } #nav a.point { font-size:14px; font-weight:bold; } .navliover { background:url("images/navhover.jpg"); }
Any help at all would be appriciated please I can show u the website via Private message if you are interested in helping Thanks in advance Reply With Quote Hello, I ran into this problem today in my Basic XHTML class, and it was enough to stump me and the instructor: if you want to put an unordered list in the middle of a page, but you want the list items to be left-aligned so the bullets are one on top of the other...how do you do it? I started with code something like <div align="center"> <ul type="disc"> <li>Wine</li> <li>Women</li> <li>Song</li> </ul> </div> This centers the list on the page, but it also centers each list item. I tried placing a <div align="left"> around the list items, individually and collectively, but depending on the positioning it either had no effect or it nullified the center attribute completely and gave me a left-aligned list on the left edge of the page. Attempts to change the style of the <li> tag, which I haven't done in months and was never all that good at, failed. I know I can do this in ten seconds by putting the list inside a one-cell table, and with much fiddling I could probably do it with a spacer GIF...but what's the 1.0 Strict way? |
|||||||