Opera And 100% Width

[ckrudelux]

Well everything started with that my input fields didn't go all the way then I had 100% width on them.. So I thought I would test it out on a different browser looks the same for FF, Chrome and IE but in Opera other stuff don't get 100% width and some got.. anyone knows what the difference is on this css tag on the browser?

[jeffman]

You should know by now that a problem like this can't be understood if you don't show us some code. As always, a link is best. If that's not possible, we'll need the CSS for the interior element and its container, and a look at the HTML for the same elements.Remember that defining an element's width as 100% and adding border, margin, or padding will make its total width MORE than 100%. Since a text input has border by default, defining its width as 100% will immediately cause trouble.

[ckrudelux]

You should know by now that a problem like this can't be understood if you don't show us some code. As always, a link is best. If that's not possible, we'll need the CSS for the interior element and its container, and a look at the HTML for the same elements.Remember that defining an element's width as 100% and adding border, margin, or padding will make its total width MORE than 100%. Since a text input has border by default, defining its width as 100% will immediately cause trouble.

sorry for not adding some code.. well I mange to fix the extra fault in opera but I still don't get my input's/textarea to full width.

<div style="width: 520px;">	 <div class="moduleweight" style="float: left; width: 100%;">		<form method="post" action="modules/paragraph/addpost.php">			<div style="float: left;">				<input style="float: left; width: 100%;" type="text" name="headline" />				<textarea style="float: left; width: 100%; height: 200px;" name="text"></textarea>				<input type="hidden" name="object" value="<?php echo $modules;?>" />				<input type="submit" name="submit" value="POST" />			</div>		</form>	 </div></div>

I'm still building state so the css is in the tags right know.

[jeffman]

You've made a false assumption.The form controls do expand to 100% the width of their container.The problem is, the container is the div inside your <form> tags, and it does not expand to 100% the width of the "moduleweight" container. You disabled that property when you gave the interior div a float:left property.Try giving that interior div width:100%. Or just remove the float property. I don't see (yet) why you need it anyway.FWIW, you can usually sort out these problems by giving different containers a temporary background-color property. That is how I discovered which of your elements was not expanding correctly.

[ckrudelux]

You've made a false assumption.The form controls do expand to 100% the width of their container.The problem is, the container is the div inside your <form> tags, and it does not expand to 100% the width of the "moduleweight" container. You disabled that property when you gave the interior div a float:left property.Try giving that interior div width:100%. Or just remove the float property. I don't see (yet) why you need it anyway.FWIW, you can usually sort out these problems by giving different containers a temporary background-color property. That is how I discovered which of your elements was not expanding correctly.

Yey it's working now then I took away the div in the form.. and moduleweight is for a javascript so it don't have any graphic function.

[jeffman]

That will work fine, but it will keep your form from validating. Some designers don't care about that. Up to you.

[ckrudelux]

That will work fine, but it will keep your form from validating. Some designers don't care about that. Up to you.

Well I try to make it validated but I don't really know about the form tag Always fail on that one.. not sure why.