HTML - Email Menu List Problem
Hey there, I'm new to the forums, and never really asked for help on a site before, but I'm stuck.
Basically, i have a client that needs an automated way to send forms for bookings online. So far, i have created a basic HTML page that the client can import > as text in Outlook and the html gets placed into the Email. This works fine, as the user can fill out the form and reply back to us. The problem happens when i add the following code: Code: <select name="accomodation"> <option value="" selected="selected">Please Select</option> <option value=""> -------------------------- </option> <option value="32">1 Bedroom Studio</option> <option value="41">1 Bedroom Spa</option> <option value="48">1 Bedroom Deluxe Spa</option> <option value="39">2 Bedroom Spa</option> <option value="42">2 Bedroom Deluxe Spa</option> <option value="45">3 Bedroom</option> <option value="46">Houses / Cottage</option> </select> Now this code works when originally inserted into the email, i can make a selection and email it away, and the selection stays and is visible when opened. But once the email is sent, any further changes (a reply back, forward etc.) will break the drop down and just splatter the list in my table. Is there any way to correct this? any other option of code i could use or a setting i can use to stop the break? Help would be greatly appreciated. Thanking you, Evan. Similar TutorialsHi all, [LINK REMOVED] Just in the process of changing this website from a black layout with a background to an all white layout... I'm wishing I had started from scratch now but I stupidly tried to work with the existing site. So anyyways you can ignore the crappy looking bits because my question is just about the menu bar at the top... It's made from an inline list. Is there any way that I could spread it out across the screen, so that the menu item on the right is hard up against the right? The other thing is that the site will be in 3 or 4 languages so the menu items will have more characters in Spanish (for example). It needs to be able to adapt, or I need to implement a different solution for each language. The html looks like this: Code: <!-- main navigation --> <ul id="nav"> <li class="home"> <a href="index.htm"><span>Home</span></a> </li> <li> <div> <ul> <li><a href="message-from-director.htm">Message From Director</a></li> <li><a href="what-is-15-15.htm">What is 15/15?</a></li> <li><a href="festival-history.htm">Festival History</a></li> <li><a href="judges-special-guests.htm">Judges & Special Guests</a></li> </ul> </div><a href="#"><span>About 15/15</span></a> </li> <li> <div> <ul> <li><a href="register-now.php">Register Now</a></li> <li><a href="get-ready.htm">Get Ready</a></li> <li><a href="conditions-of-entry.htm">Conditions of Entry</a></li> <li><a href="faq.htm">FAQ</a></li> </ul> </div><a href="#"><span>How To Enter</span></a> </li> <li> <div> <ul> <li><a href="screening-information.htm">Screening Information</a></li> <li><a href="nominations.htm">2009 Nominations</a></li> </ul> </div><a href="#"><span>Programme</span></a> </li> <li> <div> <ul> <li><a href="films.htm">Films</a></li> <li><a href="festival-trailers.htm">Festival Trailers</a></li> </ul> </div><a href="#"><span>Archives</span></a> </li> <li> <div> <ul> <li><a href="festival-sponsors.htm">2009 Festival Sponsors</a></li> </ul> </div><a href="#"><span>Sponsors</span></a> </li> <li> <div> <ul> <li><a href="press-releases.htm">Press Releases</a></li> <li><a href="images.htm">Images</a></li> </ul> </div><a href="#"><span>Newsroom</span></a> </li> <li class="contact"> <div> <ul> <li><a href="contact-us.php">Contact Us</a></li> <li><a href="15-15-committee.htm">15/15 Committee</a></li> </ul> </div><a href="#"><span>Contact</span></a> </li> </ul> ...and the CSS looks like this: Code: #nav { font-size: 15px; line-height: 20px; list-style: none; padding: 0; position: absolute; top: 250px; left:-5px; width: 750px; } #nav li { display: inline; float: left; margin: 0 0 0 0px; position: relative; } #nav a { color: #000; float: left; text-decoration: none; } #nav a span { cursor: pointer; float: left; display: inline; font-weight: bold; line-height: 30px; padding: 0 5px; } #nav li.hover a, #nav li:hover a { background: url(../img/active-l.gif) no-repeat 0 0; } #nav li.hover a span, #nav li:hover a span { background: url(../img/active-r.gif) no-repeat 100% 0; } #nav .contact div { background: #D3D2D2 url(../img/bg-bg-t2.gif) no-repeat 0 -1px; left: auto; right: 0; } * html #nav .contact div { right: -1px; } #nav div { background: #D3D2D2 url(../img/bg-bg-t.gif) no-repeat 0 -1px; display: none; left: 0; padding: 5px 0 0; position: absolute; top: 30px; width: 168px; z-index: 100; } #nav li.hover div, #nav li:hover div { display: block; } #nav div ul { background: url(../img/bg-b.gif) no-repeat 0 100%; list-style: none; margin: 0; overflow: hidden; padding: 0 0 5px; text-transform: none; width: 168px; } #nav div ul li { margin: 0; padding: 0; width: 168px; } #nav li.hover div ul li a, #nav li:hover div ul li a { background: none; color: #000; display: block; line-height: 30px; padding: 0 0 0 9px; width: 159px; } #nav li.hover div ul li a:hover, #nav li:hover div ul li a:hover { background: #D9581F; } Any ideas? Thanks so much in advance... Neil Is there a basic html code or script i can enter to just make a mailing list form? as simple as a tab for entering your name and a tab for e mail address and then having it sent to an email?.....the site im using hostmonster.com has PHP but im pretty much clueless on setting up a mailing list with it...and ive been reading a good amount but its confusing... al i want is a form with name and e mail entry which is then sent to my main e mail address..any help i would really appreciate it, its driving me crazy!! 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 everyone, I just registered on here because for the past 2 or 3 hours straight I have searched the internet madly for a solution to what I believe to be a simple problem. I'm using Dreamweaver for another site I'm doing and all i want to do is have a list menu with 3 or 4 options. Once one of those options is selected, have the label, text area or whatever down below, to display/change it's text. Whether it be loaded from an xml file, reveal a hidden text area or something. It's an musician's site for the lyrics page. So for example, Choose Album in the list, Choose Song in second list (would be nice if this changed correpsonding to the album chose) and then display lyrics below. I have to be retarded not to find this. I've looked through these forums as well and the only one close to what I am wanting seemed to be http://www.htmlforums.com/html-xhtml...enu-72789.html But the site he links to is not very friendly or helpful. In the past I've done (button onclick imgbox1.src='x') but haven't done text before. I don't know if using a label or what is best for this since I want to use the same font. Would label1.value need to change? Or label1.text... I just don't know. My apologies for the ignorance.. So if anyone in this world can assist in any way you would be MORE than appreciated! Thanks for all who view this.. -cbkyro I need to have a List/Menu Box that causes a specific set of Text fields to appear. Their for Intl. Telephone Dialing Protocols. Code: Country: <select name="Country" class="textfieldRequiredState" id="Country"> <option selected="selected">Select One</option> <option value="U.S.A.">U.S.A.</option> <option value="England">England</option> </select> </p> <p> <input name="USA Area Code" type="text" id="USA Area Code" maxlength="3" width="35" minlength="3" size="1" /> - <input name="USA Prefix" type="text" id="USA Prefix" minlength="3" maxlength="3" width="35" size="1" /> - <input name="USA Line Number" type="text" id="USA Line Number" minlength="4" maxlength="4" width="35" size="1" /> (U.S.A.: 3-3-4 Digits) </p> <p> <input name="England Area Code" type="text" id="England Area Code" maxlength="4" width="35" size="1" /> - <input name="England 1" type="text" id="England 1" maxlength="3" width="35" size="1" /> - <input name="England 2" type="text" id="England 2" maxlength="3" width="35" size="1" /> (England: Up to 4 then 3-3 Digits) </p> <p>If option value is "U.S.A." then display Textfield "USA Area Code", Textfield "USA Prefix", Textfield "USA Line Number" at "x" "y" coordinates. I have been looking everywhere for code for this. What i have is a list menu where the user will select an item, then i want something to appear in the text box below it, depending on what is selected. I have been looking for 'if statements' but i cant get anything to work. e.g. if the list box "test" is selected then the text box should say "test1". if the list box "test2" is selected then the text box should say "test2" Please can someone help me out. Thanks Hi, I have a bit of a problem. I am learning HTML and CSS, and I am trying to make a simple menu withh a background button up state and a horizontal unordered list across, with a hover effect of a new bg image over the initial ones. Please help! Thanks in advance. Hi, I've got a html/css sIFR menu made as a List. The problem is that in various browsers (FF2, Sfr3, IE5-7) the actual (sIFR) text pixels are in FF and IE unclickable and in all of the browsers the area won't show up Pointer cursor when moving the cursor above a sIFR link. For the latter, I've tried "cursor: pointer" on CSS but I couldn't have yet seen the hoped results. Anyone experienced with sIRF links? How could this be solved up? Thank you. Hello...I posted a question about this before but it doesn't seem to have caught anyone's eye so I thought I'd try again: http://www.trekandromeda.com/index/news.html http://www.trekandromeda.com/index/home.css I've got this site cross-browser compatible in Firefox, IE7, and Safari and was about ready to put it up for viewing when I discovered that Opera (which I have to consider because some of my community members use it) is reading the lists slightly bizarrely -- if you look at the page above you'll notice that the date/title things are offset oddly from the blue image in a way that they are not in either Firefox or IE. Does anyone know why this is, and if so, does anyone know how to fix it? I really need to get this working soon, and it's the only problem I have left to solve. Oh man.... I have had a hell of a FIRST time coding for an html email newsletter for a local band. I first had an idea of making the bottom section of this email with images and then using an image map for the links to the Amazon, Itunes, Store and etc... But then once I'm done coding the image maps I send a sample email and links don't work. So I do a little research and supposedly image maps are sketchy and rarely work especially in Gmail <---- which is what I am using. Soooo..... My other approach to this problem was to slice it up and make Photoshop CS4 do the work. Which works great when you view it in a browser, BUT once you send it as a e-mail it adds all sort of spacing around images, and even makes the images larger in size. So somebody have any thoughts on this? THanks! Here is the link to the email up on the server...Working perfectly until i send it as an email: http://gordonavenue.com/emails/tanta..._tuesdays.html Here is an image of what the sliced up part looks like when I send it as an email [IMG][/IMG] Hi im getting reports of a strange problem occuring on a link to an email address when some users click the link below and the defailt email client is opened the email is appearing with capitals and then when sent, does not apppear in the inbox. surely theere is no way to do this besides javacript or the below? HTML Code: <p><a href="mailto:bookings@hjkjjhgkj">bookings@hjkjhkhjkhjk</a></p> </div> </div> does the problem lie with the the eamil cinent? Hi everyone I am new to these forums and I am having trouble with ordered lists on one of the article on my site: http://boostplace.com/automotives/fitting-a-motorcycle-helmet/ If you look at the list it goes from 1 to 9 then resets to zero. Please can someone help me with this? I am using wordpress 3.2.1 as my cms P.S. I didn't want to link the article properly as this is my first post. Sorry about having to copy an paste. Thanks I got a problem with the list I pasted below. I would like to get rid of the space between the last </dd> and the opening of the <ol> tag. Is their any other way I can do this so I don't have the space between the 2 elements? <dl> <dt>CHAPTER 1:Why HTML Rocks!</dt> <dd>Coding isn't for pussies</dd> <dd>What do you need to know</dd> <dd>Common Mistakes</dd> <ol> <li>Eat</li> <li>Sleep</li> <li>Huh?</li> </ol> </dl> Thanks 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 have created a simple HTML email form on my linux server. Seems simple enough, yet every time I test it, Outlook tries to open and my form is never emailed. Does anyone know how to correct this? Here is my code: <CENTER> <FORM METHOD=POST ACTION="mailto:test@yahoo.com" ENCTYPE="text/plain"> Subject:<INPUT TYPE="text" NAME="username"> <BR> <INPUT NAME="email" TYPE="hidden" VALUE="<?php echo $_SESSION['email']; ?>"> <BR> Question <BR> <TEXTAREA NAME="COMMENTS" ROWS="10" WRAP="hard"> </TEXTAREA> <INPUT NAME="redirect" TYPE="hidden" VALUE="gm.php"> <INPUT NAME="NEXT_URL" TYPE="hidden" VALUE="gm.php"> <BR> <INPUT TYPE="submit" VALUE="Send"> </FORM> </CENTER> Also, if anyon knows how to create this form in php, that would work as well. Hi there, i'm in the middle of setting up a shopping cart and have a little problem! I'm laying out the privacy page, and when I select numbered list for the formatting of some Terms and conditions, the numbers that run onto 2 lines are not indenting like the line above it. So the first line is indented with the number and the bottom line is aligned to the left. It looks untidy. It appears fine in dreamweaver but not when I upload to server. I'm sure there is a simple explanation for this, here is the address: http://www.thinking-forward.co.uk/privacy.cfm How come when ever I had a num/bullet list and the lines break, it shows up like this: This is a test this is a test this is a test thiestThis is a test this is a test this is a test this is a test this is a test thiestThis is a test this is a test this is a test t 1. hiestThisis a test this is a test this is a test thiest. The # 1. Should be before the first line Always... This is driving me crazy... I am using sharepoint designer, and it looks fine there, but when I load it in a browser, it shows up like it does above... I am an HTML n00b and don't understand why this simple example is not working as I would like. I want 2 levels of indentation for list items and then I want the next line to be back at the zero margin. However, the last line is coming out indented as far as the previous list item as though the browser is remembering the margin settings for that item. How do I get the last line back to the zero margin? Code: <html> <head> <style> <!-- p.Standard {margin-top:0cm; margin-right:0cm; margin-bottom:0cm; margin-left:0cm; line-height:128%; font-size:11.0pt; font-family:"Calibri","sans-serif";} li.Level1 {margin-top:0cm; margin-right:0cm; margin-bottom:0cm; margin-left:0cm; line-height:128%; font-size:11.0pt; font-family:"Calibri","sans-serif";} li.Level2 {margin-top:0cm; margin-right:0cm; margin-bottom:0cm; margin-left:1cm; line-height:128%; font-size:11.0pt; font-family:"Calibri","sans-serif";} --> </style> </head> <body lang=EN-AU link=blue vlink=blue style='tab-interval:36.0pt'> <li class=Level1>This is a list item</li> <li class=Level2>This is indented</li> <p class=Standard>I want this back with zero margin</p> </body> </html> Hey, I've got this problem involving a list in IE. I've basically made a LI within another LI like so:- Code: <ul class="mainNav"> <li><a href="/index.php?frc=1" class="first">Home</a></li> <li><a href="/GamePortal.php">Games</a></li> <li class="headlink"><a href="/edit_profile.php">My Profile</a> <ul> <li><a href="/edit_profile.php">Game Profile</a></li> <li><a href="/link.php">Community Profile</a></li> </ul> </li> <li><a href="/promotions.php">Promotions</a></li> </ul> This generates a sort of list underneith a list to be used as a dropdown menu. I've assigned it some CSS to do this Code: .mainNav li.headlink ul { list-style: none; display: none; float: none; margin: 0px; position: absolute; top: 35px; z-index: 100; min-width: 72px; text-align: center; padding: 5px; } What happens is that when using FF the content displays perfect (no suprises there) but when I use IE for the same page, it moves the drop down list to the end of the item above on it's x axis (the y is fine). I've tried all sorts of different things; I used relative which worked but then expanded the LI item above it shifting everything along in the line. So it has to be absolute positioned to stop that from happening. I've messed about with every single margin I can think of to no avail. Any Ideas. |