IE6 Form width issue

HTML & CSS
1

Hi guys,

im having problem with form width in IE6


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


/* 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

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

thanks for the reply ralph…

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

4

Im having problem in scroolbar too…

5

What happens if you just remove overflow: auto?

#contactform {
  background: none repeat scroll 0 0 #FAFAFA;
  border-top: 1px solid #F79423;
 [COLOR="Red"] overflow: auto;[/COLOR]
  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

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

the only problem i have is

7

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

8

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

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

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

If you reduce the width of the main container to 950px, the scroll bar goes away.

style.css:


/* 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

back to the form ralph…

i have my background background:#FAFAFA;

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


<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

Yes, as I mentioned above, if you add overflow:hidden to #contactform it will wrap around its floated contents:

#contactform {
  background: none repeat scroll 0 0 #FAFAFA;
  border-top: 1px solid #F79423;
  padding: 5px;
  [COLOR="Red"]overflow: hidden;[/COLOR]
}
14

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

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

16

ahh ok thanks… last question ralph…

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

{
margin:0; 
padding:10px 0 0 0;
height:auto; 
width:988px;
[COLOR="Red"]overflow:auto;[/COLOR]}
17

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

18

ok thanks =)