<div>
It is better to troubleshoot with markup, but don't you apply width to &lt;textarea&gt;, is it a &lt;textarea&gt;?
</div>

<div>
Try this: 
 
I think there is a problem with &quot;display&quot; style in css. 
 
For the above box, you have style &quot;display:inline&quot; and for the below box it's &quot;display:inline-block&quot;. 
As per my understanding, please make them both similar, and then apply the same width for div tags. 
Currently width for first is &quot;14.75em&quot; and for second is &quot;17.75em&quot;. 
 
For more info : <a href="http://www.webdesignfromscratch.com/html-css/css-block-and-inline/" rel="ugc">http://www.webdesignfromscratch.com/html-css/css-block-and-inline/</a> 
 
Hope this helps!
</div>

<div>
I think the difference in size has to do with the automatic scrollbar that IE added and that firefox did not. 
try this <a href="http://snippets.dzone.com/posts/show/217" rel="ugc">http://snippets.dzone.com/posts/show/217</a> which shows you how to force a scroll bar in firefox.
</div>

<div>
refer these links 
 
<a href="http://developer.yahoo.com/yui/reset/" rel="ugc nofollow">http://developer.yahoo.com/yui/reset/</a> 
 
<a href="http://geekswithblogs.net/mnf/archive/2008/02/13/differences-in-internet-explorer-and-firefox-css-and-javascript.aspx" rel="ugc">http://geekswithblogs.net/mnf/archive/2008/02/13/differences-in-internet-explorer-and-firefox-css-and-javascript.aspx</a> 
 
<a href="http://www.webmasterworld.com/forum83/4503.htm" rel="ugc">http://www.webmasterworld.com/forum83/4503.htm</a>
</div>

<div>
@SSupreme, below is some of &nbsp;the markup... but there's too much code really to show everything. I've just shown the leftcol div and the footer div (with some of the options in the ddls removed), and the corresponding css is as per initial post) 
 
@prajapati84, I changed to display inline but it made no difference in fact 
 
@haloexpertsexchange, didn't notice the scrollbar thing... sounded likely at first, but then i added overflow:scroll which puts scroll bars virically and horizontally, and actually it didn't change the width of the box in Firefox, so it made no difference. 
 
@jagssidurala, Tried the reset but it also made no difference, but i have code similar to this in my project anyway. When I change to &lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.0 Transitional//EN&quot; &quot;<a href="http://www.w3.org/TR/html4/loose.dtd" rel="ugc">http://www.w3.org/TR/html4/loose.dtd</a>&quot;&gt;&nbsp;that textbox actually becomes smaller in both IE and Firefox so that now it looks like below. Firefox doesn't change as much... but you can see the width of that box is also slightly reduced from what it was... so that doesn't seem to have solved the problem. Also, I'm assuming that's an old DOCTYPE as the one I currently use is &lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" rel="ugc">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>&quot;&gt;&nbsp;which I assume is a better one to use? I'm wondering also if this calculation difference between IE and Firefox still applies then or if that is an old issue, because it doesn't appear on any other controls where i use padding and margins etc... 
 
In IE 
&nbsp;<a href="https://filedb.experts-exchange.com/incoming/2011/05_w21/459932/DOCTYPE-Chage.JPG" target="_blank" title="DOCTYPE change in IE (31 KB)"><img alt="DOCTYPE change in IE" class="file-block lazyload" style="max-width: 493px;" data-src="https://filedb.experts-exchange.com/incoming/2011/05_w21/459932/DOCTYPE-Chage.JPG" /></a> 
In Firefox 
&nbsp;<a href="https://filedb.experts-exchange.com/incoming/2011/05_w21/459936/DOCTYPE-Chage-in-Firefox.JPG" target="_blank" title="DOCTYPE change in Firefox (32 KB)"><img alt="DOCTYPE change in Firefox" class="file-block lazyload" style="max-width: 493px;" data-src="https://filedb.experts-exchange.com/incoming/2011/05_w21/459936/DOCTYPE-Chage-in-Firefox.JPG" /></a>
<pre><code class="code-100 nolinks" id="code-8169568">///////In IE//////////////////In IE///////////////////////In IE//////////////////////////////In IE

 &lt;div id=&quot;leftcol&quot;&gt;
 &lt;div id=&quot;divManualTasksHeader&quot;&gt;
 &lt;h3 id=&quot;hManualTasksHeader&quot;&gt;Manual Tasks&lt;/h3&gt;
 &lt;p id=&quot;pManualTasksHeader&quot;&gt;Select task options below&lt;/p&gt;
 &lt;/div&gt;
 &lt;div id=&quot;divManualTasksOptions&quot; style=&quot;left: 25.7em; top: 58.75em&quot;&gt;
 &lt;ul id=&quot;ulManualTasksOptions&quot;&gt;
 &lt;li&gt;&lt;select name=&quot;ddlBillingAnalyst&quot; id=&quot;ddlBillingAnalyst&quot; class=&quot;ddlStandard&quot;&gt;

