HTML - Select/list Boxes Will Not Render In Ie7
I am having a problem with IE7 rendering this page's last two select boxes. It renders fine in Firefox.
It doesn't seem to like the height properties of the select boxes being set to percentages. Thanks in advance HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>BLAH BLAH BLAH, WEIRD IE BEHAVIOUR</title> </head> <body id="bodyBODY"> <form name="frmFORM" id="frmFORM"> <table align="center" width="100%" height="800px" border="1"> <tr> <td style="width: 30%; text-align: center; vertical-align: top; height: 90%;"> <div> TITLE 1<br /> </div> <select name="select1" size="2" id="select1" style="height: 90%; width: 100%;"> <option value="00023">00023</option> <option value="04988">04988</option> <option value="05560">05560</option> <option value="05565">05565</option> <option value="05915">05915</option> <option value="05M">05M</option> <option value="06970">06970</option> <option value="07M">07M</option> <option value="09015">09015</option> <option value="09020">09020</option> <option value="09030">09030</option> <option value="09065">09065</option> <option value="09275">09275</option> <option value="09330">09330</option> <option value="09335">09335</option> <option value="09340">09340</option> <option value="09441">09441</option> <option value="09442">09442</option> <option value="09491">09491</option> <option value="09615">09615</option> <option value="09763">09763</option> <option value="09810">09810</option> </select> </td> <td style="width: 30%; text-align: center; vertical-align: top;"> <div> TITLE 2<br /> </div> <select name="select2" id="select2" size="2" style="height: 90%; width: 100%;"> <option value="09330">09330</option> <option value="09335">09335</option> <option value="09340">09340</option> <option value="09441">09441</option> <option value="09442">09442</option> </select> </td> <td style="width: 40%; text-align: center; vertical-align: top;"> <div> TITLE 3<br /> </div> <select name="select3" id="select3" style="height:90%;width:100%;" size="2"> <option value="A-008FXD">A-008FXD</option> <option value="A-1251BOLTE">A-1251BOLTE</option> <option value="A-1251F31">A-1251F31</option> <option value="A-6901RW7">A-6901RW7</option> <option value="A-6901RW8">A-6901RW8</option> <option value="A-6901RW9">A-6901RW9</option> <option value="A-6901SA1">A-6901SA1</option> <option value="A-6901SA2">A-6901SA2</option> <option value="G-813R0070">G-813R0070</option> <option value="G-813R0127">G-813R0127</option> <option value="G-813R0174">G-813R0174</option> <option value="G-813R0192">G-813R0192</option> <option value="G-813R6500">G-813R6500</option> <option value="G-813RDJX">G-813RDJX</option> <option value="G-813RGEL">G-813RGEL</option> <option value="G-813RICM2">G-813RICM2</option> <option value="G-813RLIQD">G-813RLIQD</option> <option value="G-813ROPT">G-813ROPT</option> <option value="G-813RPCC">G-813RPCC</option> <option value="G-813RQTM">G-813RQTM</option> <option value="G-813RTAB">G-813RTAB</option> </select> </td> </tr> </table> </form> </body> </html> Similar TutorialsI'm sure there is a simple answer to this or I hope so. I don't have much computer code experience so I'm just going with trial and error. Anyway, my question is concerning the output of my navigation links. Its setup like this in template <ul> <li>[Navigation]</li> </ul> this outputs a set of about 10 links that look like this in the code ul> <li> link <br/> link <br/> link <br/> </li> </ul> It works but I need the code to look like this for it to function right. ul> <li> link </li> <li> link </li> <li> link </li> </ul> how do i code that using the [Navigation] Variable thanks a ton hi All, I want to add two select(dropdown lists) boxes. Content of first select box will be name of countries. And the other select box which will contain states of those counties should show the values according to the value selected in first select box. Eg: Suppose I select America then it should only show the states of America. I want to know whether it is possible using simple html? or javascript is required? and how? Regards, Jaas I'm creating a form framed in a table. I want to have 2 textboxes and 1 select box in one row of the table. The Last Name, First Name and Age. When I create the row the fields are fine, but there's spacing after each field that I need to decrease in size to allow everything to fit correctly. Here's the code I have right now Code: <table summary="form" cellpadding="0" cellspacing="0"> <tbody> <tr> <td> <input type="text" name="childlname" value="" size="20"> </td> <td> <input type="text" name="childfname" value="" size="20"> </td> <td> <select name="childage" align="right" width="5"> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> </select> </td> </tr> </tbody> </table> Thank you in advance for any help Mike Hi, I have a select box with values 1, 2 and 3. When I select '1', I want right next to it 1 inputbox with id A. When I select '2', I want on the same place 2 inputboxes (with other IDs B and C), and so on ... I tried 1) Putting the 3 spans immediately after the select box and switch visibility between hidden and visible accordingly. Problem he all spans take some space. So if I select 2, it shows me correctly the 2 inputboxes B and C, but there is an empty space between the select box and the inputboxes since the first span is there (invisible). I want the boxes immediately next to the select box. 2) Putting 3 spans (span1, span2, span3, containing 1 box, resp. 2 boxes and so on) somewhere invisible. And then using 1 span next to the select box. On change of choice: document.getElementById("span").value = document.getElementById("span2").value; Problem he the boxes are not shown in span, just empty space. Who has a Good solution? Thanks alot I am trying to make two drop down list boxes (each with a "Enter" button), but I can't get them both to work. The second list box works fine, but the "Enter" button from the first box uses the selection of the second box as its reference. Does anyone know why this is happening? Below is the code that I am using. Code: </ br> <h1 style="text-align: center;">View Routes</h1> <p style="text-align: center;">Browse By Location:</ br><script type="text/javascript"> function submitForm() { var list = document.navList.subMenu; var page = list.options[ list.selectedIndex ].value; if (page != "home") window.location = page; return false; } </script> <form style="text-align: center" name="navList" onsubmit="return submitForm();"> <select name="subMenu"> <option value="home"> </option> <option value="http://climb-utah.modern-graphix.com/bryce-national-park">Bryce National Park</option> <option value="http://climb-utah.modern-graphix.com/capitol-reef-national-park">Capitol Reef National Park</option> <option value="http://climb-utah.modern-graphix.com/cedar-mesa">Cedar Mesa</option> <option value="http://climb-utah.modern-graphix.com/escalante-grand-staircase">Escalante Grand Staircase</option> <option value="http://climb-utah.modern-graphix.com/lake-powell-area">Lake Powell Area</option> <option value="http://climb-utah.modern-graphix.com/miscellaneous">Miscellaneous</option> <option value="http://climb-utah.modern-graphix.com/moab-area">Moab Area</option> <option value="http://climb-utah.modern-graphix.com/robbers-roost">Robbers Roost</option> <option value="http://climb-utah.modern-graphix.com/san-rafael-swell">San Rafael Swell</option> <option value="http://climb-utah.modern-graphix.com/wasatch-mountains">Wasatch Mountains</option> <option value="http://climb-utah.modern-graphix.com/uinta-mountains">Uinta Mountains</option> <option value="http://climb-utah.modern-graphix.com/valley-of-fire">Valley Of Fire</option> <option value="http://climb-utah.modern-graphix.com/zion-national-park">Zion National Park</option> </select> </ br> <input type="submit" value="Enter" /> </form> <p style="text-align: center;">Browse By Category:</p><script type="text/javascript"> function submitForm() { var list = document.navCat.subMenuCat; var page = list.options[ list.selectedIndex ].value; if (page != "home") window.location = page; return false; } </script> <form style="text-align: center" name="navCat" onsubmit="return submitForm();"> <select name="subMenuCat"> <option value="home"> </option> <option value="http://climb-utah.modern-graphix.com/family-fun">Family Fun - Easy</option> <option value="http://climb-utah.modern-graphix.com/weekend-warrior">Weekend Warrior - Moderate</option> <option value="http://climb-utah.modern-graphix.com/hardcore">Hardcore - Difficult</option> <option value="http://climb-utah.modern-graphix.com/technical">Technical - Highly Skilled</option> <option value="http://climb-utah.modern-graphix.com/adventure-tales">Adventure Tales - Stories</option> <option value="http://climb-utah.modern-graphix.com/video-audio-clips">Video & Audio Clips</option> <option value="http://climb-utah.modern-graphix.com/other-stuff">Other Stuff</option> </select> </ br> <input type="submit" value="Enter" /> </form> 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 guys, I have a form with HTML Code: <select name="myOnClick" onChange="DoSubmission()"> <option value="1">Year 1 </option> <option value="2">Year 2</option> <option value="5">Year 5</option> <option value="10">Year 10</option> <option value="25">Year 25</option> </select> when the user clicks on one of these, it refreshes the page and updates a variable somewhere bsaed on the value. However when it refreshes the value showing is always Year 1. I want it to show the option they have just clicked. Anyone know the code that allows you to choose which one shows up? I can then use php to script which one is selected. TIA Hi girls and guys, I have confront a problem regarding the select menu list. From an example, have 1000 customer name records in the select list, I try to scroll down the list and select one of them only. So it may spend some time to look through the 1000 customer name records and select only one customer name. Any ways or solution can solve this kinds of messy works? Thank you. How do I get the selected item from a select option list? I dont need the value I need the text associated with the value. I can get the value with (in vbscript): strValue = .mylist.value Have searched google exhaustively to see how to do this simple thing but have found nothing. Thanks. HTML Code: <div class="contactlistdiv"> <select multiple="yes" name="send" class="contactlistone" size="6"> <option value="1" >hello</option><option value="2" >gee</option><option value="3" >gluba</option></select> </div> I am creating a list like the one above. When I style it with CSS it wont let me select any options! E.g if i float left or right(float:right; ) with CSS it wont work. Where as if I place it absolutely somewhere it will work. Problem is to get it exaclty where I want i need to float it. I have tried placing it inside a relatively placed div absolutely but it still wont let me select. I have also tried styling both classes contactlistdiv and contactlistone but it doesnt make a difference. Any help appreciated. Thanks. I just put the final touches on the design of my site, livecapoeira.com but the homepage doesn't render quite how it does in a preview viewed locally on my machine. I'm using Dreamweaver if that helps, but could someone point out or explain why the background of the footer (where the about us/contact us) is floating at the top in the navigation bar? I've been staring at it but can't figure it out. Hi there, I am currently designing a website for an art gallery. I thought I had finished it today while viewing it in firefox on my mac, but when I went to view it on internet explorer on a PC the page is not rendered properly! i don't know what to do! I have 2 divs - centercol & rightcol - centercol displays the main content, and rightcol displays an image specific to the content on the page. on my mac it shows like this: on a PC in internet explorer it shows like this: website is at http://pennystewartdesigns.com/merrepen/html/main.html NB: Main page functions fine, but when you click on any other tabs the rightcol displays below the main content in IE. My code is he Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Merrepen Arts | About Us</title> <link rel="stylesheet" href="http://pennystewartdesigns.com/merrepen/html/style.css" type="text/css" media="screen" /> <link rel="stylesheet" type="text/css" href="http://pennystewartdesigns.com/merrepen/html/coin-slider-styles.css" media="screen" /> <link rel="stylesheet" type="text/css" href="http://pennystewartdesigns.com/merrepen/html/menusm.css" media="screen" /> <link rel="stylesheet" type="text/css" href="http://pennystewartdesigns.com/merrepen/html/pagenavi-css.css" media="screen" /> <script type="text/javascript" src="http://pennystewartdesigns.com/merrepen/html/js/cufon-yui.js"></script> <script type="text/javascript" src="http://pennystewartdesigns.com/merrepen/html/js/cufon-yankaff.js"></script> <script type="text/javascript" src="http://pennystewartdesigns.com/merrepen/html/js/jquery-1.4.2.min.js"></script> <!-- menu --> <script type="text/javascript" src="http://pennystewartdesigns.com/merrepen/html/js/menusm.js"></script> <!-- scripts for use --> <script type="text/javascript" src="http://pennystewartdesigns.com/merrepen/html/js/script.js"></script> <!-- slider --> <script type="text/javascript" src="http://pennystewartdesigns.com/merrepen/html/js/coin-slider.min.js"></script> <!-- tabs-categories --> <script type="text/javascript" src="http://pennystewartdesigns.com/merrepen/html/js/tabs-hoverintent.js"></script> <script type="text/javascript" src="http://pennystewartdesigns.com/merrepen/html/js/tabs-superfish.js"></script> <script type="text/javascript" src="http://pennystewartdesigns.com/merrepen/html/js/tabs.js"></script> <link rel="stylesheet" href="http://pennystewartdesigns.com/merrepen/html/tabs.css" type="text/css" media="screen" /> </head> <body> <div id="page"> <div id="header"> <div class="logo"> <p align="center"><img src="http://pennystewartdesigns.com/merrepen/html/images/logo1.png" align="middle" alt="Merrepen Arts"/> </p></div> <div class="topnav"> <ul class="menusm"> <li><a href="http://pennystewartdesigns.com/merrepen/html/main.html">Home</a></li> <li><a href="http://pennystewartdesigns.com/merrepen/gallery">Gallery</a></li> <li class="current_page_item"><a href="http://pennystewartdesigns.com/merrepen/html/about.html">About Us</a></li> <li><a href="http://pennystewartdesigns.com/merrepen/html/dalyriver.html">Daly River</a></li> <li><a href="www.merrepenfestival.com.au" target="_blank">Festival</a></li> <li><a href="http://pennystewartdesigns.com/merrepen/html/contact.html">Contact</a></li> <li><a href="http://pennystewartdesigns.com/merrepen/html/visit.html">Visit Us</a></li> </ul> <div class="clr"></div> </div> <!--/topnav --> <div class="clr"></div> </div> <!--/header --> <div class="clr"></div> </div> <div id="centercol" style="background-image: url('http://pennystewartdesigns.com/merrepen/html/images/bg/bgabout.gif'); background-repeat:no-repeat; background-position:top right"> <div class="box post"> <div class="content"> <div class="post-title"> </div> <!--/post-title --> <div class="blog-content"> <div class="post-excerpt"> <p align="center"> <h3>About Merrepen Arts</h3><br /><br /> </p> content.<br /><br /> </div> </div> <!--/post-excerpt --> <div class="clr"></div> <!--/content --> </div> <!--/box --> </div> </div> <!--/centercol --> <div id="rightcol"> <div class="wtitle"> <h3></h3><br /> </div> <div class="content"> <div id="credit"> <img src="images/about.jpg" alt="Merrepen Arts" /> <!--/content --> </div> <!--/box --> </div> <!--/content --> <!--/box --> </div> <!--/rightcol --> <div class="clr"></div> <!--/columns --> <div class="clr"></div> <!--/page --> <div class="clr"></div> <div id="page_bottom"> <div id="footer"> <div class="textf"> <div class="text1">© Copyright <a href="http://www.pennystewartdesigns.com">Merrepen Arts</a>. All Rights Reserved. </div> <div class="text2"><a href="http://www.pennystewartdesigns.com">Design</a></div> </div> </div> <div class="clr"></div> <!--/footer --> </div> </body> </html> my CSS for these divs are he Code: /*=== Layout ===*/ #page { margin:0 auto; padding:0; width:1200px;} /*=== Center Column ===*/ #centercol { margin-left:20px; padding:0 0 38px; float:left; width:800px;} /*=== Right Column ===*/ #rightcol { margin:0; padding:0 0 0 40px; float:right; width:400px; border-left:1px solid #dfdfdf; } .box { margin:0; padding:20px 0;} .box .content { } .box_r { margin:0 0 24px; padding:0; background:none; border:none;} .box_r .content { margin:0; padding:0;} .small_link { padding:10px 0; margin:0 auto; text-align:center;} .small_link a { color:#939393; text-decoration:none;} .small_link small { font-size:11px;} can anyone help? this is the first time i've had this problem & ive been looking at this code for far too long now. it all looks like gobbledy gook to me now!! arrggghhhhhh. so frustrating! penny I am hoping that someone from this forum might be able to help me. I have a site based off of php and recently installed an add on in the form of a portal page. I have been working with the developer of the portal add on and we are both stumped as to why I am having a specific problem. Here is the portal page: https://www.gunsgrubandgold.com/forum/portal.php If you notice the page renders PERFECT in Fire Fox, however in IE8 the information boxes are all squashed together. If I use this in the overall header Code: <meta http-equiv="X-UA-Compatible" content="IE=edge" /> Then the page renders perfect in IE8 but then I have issues in the text box area when posting of having the cursor scroll up (which I guess is an IE8 issue) If I use this in the overall header Code: <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> then the portal page in IE8 is "squashed together" but the text box area for posting works as it should. Could someone please take a look at the portal index page I linked above and let me know why it renders perfect in FF but not IE8??? Most of my members use IE8 from what I can gather and this issue is driving me nuts. Any help appreciated. Thanks!!!! I've tried using the IE developer tool to see what the issue may be but I can't seem to figure out why it is doing what its doing. Thanks again!! hello, I'm new on this site. I am making a c# app with web surfing in mind. I asked on 3 c# forums about a question I have but I am not satisfied with their answers. So I came to you too. I want to be able to clean a page(get rid of some tags), that is loading in my webBrowser control, before is rendered inside it. i DON'T want to load it into a string, because if I do that, I must remake the page. I need something that can peek at some page,but not consume it, search for some specific tag, replace/delete it, then allow the "new" page to be finally loaded in my browser. How to achieve this, using html or javascrispt or whatever? I can't explain better than that. Thank you. I am trying to read an HTML file from a file system and render it. What would be the fastest way to read and render such a HTML file? Tried iFrame and setting the inner HTML of a div tag. But both were equally slow. (surprisingly iFrame was better) I've been trying to get a design to work properly under Firefox for several days. Unfortunately because of ip issues I can't post any code. The basic problem is that I tell a table that I it to have height: 100% and it won't do it. Sometimes (not always) the table renders in such a way such that it is less than 100%. <table><tr><td><table class="gimme_some_height_already">...blah blah</table> Here's the annoying part. The problem is intermittent and goes away every time when I hit refresh under Firefox. Why should the page render differently just because I hit refresh? Also, when the table doesn't render properly, the links don't work. I have standard, nothing special <a> links inside the table. When the table is misrendered and I click on a link, instead of transferring to that page, the table just gets bigger! It's as if the table were in a very delicate state, and if someone touched or sneezed on it the whole page would move and rerender. Very strange. None of this happens under IE. I know that many people think that when IE and Firefox disagree that I ought to go with what Firefox says, but really hitting the refresh buttons shouldn't make the page look different. Does anyone know what is going on, and perhaps how I could go about fixing it? I've tried many variations, trial and error combinations and dirty tricks. My website doesn't render correctly in the WebKit browsers (Apple Safari and Google Chrome). It works as expected in Firefox, Internet Explorer versions 6 and above, and Opera. If you click here to view the site, it is the text on the left-hand side underneath the navigation menu that is proving problematic. This text is supposed to appear directly beneath the navigation menu, but when the site is viewed in Safari or Google Chrome, it appears at the very bottom of the page, where the blue background is. I have run the code through the W3C validator and after a bit of alteration, it came back saying there's no errors. What makes it confusing is that I didn't write the code myself and it is mainly table-based (I inherited it from a previous web developer). I am currently working on a brand new layout for the website which will solve the accessibility problem completely, but for the time being we have to continue using the current layout. Does anyone know if there's a quick fix which will get the text on the left-hand side to display correctly in WebKit browsers? This has been bugging me for a while now and I'd really like to get it fixed. Is there anything obvious that I've missed? Thanks in advance for any help. Hi, Firstly, I want to apologise, that this is MySpace related. I am creating quite an advanced profile however. TEST PAGE: www.myspace.com/greeksaladhandles If you look at the comments section in Firefox, it's fine. It is scrolling as it should do, with just a Y-scrollbar. However, if you move to IE, the comments section is not acting as though it's confined to a space at all, there are no scroll bars and the section just overlaps what is below it. I have asked a few people who are more experienced, but nobody can quite work out how to solve the problem. If you can, please reply or PM me on here, or alternatively, email me on ryan AT missionbooking.co.uk. Thanks (P.S. - Does anyone know how to remove the white borders around the pictures in the comments section?) 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 |