IE6 Form width issue

**jalmz** · Jul 13, 2011 19:17

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

**ralph.m** · Jul 13, 2011 19:21

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.

**jalmz** · Jul 13, 2011 19:28

thanks for the reply ralph..

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

**jalmz** · Jul 13, 2011 19:37

Im having problem in scroolbar too...

**ralph.m** · Jul 13, 2011 19:40

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.

**jalmz** · Jul 13, 2011 19:53

yeah it works now. thanks.. i removedoverflow: auto;

the only problem i have is

**ralph.m** · Jul 13, 2011 19:55

Originally Posted by jalmz

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.

**jalmz** · Jul 13, 2011 20:07

The issue is not the javascript. i remove all the js n the page.. nothings happen

the scroll problem is also visible n firefox

**ralph.m** · Jul 13, 2011 20:38

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.

**jalmz** · Jul 13, 2011 20:46

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

**prasanthmj** · Jul 13, 2011 20:49

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.

**jalmz** · Jul 13, 2011 20:50

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?>

**ralph.m** · Jul 13, 2011 21:11

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;
}

**jalmz** · Jul 13, 2011 21:20

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..

**ralph.m** · Jul 13, 2011 21:26

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.

**jalmz** · Jul 13, 2011 21:38

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;}

**ralph.m** · Jul 13, 2011 21:41

I would use overflow: hidden. I almost never use overflow: auto—and never for this purpose, anyway.

**jalmz** · Jul 13, 2011 21:49

ok thanks =)

User Tag List

Thread: IE6 Form width issue

Thread Tools

Display

IE6 Form width issue

Bookmarks

Bookmarks

Posting Permissions