&lt;/select&gt;&lt;/li&gt;
 &lt;li&gt;&lt;select name=&quot;ddlBillingTeam&quot; id=&quot;ddlBillingTeam&quot; class=&quot;ddlStandard&quot;&gt;
	&lt;/select&gt;&lt;/li&gt;
 &lt;li&gt;&lt;input name=&quot;txtCustomerName&quot; type=&quot;text&quot; id=&quot;txtCustomerName&quot; /&gt;&lt;/li&gt;
 &lt;li&gt;&lt;input name=&quot;txtCustomerIC01&quot; type=&quot;text&quot; id=&quot;txtCustomerIC01&quot; /&gt;&lt;/li&gt;
 &lt;li&gt;&lt;input name=&quot;txtCustomerBAN&quot; type=&quot;text&quot; id=&quot;txtCustomerBAN&quot; /&gt;&lt;/li&gt;
 &lt;li&gt;&lt;select name=&quot;ddlBillingStream&quot; id=&quot;ddlBillingStream&quot; class=&quot;ddlStandard&quot;&gt;
	&lt;option value=&quot;Billing Stream&quot;&gt;Billing Stream&lt;/option&gt;

&lt;/select&gt;&lt;/li&gt;
 &lt;li&gt;&lt;select name=&quot;ddlTaskTypeL1&quot; id=&quot;ddlTaskTypeL1&quot; class=&quot;ddlStandard&quot;&gt;
	&lt;option value=&quot;Task Type&quot;&gt;Task Type&lt;/option&gt;

&lt;/select&gt;&lt;/li&gt;
 &lt;li&gt;&lt;select name=&quot;ddlTaskTypeL2&quot; id=&quot;ddlTaskTypeL2&quot; class=&quot;ddlStandard&quot;&gt;
	&lt;option value=&quot;Task Sub-Type&quot;&gt;Task Sub-Type&lt;/option&gt;

&lt;/select&gt;&lt;/li&gt;
 &lt;li&gt;&lt;select name=&quot;ddlTarget&quot; id=&quot;ddlTarget&quot; class=&quot;ddlStandard&quot;&gt;
	&lt;option value=&quot;Target&quot;&gt;Target&lt;/option&gt;

&lt;/select&gt;&lt;/li&gt;
 &lt;li&gt;&lt;select name=&quot;ddlPeriod&quot; id=&quot;ddlPeriod&quot; class=&quot;ddlStandard&quot;&gt;
	&lt;option value=&quot;Period&quot;&gt;Period&lt;/option&gt;

&lt;/select&gt;&lt;/li&gt;
 &lt;li&gt;&lt;select name=&quot;ddlCriticality&quot; id=&quot;ddlCriticality&quot; class=&quot;ddlStandard&quot;&gt;
	&lt;option value=&quot;Criticality&quot;&gt;Criticality&lt;/option&gt;

&lt;/select&gt;&lt;/li&gt;
 &lt;li&gt;&lt;select name=&quot;ddlOnHold&quot; id=&quot;ddlOnHold&quot; class=&quot;ddlStandard&quot;&gt;
	&lt;option value=&quot;On Hold&quot;&gt;On Hold&lt;/option&gt;

&lt;/select&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 
	
 &lt;div id=&quot;footer&quot;&gt;
 &lt;div id=&quot;divTypeDesc&quot;&gt;
 &lt;textarea name=&quot;txtTypeDesc&quot; rows=&quot;2&quot; cols=&quot;20&quot; id=&quot;txtTypeDesc&quot; onclick=&quot;txtTypeDescExpand();&quot; onblur=&quot;txtTypeDescContract();&quot;&gt;&lt;/textarea&gt;
 &lt;/div&gt;
 &lt;/div&gt;



	///////////////In Firefox///////////////////In Firefox/////////////////In Firefox//////////////////////////In Firefox
&lt;div id=&quot;leftcol&quot;&gt;
 &lt;div id=&quot;divManualTasksHeader&quot;&gt;
 &lt;h3 id=&quot;hManualTasksHeader&quot;&gt;Manual Tasks&lt;/h3&gt;
 &lt;p id=&quot;pManualTasksHeader&quot;&gt;Select task options below&lt;/p&gt;
 &lt;/div&gt;
 &lt;div id=&quot;divManualTasksOptions&quot; style=&quot;left: 25.7em; top: 58.75em&quot;&gt;

 &lt;ul id=&quot;ulManualTasksOptions&quot;&gt;
 &lt;li&gt;&lt;select name=&quot;ddlBillingAnalyst&quot; id=&quot;ddlBillingAnalyst&quot; class=&quot;ddlStandard&quot;&gt;

&lt;/select&gt;&lt;/li&gt;
 &lt;li&gt;&lt;select name=&quot;ddlBillingTeam&quot; id=&quot;ddlBillingTeam&quot; class=&quot;ddlStandard&quot;&gt;
&lt;/select&gt;&lt;/li&gt;
 &lt;li&gt;&lt;input name=&quot;txtCustomerName&quot; type=&quot;text&quot; id=&quot;txtCustomerName&quot; /&gt;&lt;/li&gt;
 &lt;li&gt;&lt;input name=&quot;txtCustomerIC01&quot; type=&quot;text&quot; id=&quot;txtCustomerIC01&quot; /&gt;&lt;/li&gt;
 &lt;li&gt;&lt;input name=&quot;txtCustomerBAN&quot; type=&quot;text&quot; id=&quot;txtCustomerBAN&quot; /&gt;&lt;/li&gt;
 &lt;li&gt;&lt;select name=&quot;ddlBillingStream&quot; id=&quot;ddlBillingStream&quot; class=&quot;ddlStandard&quot;&gt;
	&lt;option value=&quot;Billing Stream&quot;&gt;Billing Stream&lt;/option&gt;

&lt;/select&gt;&lt;/li&gt;
 &lt;li&gt;&lt;select name=&quot;ddlTaskTypeL1&quot; id=&quot;ddlTaskTypeL1&quot; class=&quot;ddlStandard&quot;&gt;
	&lt;option value=&quot;Task Type&quot;&gt;Task Type&lt;/option&gt;

&lt;/select&gt;&lt;/li&gt;
 &lt;li&gt;&lt;select name=&quot;ddlTaskTypeL2&quot; id=&quot;ddlTaskTypeL2&quot; class=&quot;ddlStandard&quot;&gt;
	&lt;option value=&quot;Task Sub-Type&quot;&gt;Task Sub-Type&lt;/option&gt;

&lt;/select&gt;&lt;/li&gt;
 &lt;li&gt;&lt;select name=&quot;ddlTarget&quot; id=&quot;ddlTarget&quot; class=&quot;ddlStandard&quot;&gt;

	&lt;option value=&quot;Target&quot;&gt;Target&lt;/option&gt;

&lt;/select&gt;&lt;/li&gt;
 &lt;li&gt;&lt;select name=&quot;ddlPeriod&quot; id=&quot;ddlPeriod&quot; class=&quot;ddlStandard&quot;&gt;
	&lt;option value=&quot;Period&quot;&gt;Period&lt;/option&gt;

&lt;/select&gt;&lt;/li&gt;
 &lt;li&gt;&lt;select name=&quot;ddlCriticality&quot; id=&quot;ddlCriticality&quot; class=&quot;ddlStandard&quot;&gt;
	&lt;option value=&quot;Criticality&quot;&gt;Criticality&lt;/option&gt;

&lt;/select&gt;&lt;/li&gt;
 &lt;li&gt;&lt;select name=&quot;ddlOnHold&quot; id=&quot;ddlOnHold&quot; class=&quot;ddlStandard&quot;&gt;
	&lt;option value=&quot;On Hold&quot;&gt;On Hold&lt;/option&gt;

&lt;/select&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/div&gt;
 &lt;/div&gt;



	&lt;div id=&quot;footer&quot;&gt;
 &lt;div id=&quot;divTypeDesc&quot;&gt;
 &lt;textarea name=&quot;txtTypeDesc&quot; rows=&quot;2&quot; cols=&quot;20&quot; id=&quot;txtTypeDesc&quot; onclick=&quot;txtTypeDescExpand();&quot; onblur=&quot;txtTypeDescContract();&quot;&gt;&lt;/textarea&gt;
 &lt;/div&gt;
 &lt;/div&gt;
</code></pre>
</div>

