SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE6 Form width issue

    Hi guys,

    im having problem with form width in IE6



    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    Code CSS:
    /* Forms */
     
    .clearing { clear: both; }
    .alert, .error { color: red !important;
    font-size: 11px;
    font-family: arial;
    font-weight: normal !important;}
     
    ol.forms {
    	float: left;
    	list-style: none;
    	width: 100%;
      padding:0 0 0 5px;
    }
     
    ol.forms li {
    	clear: left;
    	float: left;
    	line-height: 1.5em;
    	margin-bottom: 0.5em;
    	width: 100%;
    }
     
    ol.forms label {
    	cursor: pointer;
    	display: block;
    	float: left;
    	line-height: 1.5em;
    	padding-right: 1%;
    	text-align: right;
    	width: 20%;
      padding-top: 5px;
    }
     
    ol.forms input { width: 39%; padding: 2px 2px; border: solid 1px #AACFE4; }
    ol.forms textarea {
    	height: 6em; 
    	width: 64%; 
      padding: 2px 2px;
      border: solid 1px #AACFE4;
    }
     
    ol.forms input, ol.forms textarea, ol.forms button { font: 1em "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif; }
     
    ol.forms .error { 
    	display: block;
    	margin: 0.25em 0 0 21%;
    }
     
    ol.forms li.buttons {
    	padding-left: 11%;
    	width: 89%;
    }
    #submit:hover {
    background: #F79423 !important;
    border: 1px solid #FF79A6;
    }
    #submit {
    background: #81C105;
    color: white;
    font-size: 12px;
    font-family: "Trebuchet MS";
    margin:0 0 0 48px;
    padding: 3px 15px 3px 15px !important;
    border: 1px solid #9BCC4F;
    font-weight: bold;
    }
     
    #contactform {background:#FAFAFA; padding:5px; border-top: 1px solid #F79423; overflow: auto;}

    Thanks

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,297
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    We'd need to see the HTML too, and any styles relating to the form's container. It looks like it's an issue to do with the page and the form's container, rather than the form itself.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the reply ralph..

    heres the link http://bit.ly/nR8I4c

  4. #4
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Im having problem in scroolbar too...


  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,297
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    What happens if you just remove overflow: auto?

    Code:
    #contactform {
      background: none repeat scroll 0 0 #FAFAFA;
      border-top: 1px solid #F79423;
      overflow: auto;
      padding: 5px;
    }
    I can't test on IE6 right now. But I assume that is causing the scroll bars. If you want the gray background to wrap the whole form, try overflow: hidden instead.

  6. #6
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah it works now. thanks.. i removedoverflow: auto;

    the only problem i have is


  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,297
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by jalmz View Post
    Im having problem in scroolbar too...
    There's some kind of JavaScript causing that. Hard to see what exactly. Part of the downside of bringing in external code that you don't write yourself.

  8. #8
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The issue is not the javascript. i remove all the js n the page.. nothings happen

    the scroll problem is also visible n firefox

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,297
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    If I turn off js, the scroll bar goes away. I suspect it's something to do with those iframes, but I can't see what, I'm afraid. Hopefully someone with a better eye will see it.

  10. #10
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I fixed the problem..

    you are right.. the iframe.. the share button. facebook and twitter. n the top is causing the problem..

    i used the firebug to trace that problem

    thank you ralph

  11. #11
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you reduce the width of the main container to 950px, the scroll bar goes away.

    style.css:
    Code:
    /* Main Container */
    #container { margin:0 auto 0 auto; padding:0 0 20px 0; width:950px; text-align:left; }
    I would suggest to use Firebug and trace which blocks/padding adds up.

  12. #12
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    back to the form ralph..

    i have my background background:#FAFAFA;

    Code HTML4Strict:
    #contactform {
      background: none repeat scroll 0 0 #FAFAFA;
      border-top: 1px solid #F79423;
      overflow: auto;
      padding: 5px;
    }
    Code HTML4Strict:
    <div id="contactform" style="width:490px;">
     	<form action="/tourism/napobeachresort.php" method="post" id="sendEmail">
    		<p>* All fields are required. Please provide us with your valid email contact details so that our Customer Service Officers can get back to you as soon as possible.
    </p>
    		<ol class="forms">
    			<li><label for="name">Name</label><input type="text" name="name" id="name" value="" /></li>
    			<li><label for="emailFrom">Email</label><input type="text" name="emailFrom" id="emailFrom" value="" /></li>
     
    			<li><label for="location">Location</label><input type="text" name="location" id="location" value="" /></li>
    			<li><label for="contact">Contact Number</label><input type="text" name="contact" id="contact" value="" /></li>
          <li><label for="message">Message</label><textarea name="message" id="message" rows="2" cols="10"></textarea> </li>
    			<li class="buttons"><button type="submit" id="submit">Send</button><input type="hidden" name="submitted" id="submitted" value="true" /></li>
    		 <li> <input name="subject" id="subject" value="Napo Beach Resort"  type="hidden" /> </li> 
         <li>  <input name="ip" id="ip" value=""  type="hidden" /></li>       
        </ol>
     
    	</form>
      </div>


    but the background will not occupy all the div.. do you have any idea?>


  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,297
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Yes, as I mentioned above, if you add overflow:hidden to #contactform it will wrap around its floated contents:

    Code:
    #contactform {
      background: none repeat scroll 0 0 #FAFAFA;
      border-top: 1px solid #F79423;
      padding: 5px;
      overflow: hidden;
    }

  14. #14
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you ralph.. it works now. by the way what is the difference between overflow hidden and auto;?

    thanks again. this forum is so helpful..

  15. #15
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,297
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Others can explain it better than I. One handy feature of overflow: hidden is that if forces a container to wrap around its floated contents, which otherwise hang out the bottom of it. Overflow: auto does this too, but can cause scroll bars in some circumstances, as you've found.

  16. #16
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ahh ok thanks.. last question ralph..

    what should i use in .content-01 ? auto or hidden?

    Code:
    {
    margin:0; 
    padding:10px 0 0 0;
    height:auto; 
    width:988px;
    overflow:auto;}

  17. #17
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,297
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    I would use overflow: hidden. I almost never use overflow: auto—and never for this purpose, anyway.

  18. #18
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok thanks =)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •