css coding problem

[DonaldFaulknor]

/* Profile */
.updateStatus {
  background: url("http://inyoursocialnetwork.netne.net/members/Whiteboard.jpg") no-repeat center top #008d35;
  border: 0 none;
  color:#008d35;
  cursor:text;
  font-family:Kaushan Script;
  font-size:110%;
  width: 230px;
  padding-left:16px;
  padding-top:12px;
  height: 157px;
}

/* Homepage */
.updateStatus1 {
  background: url("http://inyoursocialnetwork.netne.net/members/Whiteboard.jpg") no-repeat center top #008d35;
  border: 0 none;
  color:#008d35;
  cursor:text;
  font-family:Kaushan Script;
  font-size:110%;
  width: 246px;
  padding-left:16px;
  padding-top:12px;
  height: 169px;
}

<!-- Profile -->
<div style=\"float:right; padding:24px; margin-top:96px\">
    <form action=\"update-status.php?id=$_SESSION[user_id]\" method=\"POST\">
        <input type=\"hidden\" name=\"users_id\" value=\"$_SESSION[user_id]\" />
        <textarea class=\"updateStatus\" name=\"statuses\"></textarea><br />
        <center><span title=\"Update Your Status\"><input class=\"dryErasePen\" type=\"submit\" value=\"\" /></span></center>
    </form>
    </div>

<div style=\"float:right; padding:24px; margin-top:96px\">
    <form action=\"update-status.php?id=$_SESSION[user_id]\" method=\"POST\">
        <input type=\"hidden\" name=\"users_id\" value=\"$_SESSION[user_id]\" />
        <textarea class=\"updateStatus1\" name=\"statuses\"></textarea><br />
        <center><span title=\"Update Your Status\"><input class=\"dryErasePen\" type=\"submit\" value=\"\" /></span></center>
    </form>
    </div>

 

I had both html codes set to the same css, and it worked fine for a week.  And without changing anything, all of a sudden, the Box model applied to one page but not the other page.  The first css, padding adds to the overall width, the second css, it doesn't.  Why did it change by itself.  I never even touched the code.

[DonaldFaulknor]

oh, I should mention, the codes (that are currently different - look at the width and the height) are doing the same thing (like I want).  But why do they have to be different to do the same thing?

[Andy-H]

They don't if you add updateStatus as both textarea classes, they should look the same, are you looking at them in different browsers? Some browsers add a margin to the body tag, some add padding, this is probably being inherited, try adding:

 

 

* {
   margin: 0;
   padding: 0;
}

[DonaldFaulknor]

Thanks for verifying my confusion.

 

Yes, I DO have a padding and margin reset and NO, they are being viewed in the same browser.

 

It's not a padding/margin variation between browsers or whatever, the difference from one code to the other is EXACTLY what the padding is set at.  Therefore, I have concluded that for one code, padding adds to the overall width and for the other code, it doesn't.  I have to wonder if it's do to an inheritance, sometimes inheritant properties can be hard to find.

[DonaldFaulknor]

I meant to say they're NOT viewed in different browsers.

[Andy-H]

I don't know then :/ Sorry

[DonaldFaulknor]

it's cool, I mean, if the different css' are working (for whatever reason), I can just keep them this way.  It's just irritating not to know why they require to be different.  Like I said, I think it's an inheritance problem.  One page is inheriting different properties than another page.

[Andy-H]

Sounds like it

[spiderwell]

have you go the correct doctype at the top of the page, this can make huge differences between browsers