DOCTYPE-Chage-in-Firefox.JPG

DOCTYPE-Chage.JPG

<div>
I think actually i'm closer to understanding the issue there... in the upper div, the border is on the div. In the lower div, the border is on the textbox. If I put the border on the div, then everything lines up in both browsers. 
 
So, all I can conclude from that I guess, is that there is some difference in space between the div and the textbox in the lower div. Or maybe it's that when you add a border to a textbox, the size of that textbox is now shown differently between IE and Firefox. &nbsp;Maybe indeed then this is a calculation problem between the two browsers, but then again looking at this page <a href="http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug" rel="ugc">http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug</a>&nbsp;seems to suggest that this is an old problem. I assume it does not apply to the XHTML 1.0 doctype which i assume is newer than HTML 4.0
</div>

<div>
This your textbox area: 

<pre><code class="code-1 nolinks" id="code-20-35776588-1">&lt;textarea name=&quot;txtTypeDesc&quot; rows=&quot;2&quot; cols=&quot;20&quot; id=&quot;txtTypeDesc&quot; onclick=&quot;txtTypeDescExpand();&quot; onblur=&quot;txtTypeDescContract();&quot;&gt;&lt;/textarea&gt;
</code></pre>
I suggested to to the following: 
&lt;textarea name=&quot;txtTypeDesc&quot; id=&quot;txtTypeDesc&quot; onclick=&quot;txtTypeDescExpand();&quot; onblur=&quot;txtTypeDescContract();&quot; style=&quot;width:300px;&quot; &gt;&lt;/textarea&gt;
</div>

<div>
And instead of: html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre, table, caption, tbody, tfoot, thead, tr, th, td, ul, li { &nbsp; &nbsp; &nbsp;margin: 0; &nbsp; &nbsp; &nbsp;padding: 0;border: 0;} 
 
try this CSS file &nbsp;<a href="https://filedb.experts-exchange.com/incoming/2011/05_w21/459973/normalise.css" target="_blank" class="file-inline" title="normalise (672 bytes)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M67.508 468.467c-58.005-58.013-58.016-151.92 0-209.943l225.011-225.04c44.643-44.645 117.279-44.645 161.92 0 44.743 44.749 44.753 117.186 0 161.944l-189.465 189.49c-31.41 31.413-82.518 31.412-113.926.001-31.479-31.482-31.49-82.453 0-113.944L311.51 110.491c4.687-4.687 12.286-4.687 16.972 0l16.967 16.971c4.685 4.686 4.685 12.283 0 16.969L184.983 304.917c-12.724 12.724-12.73 33.328 0 46.058 12.696 12.697 33.356 12.699 46.054-.001l189.465-189.489c25.987-25.989 25.994-68.06.001-94.056-25.931-25.934-68.119-25.932-94.049 0l-225.01 225.039c-39.249 39.252-39.258 102.795-.001 142.057 39.285 39.29 102.885 39.287 142.162-.028A739446.174 739446.174 0 0 1 439.497 238.49c4.686-4.687 12.282-4.684 16.969.004l16.967 16.971c4.685 4.686 4.689 12.279.004 16.965a755654.128 755654.128 0 0 0-195.881 195.996c-58.034 58.092-152.004 58.093-210.048.041z"/></svg>normalise.css</a>
</div>

normalise.css

<div>
thanks for the normalise file i'll take a look. 
 
so, regarding the textarea.... it has a style... the style is in the css as 
 
#txtTypeDesc{display:inline; float:left; width:98%; height:4.4em; margin:0em; padding:0em;} 
 
I might have changed something in it though in trying to get all this to work (the width is 98% now so it will expand and contract with the expanding div which now has the border instead). Well, although I don't understand what happened I guess i found that workaround does the trick. But, something weird is definitely going on. Consider the css below, why is it that I have to set the height of the div to 4em... and then inexplicably, in order to make the textbox which is 'INSIDE' the div to fully fill the div, I have to set it to 4.4 em... which is a hight which is GREATER than the div that it is inside? 
 
#divTypeDesc{display:inline; float:left; width: 14.75em; height:4em; margin-left:3em; border: 0.4em groove;} 
#txtTypeDesc{display:inline; float:left; width:98%; height:4.4em; margin:0em; padding:0em;} 
</div>

<div>
&lt;textarea name=&quot;txtTypeDesc&quot; rows=&quot;2&quot; cols=&quot;20&quot; id=&quot;txtTypeDesc&quot; 
Bold &nbsp;part makes width of your textarea. 
 
