Gah. Form Styles in IE.

[elementalgrace]

Hi there guys n gals.I have a problem that's been driving me a bit nuts today, that I can't see an obvious answer for. If anyone can possibly suggest an answer to deal with it, I'd really appreciate it. I'm designing a template for an ecommerce site before passing it over to the developer. Everything's working perfectly apart from one minor thing that's bugging the living daylights out of me. (I haven't validated it yet, but fingers crossed that should be fine). I don't really want to use multiple stylesheets if possible and it all has to be v accessible too.I'm creating the product detail page, and want it to display so that you have the product title, then the price underneath, an add to basket button and the product detail underneath that. It all seems to line up fine, except in IE (I've checked in v6 and 7) where it's putting in an indent automatically next to the Add to Basket button for no apparent reason. It displays perfectly in firefox, opera and netscape. Any suggestions would be more than welcome. HTML and CSS for relevant bits below.HTML

<div class="container"><div id="breadcrumb"><a href="#">Home</a> > <a href="#">Catalogue</a> > <a href="#">Subcategory</a> > Product</div><h1>Lorem Ipsum Dolor Sit</h1><div id="productdesc"><p><b>Price:</b> £ 9.99</p><p><input type="submit" value="add to basket" /></p><p><b>Product Description:</b><br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut et quam. Aenean sem libero, fringilla quis, pellentesque vel, viverra eget, dui. Quisque lobortis. Pellentesque a felis. <a href="#">Praesent consectetuer augue sit amet mauris</a>. Maecenas adipiscing, dui sit amet auctor dapibus, lectus massa sollicitudin dui, nec pellentesque lectus turpis cursus diam. Donec tincidunt rhoncus odio. Nam sodales ipsum eu erat. Donec facilisis, orci in malesuada commodo, est nisl rhoncus nisl, ac commodo diam mauris quis quam. Mauris iaculis, dui quis condimentum vulputate, odio nunc aliquam purus, non ullamcorper nunc diam at leo. Nulla non leo. Nulla in velit. Nam ultricies sapien nec turpis.</p><p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut et quam. Aenean sem libero, fringilla quis, pellentesque vel, viverra eget, dui. Quisque lobortis. Pellentesque a felis. Praesent consectetuer augue sit amet mauris. </p>  </div><div id="productpic"><img src="images/3.jpg" height="150" width="150" alt="" /><img alt="" height="150" src="images/3.jpg" width="150" /><img alt="" height="150" src="images/3.jpg" width="150" /></div><div class="clear">  </div></div>

CSS

.container{	margin: 27px;	background: none;	padding-bottom: 10px;     }/*BREADCRUMB TRAIL*/#breadcrumb{	padding-top: 10px;	text-align: right;	margin-right: 20px;	font: 75% arial,sans-serif;	color: #474747;	text-decoration: none;}#breadcrumb a{	font: 100% arial,sans-serif;	text-decoration: none;	color: #cc6346;}#breadcrumb a:hover{	color: #5291C2;	text-decoration: none;}#breadcrumb a.on{	color: #a9a9a9;}/*PRODUCT PAGE*/#productpic {	float: left;	width:150px;	border: 1px solid #ffffff;}#productpic img{	margin-top:5px;}#productdesc{	float: left;	width: 370px;	text-align:left;	border: 1px solid #ffffff;}#productdesc p input{	color: #cc6346;	border: 1px solid #474747;	background-color:#ffffff;	font: normal 100% arial, sans serif;}

[shiftJIS]

With just the bits that you've shown, I'm not seeing the indention problem. So without any more info, I can't be much help. I might have some clues that could help you with your problem. Apologies if you've tried these already.IE treats padding as included into the width. So if you specify a width or height and a border, the box you see is whatever dimensions you specified. In most other browsers, padding is added to whatever width or height you specify. This could lead to different layouts on different browsers if you haven't fixed for it.The other thing is that I usually begin all css files with:

*{  margin: 0px;  padding: 0px;}

There's a set default style that browsers use to display elements. Thus, even without specifying styles, you'll see space between <p>'s and headers will have appropriate format. Form elements have default styles also, and all of these defaults differ between browsers. It's usually a good idea to clear the slate if you're being specific about a certain layout.Hope this helps.

[elementalgrace]

With just the bits that you've shown, I'm not seeing the indention problem. So without any more info, I can't be much help. I might have some clues that could help you with your problem. Apologies if you've tried these already.IE treats padding as included into the width. So if you specify a width or height and a border, the box you see is whatever dimensions you specified. In most other browsers, padding is added to whatever width or height you specify. This could lead to different layouts on different browsers if you haven't fixed for it.The other thing is that I usually begin all css files with:

*{  margin: 0px;  padding: 0px;}

There's a set default style that browsers use to display elements. Thus, even without specifying styles, you'll see space between <p>'s and headers will have appropriate format. Form elements have default styles also, and all of these defaults differ between browsers. It's usually a good idea to clear the slate if you're being specific about a certain layout.Hope this helps.

Thanks for the tips, but I have already set the margin and padding to zero. It's just this one button that's indenting. I have to assume it's got something to do with the way IE adds in extra pixels here and there as it's happening in IE 6 and 7, but not in any other browsers. It's not a huge deal and the developer would probably accept it as it is but I'm a nitpicky sort and it annoys me as I like things to line up properly and work the same in all browsers. I can post all the code if it would help at all?