مشكلة في توافق قالب بلوجر مع متصفحات مختلفة !!

  • tounsi7orr

السلام عليكم أعضاء هذا الموقع الرائع

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

هذا رابط القالب :

http://etoptechnology.blogs...

عند فتحه من متصفح جوجل كروم القالب يعمل جيدا لكن عند فتحه من فايرفوكس فيظهر لي المشكل التالي:

ممكن حل رجاء !!! لم أستطع حل المشكل فأرجوا منكم الحل و شكرا جزيلا.

يرجى الدخول لحسابك أو تسجيل حساب لتستطيع إضافة تعليق
حساب جديد دخول

التعليقات

طبعا ستجد مشاكل مع جميع المتصفحات سفاري وانترنت اكسبلورر

المشكلة في اكواد CSS يجب ان تضيف بريفيكس لبعض اكواد CSS خاص بالمتصفحات الاخرى

اليك هذا المثال

هذا كود CSS سيعمل على كروم

.a {
  display: flex;
  background: linear-gradient(red, green);
}

وهذا هو التصحيح ليعمل على باقي المتصفحات

.a {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background: -webkit-linear-gradient(red, green);
  background: linear-gradient(red, green);
}

انا استخدم محرر اكواد Brackets توجد فيه اضافة جميلة جدا اسمها Autoprefixer تقوم بتطويع كامل ملف CSS ليعمل على جميع المتصفحات

بالتوفيق

شكرا لمعلومتك المفيدة أخي

أنا أكتب الCSS مباشرة في القالب عوض كتابته في صفحة مستقلة لذا هل يمكنني نسخ أكواد السي اس اس و تطويعها لتكون مناسبة مع كل المتصفحات ؟ لأنني لا أعرف أين يكمن الخطا بالظبط

استخدم هذا الموقع

الصق كود CSS في الجهة اليسرى وسيعطيك البريفيكس الخاص بالمتصفحات الاخرى ان وجدت,

ليست كل الاكواد لا تعمل على جميع المتصفحات, بل بعضها فقط

بالتوفيق اخي الكريم

شكرا أخي على مساعدتك

للاسف قمت بالتعديل على الأكواد لكن بدون جدوى فلم فلازال الخطأ قائما

و الله مشكلة كبيرة

هل تكتب inline style ام بين وسم

<style>
</style>

؟؟

بالنسبة لخصائص body فقد حذفت padding و margin من قبل

أما بالنسبة لهذا السؤال فلم أفهمك بالظبط

و هذا هو كود css لمدونتي