Remove height:4em; and add overflow:hidden;
</div>

<div>
ok well that sort of did it, although it still doesn't look quite right. I guess you're just letting the size of the textbox determine the size of the div now. But it doesn't quite fit perfectly then, the bottom of the textbox sits right on the div border, while the other three sides are slightly off it... 
 
also, just wondering about this rows=&quot;2&quot; cols=&quot;20&quot; thing. I never specify this in my code, it is just a textbox with a css attached sd attached. So i guess that's converted into a textarea (hadn't noticed that before) but the size should still be determined by the css i would have presumed (although as i said, something funny is gonig on so i obviously don't understand how it works)... 
 

</div>

<div>
don't know why this didn't attach 
 
&lt;div id=&quot;divTypeDesc&quot;&gt; 
&nbsp; &nbsp; &nbsp; &lt;asp:TextBox ID=&quot;txtTypeDesc&quot; runat=&quot;server&quot; TextMode=&quot;MultiLine&quot;&gt;&lt;/asp:TextBox&gt; 
&lt;/div&gt; 
 
#divTypeDesc{display:inline; float:left; width:14.75em; margin-left:3em; border: 0.4em groove; overflow:hidden;} 
#txtTypeDesc{display:inline; float:left; width:95%; height:4em; margin:0em; padding:0.2em;} 

</div>

<div>
Could you please show what you have got (markup or webpage or better link) and what is the problem?
</div>

<div>
what i put in post 35784448, the html and css 
 
I mean I'll probably just close of this question as the issue is sort of resolved, by a work around. 
 
but, the question i had is that I have not mentioned rows=&quot;2&quot; cols=&quot;20&quot; anywhere in my code. The code I have, is as per post 35784448. It's a div, a textbox, and corresponding css to give it style (such as width and height). I don't have rows=&quot;2&quot; cols=&quot;20&quot; anywhere. So, I'm wondering what this is. But, more to the point, I still don't understand why I had to set my textbox larger than my div as per post 35777859 (I know we solved that by setting height of the div to zero... but that still didn't explain the effect i was seeing). 
 
And to be honest, although i found a work around, I still don't understand why there was a difference in width between the two textboxes in FF and IE as per original question. So I sort of haven't really understood anything yet... but thankfully found a workaround anyway...
</div>

<div>
Ok, 
 
As you mentioned the markup(code) in post ID: 35776048 
have a look at lines 53 and 113, you will find Attributes rows and cols (rows=&quot;2&quot; cols=&quot;20&quot;). 
What cols and rows do: 

<blockquote>
cols specifies the visible width of a text-area
</blockquote>
Therefore width of a text-area will be different in different browsers. 

<blockquote>
rows specifies the visible number of rows in a text-area
</blockquote>
Same thing here. 
How to deal with width in different browsers, so it's the same? 
Don't use attributes cols and rows, instead specify width you want to be. 
 
I tested my suggestion with your markup and it works then I posted solution here. You told me that you don't have what you actually have. I read question and answers, everything is correct, if you really want to understand, read everything again and reply which part you didn't get. And we will be available to help you faster.
</div>

<div>
well i read everything but i guess i didn't understand. As I said, I never put rows or cols anywhere in my code (I don't think...). It is in the html source when running on the browser... but not in my code when i'm creating the html in Visual Studio... you get me? So it looks to me that the browser is putting that in... or is interpreting an ASP.NET textbox as a textarea (maybe that always happens, I don't know, i rarely look at the source to be honest) 
 
This is my html code: 
 
&lt;div id=&quot;divTypeDesc&quot;&gt; 
&nbsp; &nbsp; &nbsp; &lt;asp:TextBox ID=&quot;txtTypeDesc&quot; runat=&quot;server&quot; TextMode=&quot;MultiLine&quot;&gt;&lt;/asp:TextBox&gt; 
&lt;/div&gt; 
 
you see... no mention of rows, no mention of cols 
 
And this is the style 
 
#divTypeDesc{display:inline; float:left; width:14.75em; margin-left:3em; border: 0.4em groove; overflow:hidden;} 
#txtTypeDesc{display:inline; float:left; width:95%; height:4em; margin:0em; padding:0.2em;} 
 
again, no mention of rows, no mention of cols. That only appears when i look at the source (the markup?)... i.e. the source when i look at view -&gt; source in IE7. So I'm wondering if we're both getting confused... because you are saying: 
 
&gt;&gt;Don't use attributes cols and rows, instead specify width you want to be. 
 
