Divs in IE 1

[GiffordS]

Apologies for posting two questions in one day, this site is driving me insane. I have a simple navigation table that displays perfectly in firefox, but when I pull it up in IE there is an extra 2cm at the bottom between the last row of the table and the div border. I've been tinkering for half an hour and have no idea how to get rid of it. The relevant code is below....

CSS

#logbar
{
margin-top: 6px;
width: 788px;
height: auto;
background-color: #ffffff;
border: 1px;
border-style: double;
border-color: #e1e1e1;
padding: .05cm;
}

and the html

<div id="logbar"><form method="post" action="xxx.php">
 <table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="12.5%" bgcolor="#E1E1E1" height="22px" align="center" valign="center" border="0"><span class="arial9red"><a href="xxx.php">Forgot Password?</a></span></td>
<td width="12.5%" bgcolor="#ab2927" height="22px" align="center" valign="center" border="0"><span class="arial9white">Email Address</span></td>
<td width="12.5%" bgcolor="#ab2927" height="22px" align="center" valign="center" border="0"><span class="arial9white"><!-- <input type="text" name="emadd" size="16" background-color="#e1e1e1"> --></span></td>
<td width="12.5%" bgcolor="#ab2927" height="22px" align="center" valign="center" border="0"><span class="arial9white">Password</span></td>
<td width="12.5%" bgcolor="#ab2927" height="22px" align="center" valign="center" border="0"><span class="arial9white"><!-- <input type="text" name="password" size="16" background-color="#e1e1e1"> --></span></td>
<td width="12.5%" bgcolor="#E1E1E1" height="22px" align="center" valign="center" border="0"><span class="arial9red">submit button</td>
<td width="12.5%" bgcolor="#E1E1E1" height="22px" align="center" valign="center" border="0"><span class="arial9red"><span class="arial9red"><a href="xxx.php">New User Registration</a></span></td>
<td width="12.5%" bgcolor="#E1E1E1" height="22px" align="center" valign="center" border="0"><span class="arial9red"><span class="arial9red">xxx button here</span></td>
</tr></table></form></div>

 

[traingamer]

IE is weird. This works in my tests:

* { margin:0; 
	padding: 0;}

when placed at the beginning of the css.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[GiffordS]

all that accomplished was to eliminate the border entirely for me. I need the margin at the top to provide space from a higher div anyway.

 

[GiffordS]

Resolved! File this under "for what it's worth"....

IE was giving the extra space at the bottom because of the end of the <form> tag. I moved the opening and closing <form> tags to just inside the opening an closing <table> tags and it works perfectly. Makes no sense, but it works.

 

[Vragabond]

Giving your form element [tt]margin-bottom: 0;[/tt] would have accomplished the same and it would actually be a valid code solution. What your solution is is an illegal HTML that might work in IE, but could completely fail to operate the form element in another, more strict browser.

By default elements have certain attributes set to them. Like the form having a margin at the bottom, paragraphs having margins on top and bottom and fieldset having a border. Through CSS you can change any of those visual settings to whatever you want. That is the right way of changing some presentational problems on your site.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[GiffordS]

Tremendous help vrag. Thank you very much. I'll fix that right away. I simply had no idea that forms had margins built into them.