השועל הזה גם נושך...(התאמה לפיירפוקס)

[TheValley]

והנה הגיע היום שIE8 יכחיד אתרים חפיפניקים...
זה יהיה שקר גס להגדיר את עצמי כחפיפניק מאחר ואני משתדל לשמור על כמה שיותר תקנים באתרים שלי.. אבל... אני נתקל פה ושם בבעיות התאמה לפיירפוקס. חיפשתי קצת בפורום ולא ממש מצאתי משהו שיכול לשמש עזר אמיתי...
אם יש אשכול טוב שיכול לעזור אתם מוזמנים לכוון אבל... אם לא, פעם אחת ולתמיד,
ועדיף שזה יהיה באשכול הזה ולא בפרטי כי יש רבים שסובלים מהתופעה הזו -
איך אפשר לדאוג שהאתר יעלה בפיירפוקס ובIE באותה הצורה בדיוק מא' ועד ת', כולל DTD וכולל הכל.
כן, ניסיתי את הVALID XHTML של W3 אבל עושה רושם שהוא מסבך יותר משהוא תורם במשהו... גם קיבלתי רושם שהוא לא קורא את הדף כמו שצריך אחרי שקיבלתי שגיאות בשורות שבכלל לא קיימות בדף...(מה לעזעאזל...)....

אשמח אם תוכלו לכוון בנושא...
תודה

[mlnn]

בזמן בניית הדף לאחר כל שינוי \ הוספה לבדוק בכל הדפדפנים שאתה רוצה שזה יתמוך, שזה נראה אותו דבר, ואם לא, להשתמש בדרך אחרת על מנת לקבל את מה שרוצים.

[daMn]

נתחיל עם זה שצריך שהעניין זה להתאים את האתר לIE בגלל שהמנוע ה"ידידותי" שלו הוא זה גורם לאי תאימות.
וכן, הדרך היחידה להתגבר על זה היא שלב שלב ולא בסוף לנסות להתאים.

[ibmod]

אל תתטעו ואל תתטעו
גם בשימוש בHTML ועם IFRAM וקודים לא תקינים לפי הXHTML עדיין האתר יכול להראות טוב בהרבה דפדפנים
כמו כן לא את כל האתרים שלי כתבתי בקוד תקני , אך הוא נראים אותו הדבר ברוב הדפדפנים
לפי מה שבדקתי מתוך 45 דפדפנים היה דפדפן אחד לא מוכר יחסית שמתקינים על לינוקס והוא לא היה מותאם

בכל מקרה העצה שלי
זה כל שלב לבדוק איך זה נראה בדפדפן

[TheValley]

הנה, רק התחלתי את האתר, וכבר FF משתולל.
שימו לב לקטע הבא, אני אשמח אם מישהו יוכל למצוא מה גורם לIE להציג אותו יפה ולFF לנפץ את העיצוב.


CSS:

input
{
height:16;
background-image:url(inputBack.gif);
font-size:12;
font-family:tahoma;
}
TEXTAREA {
background-image:url(inputBack.gif);
border: 1px solid #e1d9d9;
}
#main
{
width:962px;
height:100%;
border: 1px solid #dbcece;
margin:0px auto;
background-color:#fafafa;
font-family:tahoma;
}
#article_block
{
width:300px;
height:212px;
border: 1px solid #dbcece;
background-color:#f6f6f6;
padding:10px;
margin:10px;
float:left;
font-size:14;
}
#loginstrip
{
width:960px;
height:42px;
padding-left:40px;
padding-right:30px;
padding-top:10px;
padding-bottom:10px;
background-image:url("loginstrip.jpg");
color:white;
font-family:tahoma;
font-size:13;

}

HTML:

<link rel="stylesheet" type="text/css" href="style.css" />
<div id="main">
<img src="Logo.jpg">
<BR>
<div id="loginstrip"><div align="left" style="float:left;">Hello Guest! Welcome to X!</div><div align="right">Login:&nbsp;&nbsp;<input type="text">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Password:&nbsp;&nbsp;<input type="password">&nbsp;&nbsp;<input type="button" value="Login" style="height:17px;"></div></div>

<div id="article_block">TEST</div>
<div id="article_block">TEST</div>
<div id="article_block">TEST</div>

</div>

מה לא בסדר שם?

[Megnum]

תראה את הבעיה חכמולוג..

[TheValley]

נכתב במקור על ידי Megnum

תראה את הבעיה חכמולוג..

ערכתי קצת ניסוי וטעיה ומסתבר שהPADDING בפיירפוקס הופך את העסק - במקום שהטקסט ידחס בתוך הגבולות שPADDING מציב לו, הDIV כולו מתרחב כלפי חוץ על מנת ליצור מצב דומה.
בתמונה שצירפתי הורדתי את הPADDING.

PADDIGN-BOTTOM ייצור מצב של מתיחת הDIV כלפי מטה ולא ישנה כלום חוץ מעיוות. כנ"ל PADDING-RIGHT ו PADDING-LEFT.

**עריכה: שמעתי משהו על QUIRKS MODE ועל BROKEN BOX MODEL, שגורמים לIE להציג את הדף כמו שצריך ולמנוע של FF לעוות(למרות שלמעשה FF צודק). מקווה שזה יעזור במשהו.

[Megnum]

אתה כנראה לא משתמש בו נכון, תנסה margin-top/right/left/bottom