IE bug?

IE bug? (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets and Accessibility

Message

BeTheBall -> IE bug? (5/2/2006 16:46:35)

Seems like I read somewhere that this is a bug, but can't find it. I am trying to enclose a form inside a div. However, I am getting extra space at the bottom of the div, like a line break or something. Here is the code for the relevant part:

<div style="width:500px;margin:0 auto;border:2px solid #000000;background-color:lightblue;padding:5px;">
  <form name="form1" method="get" action="results.htm" onsubmit="return getData();">
    <label for="t1">Form:</label>
    <select name="returnType" id="returnType">
	<option selected>Select One</option>
	<option>A</option>
	<option>B</option>
	<option>C</option>
	<option>D</option>
	<option>E</option>
	<option>F</option>
	<option>G</option>
	</select>
    </p>
    <p>
        <label for="inputCode">2-digit Input Code (To return all codes for the chosen form(s), leave blank):</label>
      <input type="text" name="inputCode" id="inputCode" size="2" maxlength="2">
      <input type="hidden" name="theRow" id="theRow">
      <input type="hidden" name="subRow" id="subRow">
      <br>      
      <br>
    <input type="submit" name="Submit" value="Submit" id="Submit">    
  </form>
</div>

Kitka -> RE: IE bug? (5/2/2006 17:17:39)
That is easily fixed by adding a style to the Form code: <form name="form1" method="get" action="results.htm" onsubmit="return getData();" style="display:inline;">

BeTheBall -> RE: IE bug? (5/2/2006 18:34:28)
Thanks, that does seem to fix it. Curiously, however, the spacing remains in FF with or without adding the display attribute.

Kitka -> RE: IE bug? (5/2/2006 19:17:26)

quote:

Curiously, however, the spacing remains in FF with or without adding the display attribute.

Urgh, you only mentioned a problem with IE so I didn't look at it in FF.

Try changing the code for the last para to this:

<p style="margin-bottom:0;padding-bottom:0;">
        <label for="inputCode">2-digit Input Code (To return all codes for the chosen form(s), leave blank):</label>
      <input type="text" name="inputCode" id="inputCode" size="2" maxlength="2">
      <input type="hidden" name="theRow" id="theRow">
      <input type="hidden" name="subRow" id="subRow">
      <br>      
      <br>
<input type="submit" name="Submit" value="Submit" id="Submit"></p>

BeTheBall -> RE: IE bug? (5/2/2006 20:17:25)
quote: Urgh, you only mentioned a problem with IE so I didn't look at it in FF. In reality, the page will never be viewed in FF, but since I was at home I decided to check it out of curiosity. Your fix worked. Thanks. I guess I still don't understand what causes that spacing to be there. The top, left and right are all as they should be.

Kitka -> RE: IE bug? (5/2/2006 20:34:11)
quote: I guess I still don't understand what causes that spacing to be there. A paragraph is a block level element, which is assigned a bottom margin by default. For some reason, IE ignores the margin in some circumstances. Whereas Firefox and Opera don't, which is the correct thing to do. Some people, when they are building their external CSS, will start by zeroing margins and padding on all block level elements, and then add them back in places where it is needed. That can save some hassles, but I prefer to zero them only where necessary.

BeTheBall -> RE: IE bug? (5/2/2006 21:18:44)
Makes sense. Thanks Kitka.

Page: [1]

0.0625