גובה ורוחב של תיבה

[IgalSt]

קודם כל, אין שום סיבה שבעולם שתעבוד עם טבלאות עבור תוכן שהוא לא טבלאי. וטופס זה בהחלט דוגמה מעולה לתוכן שאיננו טבלאי. זה מאוד מאוד לא מומלץ ונחשב ל-bad practice בקרב ה-FEDs.

כמו כן, מקיראת השאלה והקוד, לדעתי אתה מתבלבל במהות של position:absolute ומה תפקידו. שים לב שהוא ממקם את האלמנט עצמו ביחס לאלמנט הרלטיבי או האבסולוטי הקרוב ביותר אחד האבות שלו בעץ ה-DOM.

ולסיום, כדי לפתור את העיה שלך, ייתכן ותרצה להוסיף את פקודת ה-CSS הבאה:
box-sizing: border-box
מה שהפקודה הזאת עושה, היא בעצם מיישרת קו באופן בו הדפדפן מתייחס להגדרות הרוחב והגובה (כידוע IE מחשב זאת שונה משאר הדפדפנים, בעקבות מה שמכונה box module bug).



כמו כן, ייתכן ותרצה גם להשתמש בתכונת ה- appearance: none של css על מנת לבטל את העיצוב הדיפולטי שהדפדפן נותן לאלמנט.


שים לב ששתי התכונות הללו שייכות לטיוטת css3 ולכן יש להשתמש בהן יחד עם ה-vendor prefix.