الموضوع: حل بعض اخطاء CSS لجعل الموقع متوافق مع معظم المتصفحات

يا هلا
عندما تقوم بتصميم قالب بأستخدام CSS فان بعض الاخطاء قد تواجهك بحيث انه قد يعمل بدون اخطاء في الفايرفوكس وتجد بعض الاخطاء في انترنت اكسبلورر او العكس .

بشكل عام :

• استخدم reset style لتسيطر على التصميم ككل
• استخدم لحجم الخطوط em
• لا تقم بتصغير الصور بأستخدام css/Xhtml
• جرب الخط المستخدم مسبقا في كل المتصفحات
• لا تستخدم الـcss3
• ابتعد ان الصور من نوع png بخلفيات شفافة

خلفية النص في سفاري

قد تلاحظ اختلاف في النص عن تصفح الموقع بواسطة سفاري .
قم بادراج هذا الكود من ضمن خصائص الستايل الخاص بالنص

كود:

p { text-shadow: #000 0 0 0; } 

وقد تكون نفس المشكلة في الفايرفوكس , استخدم هذا الكود لأصلاح المشكلة

كود:

p { -moz-opacity: 0.99; } 

مشكلة احتواء المربعات في انترنت اكسبلورر

قد تكون تصمم قالب الى مدونة على سبيل المثال وقمت بعمل Div عام ليحتوي داخله Div للمحتوى وDiv للقائمة الجانبية
واستخدمت هذا الكود

كود:

#content { float:right; width: 300px; margin-right: 10px; } 
#sidebar { float:right; width: 100px; } 

والذي يجب ان يكون هكذا


ولكن قد تجده في الانترنت اكسبلورر



وحل المشكلة هو عن طريق تحديد الـdisplay ليكون في خط واحد

كود:

#content { float:right; width: 300px; margin-right: 10px; display:inline; } 
#sidebar { float:right; width: 100px; display:inline; } 

وقد تواجهك نفس المشكلة التي في الاعلى ولكن بشكل ثاني في انترنت اكسبلورر6 كما في الصورة



والحل هو في تحديد الـ overflow

كود:

#content { float:left; width: 300px; margin-right: 10px; display:inline; overflow:hidden; } #sidebar { float:left; width: 100px; display:inline; overflow:hidden; } 

يتبعـــ ...

مشكلة احتواء div في الخلفية لعدة Divs في الفايرفوكس

الكثير منا يعاني من هذه المشكلة وهي في احتواء Div عام لعدة Div وعند جعل الDiv العام بطول 100% بعمل بنجاح مع الانترنت اكسبلورر ولكن مع الفايرفوكس لا يعمل .

وهذه الصورة توضح ما اقصده وما هو مطلوب



ولكن قد تجده في الفايرفوكس بهذا الشكل



والحل في تحديد overflow:auto or overflow:hidden

كود:

#container { width: 966px; margin: 0 auto; overflow:auto; } 

الوسوم والخصائص التي لا تعمل على Ie6

اجتنب استخدام خصائص الـcss3 لأن بعض الخصائص في css2 لا تعمل على Ie6 وهذه بعضها

E > F
E + F
E ~ F
:root
:last-child
nly-child
:nth-child()
:nth-last-child()
:first-of-type
:last-of-type
nly-of-type
:nth-of-type()
:nth-last-of-type()
:empty
:not()
:target
:enable
:disabled
:checked
Any of the E[attribute] Selectors
:first-child
:lang()
:before
::before
:after
::after

وهذه صفحة تبين الخصائص والمتصفحات التي تدعمها والتي لا تدعمها
CSS, JavaScript and XHTML Explained

"المقال مترجم"

يا بعدي والله يا owner ... هذه الأيام متعمق في CSS ليناسب كافة المتصفحات

الله يزوجك أثنين نفر أبو كشة ...


تقبل فائق التقدير ...

الله يرضى عليك هذي المواضيع الى الامام عزيزي

رائع
صراحةً نفتخر بوجودكم بيننا ولأنكم متميزين في هذا المجال ولم اجد لكم منافساً مهما بحثت لا اجد الوقت الكافي لكي انجز ما تقوم بتلخيصه لنا في عدة اسطر

الله يعطيك الف عافيه يالغالي


درس ولا اروع وشاكر لك النقل ^_^

مشكور اخوي owner أبدعت ما شاء الله

موضوع روعة

تسلم owner على الموضوع

بس عندي استفسار ... ليش لازم نتجنت صور png شنو المشكلة فيهم ؟

جزاك الله الف خير يالغالي .. على الدرس .. اخترت .. فأتقنت .. فأبدعت..
فقط استفسار بسيط ...
بالنسبه للموقع الذي وضعته .. توجد مربعات .. خضر .. وبرتقاليات .. وعنابي ...
ممكن اتفصلها لنا ..

شكرا لكم على الردود .

موضوع روعة

تسلم owner على الموضوع

بس عندي استفسار ... ليش لازم نتجنت صور png شنو المشكلة فيهم ؟

الصور من نوع png تظهر فيها خلفية رصاصية كضل

جزاك الله الف خير يالغالي .. على الدرس .. اخترت .. فأتقنت .. فأبدعت..
فقط استفسار بسيط ...
بالنسبه للموقع الذي وضعته .. توجد مربعات .. خضر .. وبرتقاليات .. وعنابي ...
ممكن اتفصلها لنا ..

الله يجزيك خير , نفس المشكلة واجهتني لأن الكاتب ما وضع خريطة للألوان ! اعتقد الان الاخضر يعني انه يعمل على المتصفح و الاحمر لا يعمل على المتصفح والاصفر يعمل مع وجود اخطاء

معلومات رائعه استفدت منها , شكرا لك يا Owner

اخوي اونر .. ما عليك امر ... ممكن تشرح لنا وظيفة overflow ..