And I'm saying... I never mentioned rows or cols anywhere in the first place? The browser seemed to interpret my html and css and convert it into that format? Unless I'm missing something...
</div>

<div>
yeah can't upload the webpage really, firstly because it's too big at this stage and secondly because it's for a company... not that anyone would care i think, but i probably shouldn't anyway 
 
ok i'll look at that in the morning. I started using em because it seemed to be recommended. It allows a page to be resizable... in that if you change the text size of the page, all the elements will resize accordingly because em is based on the size of the letter M... so if M becomes smaller the whole page will resize properly. But i'll check into that tomorrow
</div>

<div>
ok will just close this question now
</div>

<div>
Partially complete solution, didn't really understand why boxes didn't align properly but just made structure consistent across the divs which solved the problem
</div>

<div>
<div class="content wysiwyg-content">
Hi, I have the CSS (attched below) which is creating a small issue. As you can see from the pictures, in IE I have it aligned properly... you can see that the bottom of the upper box aligns correctly with the top of the lower box (more or less). But, when I view the same thing in firefox, the lower box is slighly smaller in width. Any idea what could create such a situation? 
 
At the top of my css page I also have 
 
html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre, table, caption, tbody, tfoot, thead, tr, th, td, ul, li { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin: 0; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding: 0;border: 0;} 
 
so as to set all margins and padding to zero. The upper box has a ul with li which has been causing me problems trying to understand how it sets things, so not sure if that's part of the problem. I can't see what the issue is here... 
 
 
&nbsp;<a href="https://filedb.experts-exchange.com/incoming/2011/05_w21/459721/In-IE.JPG" target="_blank" title="In IE (34 KB)"><img alt="In IE" class="file-block lazyload" style="max-width: 466px;" data-src="https://filedb.experts-exchange.com/incoming/2011/05_w21/459721/In-IE.JPG" /></a> 
&nbsp;<a href="https://filedb.experts-exchange.com/incoming/2011/05_w21/459722/in-Firefox.JPG" target="_blank" title="In Firefox (39 KB)"><img alt="In Firefox" class="file-block lazyload" style="max-width: 496px;" data-src="https://filedb.experts-exchange.com/incoming/2011/05_w21/459722/in-Firefox.JPG" /></a>
<pre><code class="code-10 nolinks" id="code-8168846">#leftcol {display:inline; float:left; width:30%; height:435px; overflow:hidden}
#footer {display:inline; clear:both; width:100%; height:70px; overflow:hidden}

/* leftcol */
#divManualTasksHeader {width:100%; height:8em;}
#hManualTasksHeader {padding-left:1em; padding-top:1em}
#pManualTasksHeader {padding-left:5em; padding-top:5.5em; Font-Size:small;}
#divManualTasksOptions {display:inline; float:left; width:14.75em; margin-left:3em; border: 0.4em groove;}
#divManualTasksOptions ul{width:13.75em; list-style: none; padding: 0.5em;}

/* footer */
#divTypeDesc{margin-left:3em;}
#txtTypeDesc{display:inline-block; float:left; width:17.75em; height:4em; margin:0em; padding:0em; border: 0.4em groove;}
#btnShowTasks{margin-left:2em; margin-top:1.25em}
</code></pre>
</div>
</div>

In-IE.JPG

in-Firefox.JPG

Hi, I have the CSS (attched below) which is creating a small issue. As you can see from the pictures, in IE I have it aligned properly... you can see that the bottom of the upper box aligns correctly with the top of the lower box (more or less). But, when I view the same thing in firefox, the lower box is slighly smaller in width. Any idea what could create such a situation?

At the top of my css page I also have 

html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre, table, caption, tbody, tfoot, thead, tr, th, td, ul, li {	margin: 0;	padding: 0;border: 0;}

so as to set all margins and padding to zero. The upper box has a ul with li which has been causing me problems trying to understand how it sets things, so not sure if that's part of the problem. I can't see what the issue is here...


 

 

CSS size difference between IE and firefox.

Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.

HTML (HyperText Markup Language) is the main markup language for creating web pages and other information to be displayed in a web browser, providing both the structure and content for what is sent from a web server through the use of tags. The current implementation of the HTML specification is HTML5.

HTML

The successor to Active Server Pages, ASP.NET websites utilize the .NET framework to produce dynamic, data and content-driven web applications and services. ASP.NET code can be written using any .NET supported language. As of 2009, ASP.NET can also apply the Model-View-Controller (MVC) pattern to web applications