Jump to content

Opera And 100% Width


ckrudelux
 Share

Recommended Posts

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?

Link to comment
Share on other sites

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.

Edited by Deirdre's Dad
Link to comment
Share on other sites

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.

Edited by ckrudelux
Link to comment
Share on other sites

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.

Edited by Deirdre's Dad
Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...