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

בשביל זה הוקם אירגון ה- w3c, אירגון ניטרלי חסר אינטרסים כמו יצרניות הדפדפנים (חלק מהם לפחות) ופיתח תקנים שבהם אתרים צריכים לעמוד, ודפדפנים צריכים "להבין".

כיום המצב הוא, למרבה צערנו-בוני האתרים, שרוב האתרים לא תקינים, חלק בגלל זה שמלמדים באוניברסיטאות HTML לא תקין, וחלק בגלל המונפול (ההולך ומתפרק) של Internet Explorer
למה זה כן בכל זאת חשוב? יש הרבה אתרים לא תקינים והם עובדים בסדר גמור.
אז זהו, שלא.
ניסיתם לשלוח אימייל בוואלה דרך פיירפוקס? פעם אחרונה שבדקתי לא עובד. ניסיתם לגלוש באתרי בנקים עם פיירפוקס? לא עובד.
חשוב להבין שלתמוך בתקנים זה לא קשה, ולא ביג דיל, זה רק עושה חיים קלים בכל מה שקשור לתמיכה בדפדפנים שונים. מה שמביא אותי להסבר הבא:
מה זה אתר נגיש?
אתר נגיש, הוא אתר שייראה טוב בדפדפנים שונים.
צריך להבין, שאמנם בשוק של מחשבים שולחניים וניידים, Internet Explorer שולט. אבל מה עם דפדפנים בפלאפון? זה כבר סיפור אחר, במיוחד בגלל שבפלאפון יש מגוון רחב מאוד של דפדפנים.

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

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

עכשיו, כשכולנו מבינים את החשיבות של בניית אתר תקין ונגיש, נגיע לעיקר האשכול:

איך עושים את זה?
נכנסים לאתר של W3C שם יש מדריכים לתקנים שלהם (מומלץ XHTML). כאן.
בנוסף, אתר שמצאתי לא מזמן שאני מתכוון לבדוק אותו הוא זה, אתר שמוקדש לתחום של תיאום האתר לדפדפנים מיוחדים לאנשים בעלי מוגבליות, כמו דפדפנים מקריאים.

אבל זה עדיין לא מספיק, לכל דפדפן יש את השטויות שלו (אהמ.. אהמ... Internet Explorer) ולפעמים לכתוב לפי התקן לא מספיק, צריך ניסיון, לדעת כל מיני טריקים.

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

בשביל לשמור על סדר באשכול זה, אני מבקש לכתוב בכותרת באיזה בקשר הפתרון (CSS, HTML או אפילו JS, בכל זאת גם פה לכל דפדפן יש התנהגות שונה בפיענוח הקוד)

מנהלים, תרגישו חופשיים לתקן \ להוסיף תוכן לאשכול.

לכל דפדפן יש את הערכי ברירת מחדל שלו לכל אלמנט, לאפס אותם יכול לחסוך הרבה כאב ראש.
עושים את זה כך:

קוד:

* {margin: 0; padding: 0;}

ובכלל, קוד שמאפס את הכל:

קוד:

