[RESOLVED] IE fixed height problem!

[birre]

Hi,

i'm trying to make a custom web control, that renders html text.
Everything is working great, except that one table is giving me a hard time.
I'm trying to give the tr a fixed height, but somehow, the height won't go below 20px:mad:

<table name="ctl00$ContentPlaceHolder1$PeriodPicker1"="ctl00$ContentPlaceHolder1$PeriodPicker1" cellspacing="0px" cellpadding="0px">

<tr cellspacing="0px" cellpadding="0px">
<td>
<input type="text" style="text-align: right; width: 16px; HEIGHT: 15px;;" value="04" id="__ctl00_ContentPlaceHolder1_PeriodPicker1_Input" name="__ctl00_ContentPlaceHolder1_PeriodPicker1_Input" class=""style="font:; '' " TabIndex="0" MaxLength="2" onkeypress="javascript:checkNumericPressPeriodctl00_ContentPlaceHolder1_PeriodPicker1(this);" onkeyup="javascript:checkLengthctl00_ContentPlaceHolder1_PeriodPicker1(this);" onblur="javascript:checkPeriodctl00_ContentPlaceHolder1_PeriodPicker1();" onfocus="javascript:setFocusctl00_ContentPlaceHolder1_PeriodPicker1('1',this);" >
</td>

<td>
<input type="text" style="text-align: right; width: 32px; HEIGHT:15px;;" value="2007" id="__ctl00_ContentPlaceHolder1_PeriodPicker1_InputYear" name="__ctl00_ContentPlaceHolder1_PeriodPicker1_InputYear" class=""style="font:; '' " TabIndex="0" MaxLength="4" onkeypress="javascript:checkNumericPressctl00_ContentPlaceHolder1_PeriodPicker1(this);" onkeyup="javascript:YearUpctl00_ContentPlaceHolder1_PeriodPicker1(this);" onblur="javascript:checkYearctl00_ContentPlaceHolder1_PeriodPicker1();" onfocus="javascript:setFocusctl00_ContentPlaceHolder1_PeriodPicker1('2',this);" >
</td>

<td>
<table height="100%">
<tr>
<td style="padding-left:5px; height:5px;"><img class="" border=0 style="vertical-align:bottom;" TabIndex="0" title="Increment value" src="./Images/pijl_up.gif" onclick="javascript:upctl00_ContentPlaceHolder1_PeriodPicker1();">
</td></tr><tr>
<td style="padding-left:5px; height:5px;"><img class="" border=0 style="vertical-align:top;" TabIndex="0" title="Decrement value" src="./Images/pijl_down.gif" onclick="javascript:downctl00_ContentPlaceHolder1_PeriodPicker1();">
</td>
</tr>
</table>
</td>
</tr></table>

The bolded table is the problem. In firefox, the table shows great, but in IE, the height of the td's is +- 20px :mad:


I believe this is a common problem in IE, can someone plz help me with this?

info : .aspx files

[WebJoel]

Curious, this "20-pixels"... that is just the thickness of a scrollbar.

Anyway, there might be default padding, margins on TABLE.

Try adding this STYLE:

<style>
* {padding:0; margin:0;}
</style>

For this to work, this line must be the first style rule. It removes padding and margins from everything (you may need to now go through and re-state any stated margin or paddings, as this removed the 'default' which will affect whatever you have later added).

If this fails, -just a stab in the dark here as I don't work with TABLEs much these days, -is to try adding to the TABLE


table
{
border-collapse: separate
}

I think this value "seperate" removes the border, -maybe that isn't what you wanted to do... in which case you'd want border-collapse: collapse which I think reduces to just 1-px (??)

[birre]

unfortunately, this isn't working :(

[birre]

Resolved!

IE takes 4px standard margin.
You can disable this by putting the style float:left on the image

Strange, but working :rolleyes:

tnx:D