elementalgrace Posted September 13, 2006 Share Posted September 13, 2006 Hi Guys,Desperate to a find a solution to problem that may well be the weirdest problem I have ever come across. I am creating an HTML template to send across to a web developer, which has an index page template and a form template. Both pages look fine but when testing the form I noticed that you can't click on the input boxes in IE to type in your details. It does work in firefox though. If you click on the label in IE, the cursor will appear in the input box and if you use TAB to navigate into the input boxes, it gets there ok. The HTML and CSS are below. I don't have a copy on the web yet so I hope this is enough for someone to give me a clue where I'm going wrong.... <!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>Find My Job</title> <link href="images/styles.css" rel="stylesheet" type="text/css" /> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta content="" name="keywords" /> <meta content="" name="description" /> <meta content="" name="abstract" /></head><!--ALL--><body> <div id="all"> <div id="main"> <!--CONTENT --> <div id="content-area"> <!-- BEGIN:MAIN BOX --> <div id="main-container"> <div class="main-t"> <div class="main-b"> <div class="main-l"> <div class="main-r"> <div class="main-tl"> <div class="main-tr"> <div class="main-bl"> <div class="main-br"> <div class="main-content"> <!-- BEGIN:MAIN BOX --> <div class="clear"> </div> <!--LOGIN --> <div id="login"> <ul> <li> <label for="txtUsername"> Username</label> <input id="Login_txtUsername" maxlength="12" name="Login:txtUsername" title="Your username" type="text" /></li> <li> <label for="txtPwd"> Password</label> <input id="Login_txtPwd" maxlength="8" name="Login:txtPwd" title="Your password" type="password" /></li> <li> <label for="btnLogin"> </label> <a href="#">Login Help</a> <input id="Login_btnLogin" name="Login:btnLogin" title="Login" type="submit" class="submit" value="Login" /> </li> </ul> </div> <!--END:LOGIN --> <!--LEFT NAVIGATION--> <div id="leftnav"> <ul> <li><a href="#" class="on">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Jobseekers</a></li> <li><a href="#">Employers</a></li> <li><a href="#">Search Vacancies</a></li> <li><a href="#">Browse Vacancies</a></li> <li><a href="#">Special Offers</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> <!--PAGE CONTENT --> <div class="container"> <h1> Lorem Ipsum Dolor Amet</h1> <p> Please fill your contact details into the form below:</p> <form> <ul> <li> <label for="txtName"> Name</label> <input id="txtName" name="txtName" title="Your name" type="text" /></li> <li> <label for="txtOrganisation"> Organisation</label> <input id="txtOrganisation" name="txtOrganisation" title="Your company or organisation" type="text" /></li> <li> <label for="txtTelephone"> Telephone</label> <input id="txtTelephone" maxlength="20" name="txtTelephone" title="Your Telephone Number" type="text" /></li> <li> <label for="txtEmail"> Email</label> <input id="txtEmail" maxlength="255" name="txtEmail" title="Your Email Address" type="text" /></li> <li> <label for="txtEnquiry"> Enquiry</label> <textarea id="txtEnquiry" name="txtEnquiry" cols="2" rows="6" title="Your comment or enquiry"></textarea></li> <li> <label for="btnSubmit"> </label> <input id="btnSubmit" name="btnSubmit" title="Send Enquiry" type="submit" class="submit" value="Send" /></li> </ul> </form> </div> </div> <div class="clear"> </div> <!--PAGE-CONTENT --> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <!--END:MAIN BOX --> </div> <!--END: CONTENT --> <div class="credit1"> <a href="index.htm">FindMyJob.co.uk</a> | <a href="mailto:info@findmyjob.co.uk">info@findmyjob.co.uk</a> | Tel: 0121 522 4771 | <a href="contact.aspx">Contact Form</a> </div> <div class="credit2"> <a href="terms.aspx">Terms & Conditions</a> | <a href="privacy.aspx">Privacy Policy</a> | <a href="#">Sponsored Employers</a> </div> <div class="credit1"> Website Design: <a href="http://www.create-solutions.co.uk" target="_blank">Create Solutions (UK) Ltd</a> </div> </div> </div> <!-- END MAIN --></body></html> CSS: body{ margin: 2px; background-color: #ffffff;}/* ALL / HEADINGS/ PARAGRAPHS / LINKS */#all{ padding-right: 30px; width: 96%; max-width: 96%; background-color: #ffffff; text-align: left;}h1{ margin-left: 5%; padding-top: 25px; font: bold 97% Arial, Helvetica, sans-serif; color: #F5821F;}h2{ margin-left: 5%; padding-top: 5px; padding-bottom: 5px; font: bold 95% Arial, Helvetica, sans-serif; color: #2B2D90;}p{ font: 75% verdana,sans-serif; line-height: 140%; text-align: left;}a{ color: #F5821F; text-decoration:none; font: normal 12px verdana, sans-serif;}a:hover{ text-decoration:underline;}a.on{ color:#2E3092;}ul{ padding-left: 12px; margin-left: 10px;}li{ font: 11px verdana,sans-serif; margin-left: 0px; color: #a2a2a2; text-decoration: none;}/* MAIN BOX */#content-area{ padding-right: 0px; padding-left: 0px; float: right; padding-bottom: 0px; margin: 0px; width: 95%; padding-top: 0px;}.right{ border-right: #000 0px solid; border-top: #000 0px solid; float: right; margin: 0px 0px 0px 22px; border-left: #000 0px solid; border-bottom: #000 0px solid;}#main-container{ padding-right: 0px; padding-left: 2px; padding-bottom: 2px; margin: 2px 0px 2px 2px; padding-top: 2px;}.main-tl{ background: url(../images/main-pod-tl.gif) no-repeat 0px 0px; position: relative;}.main-tr{ background: url(../images/main-pod-tr.gif) no-repeat 100% 0px; position: relative;}.main-bl{ background: url(../images/main-pod-bl.gif) no-repeat 0px 100%; position: relative;}.main-br{ padding-right: 0em; padding-left: 0em; background: url(../images/main-pod-br2.gif) no-repeat 100% 100%; padding-bottom: 0px; padding-top: 0px; position: relative;}.main-t{ background: url(../images/main-pod-top2.gif) repeat-x 0px 0px; position: relative;}.main-b{ background: url(../images/main-pod-bottom2.gif) repeat-x 0px 100%; position: relative;}.main-l{ background: url(../images/main-pod-l2.gif) repeat-y 0px 0px; position: relative;}.main-r{ background: url(../images/main-pod-r2.gif) repeat-y 100% 0px; position: relative;}/*LOGIN*/#login{ margin-right:25px;}#login ul{ width: 90%; color: #2B2D90; height: auto; text-align: right; text-decoration: none; padding-top: 10px; list-style-type: none;}#login li{ font: bold 12px verdana, Helvetica, sans-serif; color: #2B2D90; text-decoration: none; padding-top:3px; }#login label{ vertical-align: middle; width: 50px; color: #2B2D90; margin-right: 0px; font: normal 12px verdana, Sans-Serif; text-align: left; text-decoration: none;}#login input, .login textarea, .login Select{ font-size: 100%; border: 1px solid #F5821F; color:#a2a2a2; width: 100px; min-width: 140px; font-family: verdana, arial, helvetica, sans-serif;}/* NAVIGATION*/#main{ clear: both; vertical-align: top;}#leftnav{ float:left; padding-right: 15px; padding-left: 25px; background: none; padding-bottom: 2px; text-transform: capitalize; width: 180px; padding-top: 90px;}#leftnav ul{ padding-right: 0px; padding-left: 30px; padding-bottom: 0px; margin: 12px 0px 0px; padding-top: 0px;}#leftnav li{ display: block; padding-bottom:7px; margin-bottom: 8px; list-style-type:none;}#leftnav li a{ font: bold 14px Arial, Helvetica, sans-serif; color: #2B2D90; text-decoration: none;}#leftnav a:hover{text-decoration:underline;}#leftnav a.on{ color:#F5821F;}/* CONTENT*/.container{ float:left; width: 63%; margin-right:35px; margin-bottom:45px; padding-bottom:5px; height:auto;}.container p{ line-height: 150%; margin-left: 5%; color: #a2a2a2;}.right{ border-right: #000 0px solid; border-top: #000 0px solid; float: right; margin: 0px 10px 0px 22px; border-left: #000 0px solid; border-bottom: #000 0px solid;}/* Footer */.credit1{ clear: both; margin-top: 10px; margin-left:138px; margin-right:40px; font: 12px verdana; width: 75%; max-width:75%; color: #a2a2a2; text-align: center; text-decoration: none;}.credit2{ clear: both; margin-top: 10px; margin-left:138px; margin-right:40px; width: 75%; max-width:75%; color: #a2a2a2; text-align: center; text-decoration: none;}#olPages{ font-size: 100%; font-family: verdana,arial, helvetica,sans-serif;}/*MISC*/.clear{ clear: both;}.red{ padding-right: 0px; padding-left: 22px; font-size: 10px; padding-bottom: 18px; color: red; padding-top: 22px; font-family: verdana,Sans-Serif;}/*TABLES*/.table{ font: 80% verdana, sans-serif; color: #035050;}.table a{ color: #a9a9a9; text-decoration: none;}.table a:hover{ text-decoration: underline;}.table tr{ margin: auto; text-align: justify;}.table td{ text-align: left; padding-bottom: 5px; padding-right: 5px;}/* Form styles */.container ul{ width: 95%; color: #000000; height: auto; text-align: left; text-decoration: none; list-style-type: none;}.container li{ list-style: none; font: 89% verdana, sans-serif,; padding-top: 5px; padding-bottom: 5px;}.container label{ font: 89% verdana, sans-serif; color: #a2a2a2; width: 12em; float: left; text-align: left; margin-right: 0.5em; display: block;}.container input{ color: #a2a2a2; font-size: 89%; width: 59%; border: 1px solid #F5821F;}.container textarea{ width:59%; font: 89% verdana, sans-serif; color: #a2a2a2; border: 1px solid #F5821F;}.container checkbox{ border: 1px, #F5821F;}input.submit{ color: #F5821F; width: 70px; border: 1px solid #F5821F; background: #ffffff; margin-left: 0px;}.checkbox{ text-align: left;}select{ border: 1px solid #035050; width: 31%; color: #035050; background: #ffffff; margin-left: 0px; font: 89% verdana, sans-serif;}.LinkButton{ font-size: 25%; vertical-align: top; width: 69px; color: #121267; margin-right: 5px; font-family: verdana, Sans-Serif; text-align: center; text-decoration: underline;}.LinkButton:Hover{ font-size: 89%; vertical-align: top; width: 69px; color: #67b3b3; margin-right: 5px; font-family: verdana, Sans-Serif; text-align: center; text-decoration: underline;}.statstable{ font: 100% verdana,sans-serif; text-align: left; text-decoration: none; color: black; font-family: verdana; text-decoration: none;} Link to comment Share on other sites More sharing options...
aspnetguy Posted September 13, 2006 Share Posted September 13, 2006 the first thing I have noticed is that your label for= doesn't match the id of the input boxes. The inoput boxes have Login_ on them while the label for does not.Not sure if this is having any effect on your problem. Link to comment Share on other sites More sharing options...
elementalgrace Posted September 13, 2006 Author Share Posted September 13, 2006 For the login div - I just noticed and changed that so they matched but it's having no effect on the main form. I still can't get it to type into the main text box.I just tried removing the stylesheet and it seems to let me do it then so I guess it's a css prob rather than an html one but if anyone's got any advice I'd still be ahppy to hear it! Link to comment Share on other sites More sharing options...
aspnetguy Posted September 13, 2006 Share Posted September 13, 2006 there is no min-width attribute in IE, remove this from #login input and see if makes a difference.Just to be sure this is happening with ALL input boxes ONLY in IE, right? Link to comment Share on other sites More sharing options...
elementalgrace Posted September 13, 2006 Author Share Posted September 13, 2006 Thanks for the help aspnetguy. The problem was with the contact form, the login boxes were behaving fine.For some reason the left float in the container div was locking the input boxes in the contact form in IE only so that you couldn't click on them to enter text. I've taken it out and it seems to work fine now across all the browsers but I honestly have no clue how a float element could affect it. Doesn't seem to make a lot of sense to me! Anyone have a clue? Would love to be enlightened about this because it's never happened to me before! Link to comment Share on other sites More sharing options...
aspnetguy Posted September 13, 2006 Share Posted September 13, 2006 I haven't looked very closely at your code but when you float an element it could possible overlap another element partially so you cannot click on it. Not sure if that was the case but it is a possiblity. Link to comment Share on other sites More sharing options...
reportingsjr Posted September 13, 2006 Share Posted September 13, 2006 Thats really messed! But its not suprising coming from ie, just stay away from it lol. Link to comment Share on other sites More sharing options...
aspnetguy Posted September 13, 2006 Share Posted September 13, 2006 Thats really messed! But its not suprising coming from ie, just stay away from it lol.Look this little kick you are on is getting annoying. You cannot abandon IE when you are desinging something because 83% of all user still use it. That would be shooting yourself in the foot. Either learn to deal with it or stick to designing desktop applications. Link to comment Share on other sites More sharing options...
elementalgrace Posted September 13, 2006 Author Share Posted September 13, 2006 Look this little kick you are on is getting annoying. You cannot abandon IE when you are desinging something because 83% of all user still use it. That would be shooting yourself in the foot. Either learn to deal with it or stick to designing desktop applications.Unfortunately I don't have the luxury of ignoring IE. Hopefully IE 7 will make cross browser compatibility a bit easier.I hadn't considered that the floated elements night overlap. As it turned out, I didn't actually need the float after all so I guess it worked out for the best. I will perhaps have a play about with it later and see if that was the case. Thanks again for your help - I was more or less at the end of my tether with it. Link to comment Share on other sites More sharing options...
aspnetguy Posted September 13, 2006 Share Posted September 13, 2006 working with CSS and IE can do that to you Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now