<![CDATA[

*{

margin:0;

padding:0;

outline:0;

}

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, font, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td {

padding: 0;

border: 0;

outline: 0;

vertical-align: baseline;

background: transparent;

}

ins {

text-decoration:underline;

}

del {

text-decoration: line-through;

}

h1, h2, h3, h4, h5, h6, p, blockquote, ul, ol, il, a, input {

direction:rtl;

}

a {text-decoration:none;font:normal 14px tahoma, arial;color:#444;}

a :visited{text-decoration:none;color:#00b8ff;}

a :hover{text-decoration:none;color:#ffb800;}

blockquote {

margin: 5px 17px;

padding: 7px 17px 7px 7px;

border: 1px solid #ddd;

border-right: 14px solid #ddd;

color: #646464;

background: #f8f8f8;

text-shadow: 0 1px 0 #fff;

}

ul , ol , dl {

list-style-position:inside;

font-weight:bold;

list-style:none;

}

body{

background:url(

padding: 0;

margin: 0;

direction: rtl;

font-family: tahoma, arial;

font-weight: normal;

font-size: 14px;

}

/-----Font Face-----/

@font-face {

font-family: 'GESSTwoMediumRegular';

src: url('

src: url('

format('embedded-opentype'),

url('

format('woff'),

url('

format('truetype'); }

/-------Container------/

.topnav{height:40px; width:990;background:#444444; margin:0;padding:0;}

.topnav ul{width: 990px;

margin: 0 auto;

overflow: hidden;

border: 1px solid #888888;

border-top: 1px solid #888888;

border-bottom-right-radius: 5px;

border-bottom-left-radius: 5px;

background: #999967;

}

.topnav ul li{float:right;padding:8px 14px; padding-top: 7px;

margin: 5px; padding-left: 0px;

margin-left: 0;

}

.topnav ul li a{color:#fff;font:normal 12px GESSTwoMediumRegular, tahoma;transition:0.5s; font-weight: bold}

.topnav ul li:hover{color:#f8f8f8;background:#ffb800;transition:1s; margin:5px;border-radius:5px;

}

search{

float:left;

margin:9px;

}

.searcharea{

height:25px;

width:auto;

border-radius:5px;

}

.searchbtn{

height:25px;

border-radius:5px;

width:40px;

}

header{width:363px;float:right;margin:0px;padding:0;}

head{height:150px;width:990px;margin:0 auto;padding: 20px 0 0;overflow: hidden;}

main-wrapper{

width: 670px;

padding: 0px;

overflow: hidden;

float: right;

border-radius: 5px;

margin-top: -33px;

}

sidebar-wrapper{

width: 300px;

padding: 0px;

float: left;

background: none;

height: auto;

border-radius: 5px;

}

.sidebar{

width: 300px;

margin: 0;

padding: 0;

}

.sidebar h2{

font: normal 18px GESSTwoMediumRegular;

color: #fff;

padding: 9px 11px 8px;

background: #999967;

border-bottom: 1px solid #ddd;

}

.sidebar ul{

margin: 0;

padding: 4px 10px;

}

.sidebar ul li{}

.sidebar ul li a{

font: normal 14px GESSTwoMediumRegular;

color:#555;

}

.sidebar ul li a:hover{

color:#ffb800;

}

.sidebar .widget{

background:#fff;

border:1px solid #ccc;

margin: 0 0 10px 0;

box-shadow: -2px 0px 4px #ccc;

}

content-wrapper{

width:990px;

margin:0px auto;

padding:5px 0 0 0;

}

Navbar {box-shadow: 0px 0px 0px 3px #999967;

width:990px;height:40px;margin:0 auto;background:#999967;border-radius:5px;

margin-top: -20px;

margin-bottom: 3px;

}

Navbar ul li a{color:white;font:bold 13px GESSTwoMediumRegular, tahoma;transition:0.5s;}

Navbar ul li {float:right;

border-left: 1px solid #ddd ;

padding: 12px 14px; }

Navbar ul li:hover{background:#ffb800;transition:0.5s; }

.post{ background: #fff;

margin: 0 -15px -15px 0;

padding: 0;

width: 674px;

border-radius: 5px;

height: 225px;

margin-top: 33px;}

.post h3{font: normal 18px GESSTwoMediumRegular;

color: #ddd;}

.post h3 a{ font: normal 18px GESSTwoMediumRegular, tahoma;

color: #fff;}

.post-title{ padding: 8px 10px;

background: #999967;

border-bottom: 1px solid #ddd;

margin: 0 0 8px;}

.post-body{

background: white;

padding: 10px;

padding-top: 0px;

font: normal 13px tahoma;

line-height: 1.8em;

color: #666;

width: 97%;

}

ads{

padding: 10px 0px;

}

.post-footer{

margin-top: -15px;}

.rmlink{

float: left;

margin-bottom: -30px;

margin-left: 20px;

padding: 10px;

background: #444444;

border-radius: 3px;

padding-bottom: 12px;

margin-top: 4px;}

.rmlink a {color:white}

.comments{ margin-top: 834px;}

header-wrapper{

width:100%;

background:#444444;

padding: 0;

margin: 0;

border-bottom:1px solid #ddd;

overflow:hidden;

height:200px;

{

هذا الكود يبدو انه لا يحتاج اي تعديل فيجب ان يعمل على جميع المتصفحات

ممكن صورة حول المشكلة من متصفحات مختلفة ؟؟

أعتذر عن تأخري في الرد

هذا هو المشكل :

أرجوا أن تجد الحل

آسف لم انتبه لرابط موقعك

المهم جربته وهو يعمل بشكل ممتاز على فايرفوكس, كروم, اوبرا, سفاري

نعم اخي

فقد قمت بتغيير بعض الابعاد

فاصبح شكله في كروم مختلف عما في موزيلا لكن في النهاية الشكلان جميلان

شكرا شكرا جزيلا جدا أخي

و الله ساعدتني كثيرا

لقد استطعت التعديل على القيم عبر أداة firebug في متصفح موزيلا

لكن المشكل الآن هو أن كيفية التعديل على قيم margin و padding لتكون مناسبة لكل المتصفحات

فمتصفح كروم لديه أبعاد خاصة و موزيلا كذلك

فما الحل رجاء ؟؟

اولا يجب ان تحذف margin و padding الخاصة بالمتصفح

body {
    margin: 0;
    padding: 0;
}

ثم بعدها اكتب الاكواد على راحتك

أحيانا توجد اختلافات في طريقة تعامل المتصفحات مع بعض الأمور، مشروع normalize يهدف إلى جمع هذه الاختلاف وإصلاحها لتعمل بالشكل المطلوب في كل المتصفحات

سأجربه و أعلمك بالنتائج

شكرا

كنت تسأل في موضوع سابق عن دورة

والآن في أي دورة إلتحقت لتتعلم تصميم قوالب بلوجر ؟

الحمد لله

تمكنت من أنشاء أول قالب بلوجر بفضل الله ثم دورة أسامة بويردن

دورة رائعة و هي الأفضل على الاطلاق في المحتوى العربي على ما اعتقد

مع تحياتي بالتوفيق