By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,984 Members | 2,832 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,984 IT Pros & Developers. It's quick & easy.

double margin bug in ie without floats!?

P: 8
I have a really strange layout bug in a web page, that only appears in IE. An INPUT element inside a DIV is getting an extra left margin, the same as the parent DIV has been given.

It is as if the old "double margin on floats" was kicking in, but there are no floats in this layout! And it only affects the INPUT, not text or a SELECT within the same DIV...
I would really need some pointers on how to attack this.

Thanks / Mike

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
  2. <html>
  3.   <head>
  4.     <title>inputmargin.html</title>
  5.   </head>
  6.   <body>
  7.     <div style="width: 35em; background-color: blue;">
  8.       <div style="width: 20em; margin-left: 10em; background-color: green;">
  9.         This input gets an extra 10em margin:<br>
  10.         <input type="text">
  11.         <br>
  12.         But this dropdown doesn't:<br>
  13.         <select></select>
  14.       </div>
  15.     </div>
  16.   </body>
  17. </html>
Sep 13 '06 #1
Share this Question
Share on Google+
4 Replies


drhowarddrfine
Expert 5K+
P: 7,435
Yes, this is an IE bug (among a bazillion others). The only fix I am aware of is to enclose the inputs in a <p>. I don't recall much beyond that.
Sep 13 '06 #2

P: 8
Hi - thanks for the input!
So you don't reckon there is a way to fix this in CSS only, without adding additional markup?
(Trying to do layouts with semantically clean markup is a challenge...;-)

Best regards
Mike
Sep 13 '06 #3

drhowarddrfine
Expert 5K+
P: 7,435
Well, IE sometimes forces you to do goofy things. Inputs need to be enclosed anyway so there's nothing wrong with doing that. You'll eventually need the form element so:
<form>
<p>
<input .....>
</p>
</form>

or you could/should look into fieldsets. I don't know if you'll have the same problem though.
Sep 13 '06 #4

P: 8
My complete page actually has both <form> and <fieldset> wrapping the shown markup, but unfortunately they don't improve this particular problem.
Thanks for the help!
Best regards
Mike
Sep 14 '06 #5

Post your reply

Sign in to post your reply or Sign up for a free account.