html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,  pre,form,fieldset,input,textarea,p,blockquote,th,t  d {	
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img {
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul,li {
	list-style:none;
	list-style-type:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6,th,td {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym {
	border:0;
}

(הקוד נלקח מהאתר Devign)

אתה יכול להסביר לי בבקשה איך לעזאזל לא חשבתי על לשים בתחילת הקוד - list-style-type:none; במיוחד בתור אחד שמתמש בהרבה רשימות? =\ (סתם מוציא מרמור =] )

בכל מקרה גם אני אוסיף יותר מאוחר כמה דברים שלי =]

[התמונה הבאה מגיעה מקישור שלא מתחיל ב https ולכן לא הוטמעה בדף כדי לשמור על https תקין: http://www.idansmith.com/images/button.png]
- לא בגלל שאתם צריכים, בגלל שאתם רוצים!

ציטוט:

במקור נכתב על ידי tnadav1 (הקוד נלקח מהאתר Devign)

מומלץ להוסיף קישור...כמו:
הקוד נלקח מהאתר Devign.

ניתן ליצור ערכים ב-CSS שיהיו נכונים ל- Internet Explorer ע"י הוספת כוכבית - * לפני הערך, ככה:

קוד:

.foo {
	*width: 10px;
}

אם אני טועה תתקנו אותי.
דרך אגב יש כתיבה יחודית לאופרה?

כוכבית עדיף כי קו תחתון זה לא תקין.

נכון ששיטת ה- "_display:block" לא תקנית אבל לפעמים אין מה לעשות ואקספלורר 6 מתפרע כמו משוגע לעומת אחיו הגדול יותר (אקספלורר 7) וצריך להשתיק אותו..

ובמילים אחרות הקו התחתון בתחילת מאפיין CSS משמש אך ורק לאקספלורר 6, ולא נוגע בגרסאות אקספלורר אחרות או דפדפנים אחרים, זה מאוד שימושי לפעמים. א-ב-ל, לא הייתי ממליץ להשתמש ב"האק" הזה לאנשים מתחילים כי יש המון באגים באקספלורר 6 שאפשר לפתור גם בלי זה רק צריך נסיון זה הכל. =]

[התמונה הבאה מגיעה מקישור שלא מתחיל ב https ולכן לא הוטמעה בדף כדי לשמור על https תקין: http://www.idansmith.com/images/button.png]
- לא בגלל שאתם צריכים, בגלל שאתם רוצים!

לא מעט יוצא לנו להיתקל ברווח מיותר שנמצא מתחת לתמונה. אנו שואפים להעלים את הרווח הזה שמשתלט על הזמן היקר שלנו.

ב-CSS העניין פשוט:

קובעים לכל תגי ה-img את הקוד הבא:

קוד:

img
{
 display: block;
}

אך גם הפיתרון הבא הוא אפשרי (פיתרון שאני אישית השתמשתי בו):

קוד:

img
{
	vertical-align:bottom;
}

הסיבה לרווח המיותר הוא שהתג image נחשב כ-inline, ולכן הדפדפנים שומרים עוד קצת רווח בשביל אותיות ארוכות כמו ך' (כ' סופית) ו-ן (נ' סופית). הפתרונות הנ"ל מונעות את הרווח השגוי שניתן לתמונות.

מקור: http://www.quirksmode.org/css/quirksmode.html (תחת הכותרת "Complication: almost strict mode")

מאפיין - "vertical-align" של CSS פעיל אך ורק על תאי טבלאות. כמובן שאשמח אם תוכיח לי אחרת אבל תיקח בחשבון שהשיטה צריכה לעבוד בכל הדפדפנים ולא רק בפיירפוקס או רק באקספלורר 6 או 7.

לגבי הורדת "פיקסלים מיותרים" בכללי לא רק לתגי תמונות, אני אוהב להשתמש להוסיף את מאפייני הCSS הבאים:

קוד:

font-size:0;line-height:0;

[התמונה הבאה מגיעה מקישור שלא מתחיל ב https ולכן לא הוטמעה בדף כדי לשמור על https תקין: http://www.idansmith.com/images/button.png]
- לא בגלל שאתם צריכים, בגלל שאתם רוצים!

הפעלת מצבי דפדפן (=התנהגות) בהתאם ל-Doctype. (למטה תראו את ה-Doctype השונים)

ה-Modes השונים הם:
Quirks Mode, Standards Mode ו-Almost Standards Mode.

רשימה מלאה, מפורטת ונוחה לקריאה של אפשרויות ב-DOM בהתאם לדפדפנים הנפוצים ביותר:

W3C DOM Compatibility Tables

לחצו בצד שמאל על כל נושא בנפרד כדי להגיע לפירוט מלא עליו. לנוחותכם, אפרט כאן את הנושאים עם הקישורים:

• Core
• HTML
• CSS
• Events
• Event Handling
• CSS Object Model View
• Range

בנוסף, במפת האתר שלו תוכלו למצוא דברים שימושיים רבים.

BlackWidows מספקים טבלת השוואות של מאפייני תגים בהתאם ל-Doctype:
http://www.blackwidows.co.uk/resour...-comparison.php

כך תוכלו לדעת אילו מאפייני תגים נתמכים ע"י ה-DTD שהצהרתם במסמך, ולפעול בהתאם.

מה זה DTD?
סליחה על הבורות

באמצעות DTD אתה מגדיר את התנהגות הדפדפן.

דוגמא של הצהרת DTD:

קוד:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

שים לב שאפילו אם קוד מסמך ה-HTML שלך אינו ע"פ תקן ה-DTD שהצהרת, עדיין הדפדפן יתנהג לפי ההצהרה שהגדרת.

קרא כאן למידע נוסף: http://www.quirksmode.org/css/quirksmode.html

IE (בגירסה 6, עד כמה שבדקתי לבינתיים) יוצר ערך margin כפול ממה שאנו מגדירים עבור אלמנטים בעלי ערך float מסויים (left או right).

בעיה זו מתרחשת רק ב-IE (איזו הפתעה) ולא בדפדפנים אחרים כמו FF2 ו-Opera.
לתיקונה, פשוט יש להוסיף display:inline לאלמנט הצף.

הוספת display:inline לאלמנט בעל float אינה נוגדת את ספציפיקציית W3C, כך שלא צפויים בעיות בעתיד בעקבות פתרון זה.

להסבר מפורט וארוך: http://www.positioniseverything.net...loatIndent.html

כיודע לי IE6 (וכל השאר מתחת) מתעלמים מהפקודה !important ולכן ניתן להגדיר ערכים שונים בנפרד ל IE6 ונפרד ל IE7/FF/SAFARI ככה:

קוד:

div.someclass{
margin-left: 40px !imporant; //IE7, Firefox, Safari will use this value
margin-left: 20px; //This one is for IE6 and earlier
}

עוד על !important
!important היא פקודה אשר נועדה לומר לדפדפן שהערך הנקבע הוא חשוב ביותר אפילו יותר חשוב מ inline-css או כל הגדרה אחרת שבא אחרי ההגדרה הנוכחית.

(תקנו אותי אם אני טועה)

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

קוד:

* {margin: 0; padding: 0;}
html {direction: rtl;}
img {border: 0;}
.clear {clear:both; font-size: 0; line-height: 0;}
ol,ul,li {list-style:none; list-style-type:none;}
table {border:0; border-collapse:collapse; border-spacing:0;}
body {background: #ffffff url('../images/background_image.jpg') repeat; font-size: 12px; font-family: arial; color: #000000; margin: 0 auto; text-align: center;}

שורה ראשונה - מאפסת את המרחקים שנקבעו כברירת מחדל ע"י הדפדפנים שונים (כל דפדפן קובע לו מרחק שונה), ע"י האיפוס הזה אני מקבל שליטה הרבה יותר טובה על אלמנטים שנים + תאימות בין דפדפנים נהפכת לקלה יותר.

שורה שניה - קובעת את כיוון התצוגה של הדפדפן. אם זה אתר בעברית אני אכתוב RTL, אם זה אתר באנגלית אז אכתוב - LTR.

שורה שלישית - מאפסת את כל תגי התמונות, שלא תהיה להם מסגרת. למה? כי זה ממש מעצבן כאשר שמים תמונת לוגו לאתר ועוטפים אותה בקישור, אוטומטית אותה תמונה מקבלת מסגרת.. אז למה לא לפסול את זה מההתחלה?

שורה רביעית - קשורה לבאג של פיירפוקס שנוצת באותו אזור שבאג של אקספלורר 6 נוצר, נכון מעצבן? על רגל אחת זה הולך ככה - כשנותנים לאיזה תג html את המאפיין float: right (אגב אין דבר כזה float:center, פשוט לא קיים!) ומוסיפים לו את המאפיין margin-right: 40px; אז ישר באקספלורר 6 קופץ הבאג שמשכפל את המרחק מצד ימין מ40 ל80 פיקסלים למה זה קורה לא באמת מעניין אפ אחד והפתרון של זה פשוט. לכל מאפיין float ישר אחריו מוסיפים את המאפיין display: inline והכל מסתדר. עכשיו לבעיה שיש בפיירפוקס. כמאפיינים איזה תג html עם float: right; display: inline; הוא ישר מרחף מחוץ לתא העוטף אותו. בשביל לסדר את זה אני ממקם את התג </ br> עם הקלאס .clear ש"שמנקה" את התא העוטף בתחתית התא העוטף, והכל מסתדר. מי שלא הבין את זה פשוט שיכתוב פה ואני אביא פיסת קוד להדגמה...

שורה חמישית - מורידה את העיגולים/ריבועים שיש לכל רשימה. למה אני עושה את זה? כי משתמש בהרבה רשימות בשביל תפריטים, ועוד דברים. ככה שבמקום לכתוב את זה לכל רשימה ורשימה בעמוד שלי אני כותב את זה פעם אחת למעלה. נכון, זה לא טוב תמיד למשל כשיש עורך wysiwyg אז במקרים כאלו אני פועל אחרת.

שורה שישית - עושה את אותו דבר כמו - "border=0 cellpadding=0 cellspacing=0" רק כמאפיין CSS בלי לזבל את הHTML ולהשאיר אותו רק למבנה האתר.

שורה שביעית - בשורה הזאת אני מגדיר שהטקסט הכללי של האתר יהיה בגודל 12 בצבע שחור והגופן יהיה אריאל. זה מאוד נוח אם 90 אחוז מהאתר הוא באותו גודל-צבע-סוג גופן. במקום לכתוב 20 פעם ל20 תגים שונים את אותו גודל-צבע-סוג גופן, פשוט להגדיר פעם אחת בבודי. כמו כן שכל האתר יהיה באמצע העמוד, וגם אוסיף תמונת רקע לעמוד אם תהיה אחת.

[התמונה הבאה מגיעה מקישור שלא מתחיל ב https ולכן לא הוטמעה בדף כדי לשמור על https תקין: http://www.idansmith.com/images/button.png]
- לא בגלל שאתם צריכים, בגלל שאתם רוצים!

בשביל להכיל הגדרות מסוימות רק לדפדפנים מסוימים (עובד רק ב- Internet Explorer) הדרך הכי מומלצת לעשות את זה היא: Conditional comments
http://www.quirksmode.org/css/condcom.html

הכנתי עיצוב לאתר חדש שנמצא תקין ב-
Firefox 3, IE6, IE7, Opera ו-Safari

מבנה ה- CSS
אחד הדברים שעשיתי רק הפעם ולא פעמים קודמות, השתמשתי ב- Conditional comments.
היו לי שני קבצים:
style.css
styleIE6.css

והוספתי אותם לדף ככה:

קוד:

<link href="themes/dganit/style.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 7.]>
<link href="themes/dganit/styleIE6.css" rel="stylesheet" type="text/css" />
<![endif]-->

בקובץ של IE6 היה בעיקר תיקונים בשביל תמונות PNG שקופות, אבל אחר-כך, בגלל שזה היה כל-כך נוח, השתמשתי בזה בשביל עוד דברים.
בצורה הזאת, לא השתמשתי בהאקים של CSS בכלל!, אולי זה נראה לא נוח ככה, אבל במציאות, זה מאוד נוח!

Z-Index בפיירפוקס
כן, לפעמים גם השועל עושה בעיות, הבעיה היא שפיירפוקס מתעלם מה- z-index כל-עוד לאלמנט לא הגדירו position. הפתרון הוא להוסיף:

קוד:

position: relative

וזה פועל.
באיטרנט מצאתי שזה נכון לפיירפוקס 2, אבל בפיירפוקס 3 שלי היה בידיוק אותו סיפור...

Internet Explorer וה- HasLayout המוזר שלו
הרבה מאוד באגים ב- Internet Explorer נגרמים בגלל הערך HasLayout שקיים רק ב- IE.
לא ברור לי למה צריך אותו..
זה בעצם ערך לקריאה בלבד של IE שאומר אם יש Layout לאלמנט או שאין Layout.. לא מצאתי באינטרנט הסבר מה זה אומר..

בכל מקרה, הבאג הספציפי שהיתה לי איתו בעיה היא עם אלמנט שיש לו Layout:
כאשר נותנים לאלמנט שיש לו ‏‏layout, ‏‏‏margin בעל ערך שלילי, האלמנט ייחתך במקום לזוז. הפתרון הוא או לגרום לאלמנט שלא יהיה לו Layout (למחוק את מה שגרם לאלמנ להיות בעל Layout) או להוסף

קוד:

position: relative

זה לא היה מעשי בשבילי לגרום לאלמנט שלא יהיה לו Layout, אז בחרתי בפתרון השני.
הסבר על הבאג:
http://www.zoffix.com/zoffix/css/ie/negmargin.shtml
ועל ה- HasLayout (זה טוב להבין קצת מה הולך בדפדפן עם כל-כך הרבה באגים)
http://www.zoffix.com/zoffix/css/ie/haslayout.shtml

היה עוד באג, דווקא עם IE7, שהוא התעלם מערכי margin ששמתי לו, ביטול min-height פתר לו את הבעיה. לפי מה שהבנתי מהקריאה, גם זה קרה כתוצאה מה- HasLayout

תוספת טובה:
http://www.satzansatz.de/cssd/onhavinglayout.html

בקצרה אכתוב שאפשר להשתמש ב:

קוד:

zoom:1; /* CSS code */

כדי לתת layout לתג.

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

במקור ניסיתי לעשות רשימה מסוג bulleted (תבליט), כאשר הדבר החשוב ביותר היא שהרשימה תהיה אופקית. ---> כאן בעיקר הקושי.

לדפדפנים כמו FF3, Opera9, Safari3 לא היו בעיות מיוחדות.
בשבילם קוד ה-CSS היה פשוט:

קוד:

ul.horizontal_list li 
{
	background-image:url(square_bullet.gif);	/* Makes the bulleted list effect.
                            The "display" declaration removes the automatic bullets that are created by the browser.  */
	background-repeat:no-repeat;
	display:inline-block;
}

ul.horizontal_list li.first
{
	list-style-type:none;
	background-image:none;
}

דפדפנים אלו קיבלו בשימחה את הגדרת ה-display:inline-block שהגדרתי.

הבעיות היו בעיקר עם IE6, IE7 ו-FF2.
לא משנה איזה display מוכר ניסיתי, פשוט לא הצליח. שימוש ב-float אפשרי במקרה זה, אבל לא מומלץ.

בסוף נאלצתי בעל כורחי לפנות להאק המוכר של IE, ולהוסיף את ההצהרה הבאה לקוד ה-CSS:

קוד:

*display:inline;

זה סידר לנו את הבעיה לגבי IE6/7.

אבל נשאר לנו FF2 האחרון שעושה מעט בעיות.

לאחר חיפוש בגוגל הגעתי לעמוד הבא:
http://www.ruzee.com/blog/2007/05/a...ntally-with-css
שנתן הסבר מפורט על שיטות שונות איך לבצע זאת. אבל עדיין לא הייתי מרוצה בגלל ההאקים שהציג שם...

בסוף החלטתי לקחת רעיון עיקרי משם, והוספתי את קוד ה-CSS הבא:

קוד:

display:-moz-inline-box;
-moz-box-orient:vertical;

קוד זה התווסף מעל לכל הצהרות ה-display שכבר קיימות, ופתר את הבעיה אצל FF2.

הקוד הסופי של ה-CSS, שמאפשר רשימת תבליט אופקית:

קוד:

ul.horizontal_list li 
{
	background-image:url(square_bullet.gif);	/* Makes the bulleted list effect */
	background-repeat:no-repeat;
	display:-moz-inline-box; -moz-box-orient:vertical; /* For FF2 */
	display:inline-block; /* For Opera, Safari, FF3 */
	*display:inline; /* For IE6/7 */
}

ul.horizontal_list li.first
{
	list-style-type:none;
	background-image:none;
}

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

אני מניח שבעיה זו תהיה קיימת רק בתקן XHTML Strict 1.0. אולי היא תהיה גם בתקנים דומים.
(עריכה: הבעיה תיפתר כנראה רק אם ה-li יכיל תג a בלבד)

נניח ויש לנו את הקוד המקור של הרשימה האופקית הבא:

קוד:

<ul class="horizontal_list">
	<li class="first">First</li>
	<li>Second</li>
	<li>Third</li>
	<li>Fourth</li> <li>Fifth</li><li>Sixth</li>
	<li>Seventh</li>
</ul>

אם תשימו לב, בין כל תגי ה-li יש "רווח לבן"*, מלבד בין ה-Fifth וה-Sixth.
בהתאם לכך, יהיה רווח פשוט (רווח של spacebar) בתגי ה-li של First עד Fourth כולל, וגם ב-Sixth.

כדי לפתור את זה, צריך להגדיר גודל כתב של 0 בתוך תג ה-ul, אך כמובן אסור לשכוח להגדיר גודל (הגדול מ-0 כמבן) בתוך תג ה-li, בשביל שיהיה אפשר לראות את הכתוב בתוך תגי ה-li

לכן, הקוד הסופי של הרשימה האופקית צריך להיות:

קוד:

ul.horizontal_list
{
	font-size:0;	/* Removes the gap in the <li> elements */
}

ul.horizontal_list li 
{
	background-image:url(../images/square_bullet.gif);	/* Makes the bulleted list effect */
	background-repeat:no-repeat;
	display:-moz-inline-box; -moz-box-orient:vertical; /* For FF2 */
	display:inline-block; /* For Opera, Safari, FF3 */
	*display:inline; /* For IE6/7 */
	font-size:13px; /* Redefining the font-size, otherwise the text would be invisible */
}

ul.horizontal_list li.first
{
	list-style-type:none;
	background-image:none;
}

אבל!!! אין לנו לשכוח מאיפה כולנו התחלנו לגלוש בעידן האינטרנט המודרני - IE...
ואכן עם IE6/7 יש בעיה: כאשר יש רקע של צבע מאחורי ה-ul, זה מתחרבש ; וגם מופיע רווח מיותר בין תגי li כאשר יש טקסט רגיל, אפילו שבקוד מקור אין white-space מכל סוג שהוא.

אם יש לכם רעיון אחר טוב יותר למחיקת הרווח הלבן, בבקשה כיתבו

* "רווח לבן" = white-space כלשהו בקוד מקור, כמו ירידת שורה או רווח פשוט או הזחה (Tab).

לאחרונה גיליתי ש-PNG הוא הרבה יותר מבעייתי ב- IE6.
השתמשתי בתמונה PNG חצי שקופה בשביל רקע שקוף. הבעיה היתה שלינקים מעל לרקע של ה-PNG פשוט לא עבדו, לא היה אפילו סימן של יד. יותר מזה, כפתורים עם אירועים לא עבדו, כל מה שהיה שם לא הגיב ללחיצות.

מבירור ברשת התמונה מתנגשת עם הלינקים, ובעצם "מכסה" אותם.
שורת CSS זאת מתקנת את הבעיות:

קוד:

a {position:relative; text-align: right; zoom: 1;}

מסתבר שאותו סיפור קורה גם לאלמנטים מסוג input

קוד:

input {position:relative;}

טיפל אצלי בבעיה

גם אלמנטים מסוג textarea יכולים לא לעבוד..

קוד:

textarea {position:relative;}

פותר את הבעיה

חשבתם ש- IE7 תומך בצורה טובה התמונות PNG שקופות? טעיתם.
אם גם אתם ניסיתם ליצור רקע חצי שקוף בעזרת תמונת PNG בגודל 2 על 2 (1 על 1 גורם לבעיות ב- Safari.. אני חושב, זה מה שקראתי).
תראו שהאתר נטען לאט מאוד ב- IE7, הסיבה? לא ברור.
שינוי גודל התמונה ל- 15 על 15 מתקנת את הבעיה, לא לגמרי, אבל בצורה מספקת (שינוי גודל של חלון לא יהיה הכי חלק בעולם).

מתוך רשימה גדולה של באגים ב- IE7:
http://www.enhanceie.com/ie/bugs.asp
http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/

מדוע זה לא נכון להשתמש בטבלאות בשביל עיצוב האתר?

הסבר בעברית: http://themissingsource.com/presentations/stupidTables
הסבר באנגלית (מקורי): http://www.hotdesign.com/seybold

בקצרה אכתוב ששימוש ב-CSS הוא נכון ועדיף יותר מאשר העמסה בקוד HTML רב וטבלאות.
טבלה נועד אך ורק להצגת מידע טבלאי.
אני מניח שיש מקרים מסוימים (ומעטים) שבהם משתמשים בטבלאות בשביל עיצוב, וזה רק במקרה שאין דרך אחרת עדיפה.

עד עכשיו ידעתי רק לעבוד עם טבלאות לצורך עיצוב האתר וכך בניתי את המבנה שלו. ברור לי שזו לא דרך נכונה.

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

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

אתה פשוט צריך להכיר טוב את האפשרויות שמוצעות לך בשפת CSS על מנת שתמצא את העיצוב הטוב ביותר לאתר.

ראה את האתר הבא: http://www.csszengarden.com
בצד ימין תוכל לבחור עיצוב שונה. הכל נעשה בעזרת קובץ CSS חיצוני. (יש לך עיצובים נוספים ע"י לחיצה על next designs). אני ממליץ שתסתכל על הקוד מקור, ותראה איך ביצעו הפרדה טוטאלית בין התוכן לעיצוב. XHTML כמובן מיועד להגדרת התוכן וסימונו, כאשר CSS מעצב את המסמך באמצעות האלמנטים (תגי ה-HTML) הקיימים בו.

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

באוטו סיגנון, יש אתר ישראלי חדש כמו CSSGARDEN,
זה CSSGALLERY.CO.IL

ואפשר להוסיף את אתרים בCSS.

המשתמש moozes מצא חלופה תקינה למאפיין min-height ב-CSS.
כידוע המאפיין min-height נתמך רק בדפדפנים "מודרנים", כלומר הוא לא נתמך ב-IE6, וכיוון שהדפדפן הזה עדיין נפוץ יחסית, יש למצוא גם לו פיתרון.

החלופה התקינה ל-min-height ב-CSS היא:

קוד:

<style type="text/css">
.minH {
min-height:500px;
height:auto !important;
height:500px;
}
  </style>

<div class="minH">your content here</div>

והקוד גם עומד בתקנים של W3C.

בדקתי את הקוד בדפדפנים הבאים:

IE6, IE7, Opera 9.51, FF 2.0.0.15, FF 3.0.6, Safari 3.1.2

ונמצא שהוא עובד טוב בכולם.

ניתן לראות את המסמך שאיתו בדקתי את תקינות הקוד: https://2009-uploaded.fresh.co.il/2...0/64048039.html

הקוד והפיתרון נלקח מהאשכול: http://www.fresh.co.il/vBulletin/sh...ad.php?t=457400, תודה ל- moozes שסיפק את הפיתרון.

האקים נפוצים של CSS:
http://www.javascriptkit.com/dhtmlt...csshacks2.shtml

תקינות כללים בדפדפנים:
http://centricle.com/ref/css/filters/

תקינות אלמנטים עבור שרתי אימייל:
http://www.campaignmonitor.com/css/

אם אתם בידיוק מסייימים אתר, עם עיצוב מושקע שעובד בכל הדפדפנים ואז הקריצו לכם את IE8, אפשר לשקול לגרום לו להתנהג כמו IE7 ע"י תג ה-Meta הזה:

קוד:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

התג הזה הוא לא לפי התקנים, אלא לפי משהו שמייקרוסופט המציאו, מה שהופך אותו לפחות מומלץ... אבל, בנסיבות מסוימות להשתמש בתג הזה נראה לי נכון

מיקרוסופט לא המציאו את התג meta, ואין שום מניעה מלהשתמש בו

חבל שאין משהו כזה בישביל פיירפוקס

לחצו לכתבה: 10 Ways To Make Your Site Accessible Using Web Standards

מומלצים לחדשים בבניית אתרים.

ל-Safari ול- Firefox (מגרסא 3.5 ומעלה) יש פיצ'ר שמתעסק עם תמונות כדי לגרום להם להיראות יותר טוב.
הפיצ'ר הזה בעייתי, כי לפעמים יש תמונות שנמצאות אחד ליד השני, ככה שהם משלימים Gradient או כל אלמנט עיצובי אחר, קורה שהצבעים לא מתאימים בגלל זה.

איך זה קורה?
בדרך כלל מה שעושים זה תמונה של האתר בפוטושופ וחותכים את זה להרבה תמונות ככה שאפשר לעשות מזה HTML.
לפעמים צריך לערוך תמונה, ואז הכי נוח פשוט לפתוח את הקובץ ולעבוד עליו. הבעיה היא שזה גורם לבעיה הזאת, אם עורכים קובץ ספציפי יכול להיות שזה ייגרום לבעיה בעיצוב (הצבעים לא ייתאימו).

מה עושים?
עובדים על התמונה הכללית של כל האתר וחותכים משם, אם צריך לערוך קובץ צריך לעשות את זה מהקובץ המקורי.

הבעייה היא שמאפיין ה-target נחשב מיושן ולא עומד בתקן XHTML 1.0 Strict
מה שאומר ששימוש ב-‎target="_blank"‎ כבר לא נחשב תקין

אז מה עושים?
כדי לפתוח לינק בחלון נפרד ע"פ התקן הנ"ל יש להשתמש בJS בצורה הבאה:

קוד:

<a href="http://www.fresh.co.il" onclick="window.open(this.href); return false;">dis iz mah link</a>

ה-return false נועד לכך שהקישור לא ייפתח בחלון הישן.

רות סוף.

תוספים לפורום
קורס לטינית בלעדי לפרש, בפורום שפות ובלשנות.

http://www.gtalbot.org/BrowserBugsSection/