نمایش صفحات وب در مرور گرهای مختلف

[twelve]

هر مرورگر علاوه بر تبعیت از استاندارد های جهانی و واحد ، استانداردهای مخصوص به خودش رو داره و همین مسئله باعث میشه که طراح وب در طراحی خود این مسائل رو در نظر بگیره تا کاربران که هر کدام مرورگر محبوب خود را استفاده می کنند به بهترین نحوی صفحات را مشاهده کنند.

مشکل من با محبوب ترین مرورگر دنیا (فایرفاکس) است. سوال من اینه ، عناصر موجود در صفحات رو چطور استایل بندی کنیم که در مرور گر های مختلف نتیجه یکسان داشته باشند؟؟
البته این سوال من خیلی کلی هست اما اهمیت زیادی در طراحی وب داره ، امیدوارم دوستان هم نظرات خودشون رو جامع و مقاله وار ارائه بدند. پیشاپیش از همه شما تشکر میکنم.

[raravaice]

سلام

یه Sample بگو که متفاوت هست. چون باید بر اساس شرایط ایجاد شده تو صفحه Css بدی که تو هر دو کار کنه.IE,FF

موفق باشید

[twelve]

با تشکر فراوان از شما که پیگیر این موضوع هستید.
همونطور که قبلا اشاره کردم :

background-image:

padding-top:

padding-right: 

padding-left: 

padding-bottom:

این استایلهای استاندارد در IE کار می کنند ولی در فایرفاکس نه !
در تصویری که ضمیمه شده می بینید که این استایل ها در FF شناخته نشدند و حتی جهت منوی نارنجی رنگ عوض شده است اما در IE به خوبی نمایش داده شده اند.

کلاس CSS استفاده شده برای نوشته آب رنگ :

.Footer:Link {

font-family: Tahoma;

font-size: 12px;

color:#000099;

border-right-width: 1px;

border-right-style: solid;

border-right-color: #000066;

padding-left: 15px;

padding-right: 15px;

font-weight: normal;

}

کلاس CSS استفاده شده برای منوی نارنجی رنگ :

.TopMenu:link {

color:#FF9B37;

font-family:Tahoma;

font-size:12px;

font-weight:600;

text-decoration:none;

height:30px;

background-image:url(Images/TopMenu_03.gif);

padding-top:9px;

padding-right: 14px;

padding-left: 14px;

padding-bottom: 1px;

border-right-width: 1px;

border-right-style: solid;

border-right-color: #FFC488;

border-top-width: 1px;

border-bottom-width: 1px;

border-left-width: 1px;

border-top-color: #FFC488;

border-bottom-color: #FFC488;

border-left-color: #FFC488;

 

}

[raravaice]

و از چه المانهایی استفاده شده.
سورس HTML هم بزار.
چو من احتما میدم که مشکل شما با Padding هست چو استاندارد این ITEM اینه که سایزی که بهش میدی با width المان حساب نشه ولی متاسفانه IE اونو با width جمع میکنه یعنی Padding رو بهش اضافه میکنه.
ولی چیزه سختی نیست html رو هم بزار تا دقیق با بهترین شرایط بهت بگم جریان چیه.

موفق باشید

[twelve]

کلا همه المان ها HTML هستند
چون نمیشد اینجا کپی کنم در فایل ضمیمه گذاشتمش.

[raravaice]

نمایش المانها در FF به صورت پیش فرض با Display:inline هست ولی در IE به صورت Display:Block شما اینجا باید از Display:block استفاده کنی برای تگ a تا بتونی Padding یا Margin رو اعمال کنی.

#Tmenu a

        {

            color: #FF9B37;

            font-family: Tahoma;

            font-size: 12px;

            font-weight: 600;

            text-decoration: none;

            background-image: url(Images/TopMenu_03.gif);

            border:none 1px #FFC488;

            border-right-style:solid;

            padding : 9px 14px 9px 14px;

            display:block ;

            float:left;

        }

برای Css
و

<table id="Tmenu" cellspacing="0" cellpadding="0" width="100%" border="0">

        <tr>

            <td style="height: 30px;">

                <a href="Services.aspx" style="border-left-style:solid;">خدمات ایران مساحت</a></span>

                <a href="Maps/" >نقشه ها</a>

                <a href="Work/Employers.aspx">کارفرمایان</a>

                <a href="Work/Employees.aspx">کارجویان</a>

                <a href="Ads/?Mode=Org&Part=All">تبلیغات</a>

                <a href="Contact.aspx" >تماس با مدیریت</a>

            </td>

        </tr>

     </table>

برای Html
البته font-weight: 600 برای FF به طور کل بی تاثیر هست و همون Bold در نظر گرفته میشه.
همچنین سعی کن شیوه های مختصر نویسی Css رو یاد بگیری که style هات زیاد نشه.

موفق باشید

[twelve]

#Tmenu a

مرسی ، این ای دی رو که به جدول بدیم فقط روی عناصر <a> اثر میذاره درسته ؟

یک سوال دیگه : توی Asp.Net هر ابجکتی یک ای دی داره ، ایا میشه برای استایل بندی اونها از ای دی های CSS مثل این استفاده کرد ؟

[raravaice]

مرسی ، این ای دی رو که به جدول بدیم فقط روی عناصر <a> اثر میذاره درسته ؟

تمام المانهای a داخل این جدول.

یک سوال دیگه : توی Asp.Net هر ابجکتی یک ای دی داره ، ایا میشه برای استایل بندی اونها از ای دی های CSS مثل این استفاده کرد ؟

آره ولی باید از Client ID اونا استفاده کنی یا اینکه استایل رو بر اساس تگ های داخلی و بیرونی بدی و از نام ID استفاده نکنی.یا اینکه توی یه DIV معمولی بزاری المانهای سرور رو و تغییرات رو به محتویات اون بدی.

موفق باشید

[twelve]

یا اینکه توی یه DIV معمولی بزاری المانهای سرور رو و تغییرات رو به محتویات اون بدی.

فکر کنم این بهترین کار باشه ، به هر حال ClientID هم سمت سرور تنظیم میشه اما این روش HTML خالصه.
ممنون ، با سوالات جدید بر میگردم :)

[twelve]

سلام ، من یک مشکل دیگه برام به وجود اومد ممنون میشم بازم راهنمایی کنینو
یک منوی استاتیک (تصویر ضمیمه ) دارم که هر کار میکنم وسط نمیاد! فقط وقتی Fload:Right باشه میوفته راست ، Left هم باشه میوفته چپ ( که البته راستش صحیح تره )
مشکل به مرور گر هم مربوط نیست!

کد HTML تولید منو ضمیمه شده است.

کد کلاس css :

#Footera:Link {

font-family: Tahoma;

font-size: 12px;

color:#000099;

border-right-width: 1px;

border-right-style: solid;

border-right-color: #000066;

padding-left: 15px;

padding-right: 15px;

font-weight: normal;

display:block;

direction:rtl;

float:right; 

}

[raravaice]

در این جور مواقع سایزت رو فیکس کن.

<div style="direction: rtl;width:650px" id="Footera">

                                <a href="Services.aspx">خدمات ایران مساحت</a>

                                <a href="Work/Employees.aspx">کارجویان</a>

                                <a href="Work/Employers.aspx">کارفرمایان</a>

                                <a href="Ads/">تبلیغات</a>

                                <a href="Register.aspx">ثبت نام</a>

                                <a href="Contact.aspx">تماس با مدیریت</a>

                                <a style="border-left: #000066 1px solid;" href="About.aspx">درباره موسسه</a>

                                </div>

موفق باشید

[twelve]

در این جور مواقع سایزت رو فیکس کن.

راستش خودمم همینکارو کردم ، حتی عنصر <div> رو توی یک جدول جدا با فیکس سایز گذاشتم ولی این کار فقط در IE درست جواب میده ، در FF اولین لینک منو بالا قرار میگیره و بقیه (به شکل) صحیح زیر اون قرار میگیرن ، اون لینک اول هیچ استایلی هم به خودش نمیگیره !

[raravaice]

اینی که من تست کردم توی هر دو داره درست کار میکنه البته در نظز بگیر که Css رو اشتبان نوشته بودیا اینجوری عوض باید بشه.

#Footera a:Link

و اون HTML که به من دادی اسم ID div متفاوت با اسم این Css بود اینا به حروف کوچک و بزرگ ID المان حساس هستن.

موفق باشید

[twelve]

اینی که من تست کردم توی هر دو داره درست کار میکنه البته در نظز بگیر که Css رو اشتبان نوشته بودیا اینجوری عوض باید بشه.

کد:
#Footera a:Link
و اون HTML که به من دادی اسم ID div متفاوت با اسم این Css بود اینا به حروف کوچک و بزرگ ID المان حساس هستن.

موفق باشید

نه ایراد از این نبود ، این لینکی گفته بودم یک لینکی بود که visit شده بود و من فراموش کرده بودم یکی از کلاس های CSS رو بنویسم :

#Footera {

font-family: Tahoma;

font-size: 12px;

color:#000099;

border-right-width: 1px;

border-right-style: solid;

border-right-color: #000066;

padding-left: 15px;

padding-right: 15px;

font-weight: normal;

display:block;

float:right; 

}

با این حل شد. باز هم از شما ممنونم.

این ادیتور Space ها رو زیاد جدی نمیگیره! البته دلیلش اینه که من کد ها رو از VS کپی میکنم

[twelve]

از اینکه اینقدر زود به زود سوال میکنم ببخشید :-p
در IE وقتی Direction یک عنصر مثلا Div رو RTL میکنم ، اگر ما بین متن از عدد استفاده شده باشه عدد رو با نماد فارسی نشون میده ولی در FF اینطور نمیشه ، چرا؟ چیکار کنم که در FF هم فارسی نشون بده؟

[raravaice]

سلام

در IE وقتی Direction یک عنصر مثلا Div رو RTL میکنم ، اگر ما بین متن از عدد استفاده شده باشه عدد رو با نماد فارسی نشون میده

اینطور نیست این حالت فقط روی سیستم شما پیش میاد مطمئنن چون احتمالا پیش فرض اعداد شما تو ویندوز فارسیه اگر میخوای عدد ها کاملا فارسی نشون داده بشه از کد UTF8 اونا استفاده کن و تو صفحت بزار.
این کدهارو میتونی از طریق برنامه charmap به دست بیاری.

یه چیزه دیگه . مسئله ای رو که برای منو ها عنوان کردی مشکلیه که FF با فونت فارسی داره و اگر فونت انگلیسی باشه نیازی به Float نداری.

موفق با شید

[twelve]

اگر میخوای عدد ها کاملا فارسی نشون داده بشه از کد UTF8 اونا استفاده کن و تو صفحت بزار.
این کدهارو میتونی از طریق برنامه charmap به دست بیاری.

این رو اصلا بلد نیستم ! میشه روشش رو بگین؟

یه چیزه دیگه . مسئله ای رو که برای منو ها عنوان کردی مشکلیه که FF با فونت فارسی داره و اگر فونت انگلیسی باشه نیازی به Float نداری.

نکته بسیار جالبی بود

[raravaice]

١٢٣٤٥٦٧٨٩

توی هر مرورگری که UTF8 رو ساپورت میکنه اعداد رو ببین.

Start > Run > Charmap

موفق باشید

[twelve]

باز هم یک سوال دیگه ، پیشاپیش از راهنماییتون ممنون :

من یک ای دی CSS برای جدول دارم به صورت زیر

#MyTable1

{

    border:solid 1px #EDDEc9;

}

جالا اگر من یک جدول داشته باشم با مشخصات زیر :

<table id=MyTable1 CellPadding = 4 CellSpcing=2 />

ویژگی های CellPadding و CellSpacing در نظر گرفته نمیشه ! راه حلش چیه ؟

[raravaice]

اینی که میگی از مهالات ممکنه مطمئنی غلط املائی نداری تو سورست مثل اینجا؟;)

کوتیشن هارو بزار استاندارد تره :

<table id="MyTable1" cellpadding="20" cellspacing="10">

موفق باشید

[twelve]

نه مطمئنم غلط املایی نیست ، اینجا هم که غلط داره چون توی notepad جنگی نوشتم که بشه اینجا کپی کرد

[raravaice]

شاید تاثیر از جای دیگه ای گذاشته میشه چون تو این حالت داره کارشو درست میکنه Css و Html رو کامل بزار

[twelve]

همونطور که میدونید من جدول رو سمت سرور تولیدش میکنم و به همین خاطر نمیتونم دوبل کوتیشن بزارم از سینگلش استفاده میکنم ( ' ' ) اینی که اینجا نوشتم یه سمپل هست.

من قبلا جدول رو به این صورت مینوشتم و فقط در IE درست بود :

<table border=1 bordercolor=#eddec9 CellPadding = 4 CellSpacing=2  />

که مقادیر padd و sapce رعایت میشد (فضای خالی بین border و دیواره cell قابل رویت بود )
البته فقط در IE و در FF فقط Border رو در نظر میگیرفت اما الان با این ای دی CSS قاب جدولم رو در هر دو مرورگر به صورت یک خط نازک نشون میده و فواصل اصلا مشخص نیست ... :(

-----------
یک سوال دیگه : آیا استانداردهای Opera با FF و Avant با IE کاملا مطابقه ؟
در Opera مقدار ویژگی Height رو با % نمیشناسه (برای جدول )

[raravaice]

من که نفهمیدم جریان چیه چون اینی هم که دادی داره درست کارشو تو هر دو مرورگر انجام میده ولی تو اینجوری عوضش کن ببین به کارت میاد :

#MyTable1 , #MyTable1 td

            {

               border:solid 1px #EDDEc9;

            }

<table id="MyTable1" cellpadding = "4" cellspacing="2">

   <tr>

   <td>f</td><td>f</td>

   </tr>

   <tr>

   <td>f</td><td>f</td>

   </tr>

   </table>

خبرشو بهم بده.

[twelve]

نچ! اینم نشد ، اگر جدول رو مستقیما با HTML تولید کنم هر دو روش جواب میده ولی وقتی از سمت سرور میسازم نه ! عجب گیری افتادیما ...... :-s

میشه اون سوال دوم هم جواب بدین ( درپست 23 ) بعد از پست اضافش کردم

یک سوال دیگه : آیا استانداردهای Opera با FF و Avant با IE کاملا مطابقه ؟
در Opera مقدار ویژگی Height رو با % نمیشناسه (برای جدول )

[raravaice]

یک سوال دیگه : آیا استانداردهای Opera با FF و Avant با IE کاملا مطابقه ؟
در Opera مقدار ویژگی Height رو با % نمیشناسه (برای جدول )

راستش من با Avant تا حالا کار نکردم و نمی دونم چیه چون من بر اساس فید بک مرورگر کاربرام بیشتر طرحم رو وفق میدم ولی تا اونجایی که من قبلا تست کرده بودم Opera شباهت شدیدی با IE داشت و اینکه میگی Height رو با % نمیشناسه عجیبه البته این نکته هم در نظر بگیر که Height با % زمانی کار میکنه که Height المان پدر بر اساس pixel مقدار دهی شده باشه.

نچ! اینم نشد ، اگر جدول رو مستقیما با HTML تولید کنم هر دو روش جواب میده ولی وقتی از سمت سرور میسازم نه !

در این جور مواقع یا view source رو مرور کن ببین چه کدی Generate شده یا اینکه ابزاری رو که تو سایت زیر هست برای firefox بگیر نصب کن به دردت میخوره.یه Debuger html که کارش خارق العادست البته نمونه این کار برای IE هم انجام شده که قدرت اینو نداره.
http://www.getfirebug.com

موفق باشید

[twelve]

در هر دو مرور گر کد Generate شده صحیح و به این صورته :

<table width=100% Cellpadding=4 Cellspacing=2 id=MyTable1>

کلافه شدماااا از دست این FF !

راستش من با Avant تا حالا کار نکردم و نمی دونم چیه چون من بر اساس فید بک مرورگر کاربرام بیشتر طرحم رو وفق میدم ولی تا اونجایی که من قبلا تست کرده بودم Opera شباهت شدیدی با IE داشت و اینکه میگی Height رو با % نمیشناسه عجیبه البته این نکته هم در نظر بگیر که Height با % زمانی کار میکنه که Height المان پدر بر اساس pixel مقدار دهی شده باشه.

همین کار رو انجام دادم ، در 3 مرورگر درست جواب میده جز Opera ، راستش خودم اصلا از این موجود (opera) خوشم نمیاد. اصلا همش تقصیر Asp.net هست ، والا به خدا PHP و ASP این رقاصیا نداشت :-d

[امید امرایی]

نچ! اینم نشد ، اگر جدول رو مستقیما با HTML تولید کنم هر دو روش جواب میده ولی وقتی از سمت سرور میسازم نه !

منظورتون از سمت سرور چیه ؟

[twelve]

منظورتون از سمت سرور چیه ؟

منظور اینه که جدول رو دستی با کد html تولید نمیکنم بلکه با کد های asp دستور html اون رو میسازم.

دانلود آخرین نسخه (بتا ) فایر فاکس برای همه زبانها و سیستم های عامل

http://www.mozilla.com/en-US/firefox/all-beta.html

[tabib_m]

دابل کوت ها رو بذار، در غیر این صورت نمیتونی حتما انتظار داشته باشی که صفحه ت درست به نمایش در بیات! و مطمئنا هم میتونی بذاری و محدودیتی در این زمینه وجود نداره ... (اون فاصله های اضافی کنار علامت = رو هم بردار)

Avant هم از همون موتور IE استفاده میکنه و اصلا مرورگر مجزایی نیست. فقط یک قالب برای IE هست و بس...

Height درصدی، غیر استاندارد هست. باید عدد بدی... (دنبال دلیلش نگشتم، ولی در هر صورت من که تا حالا ضرری در طراحی هام نکردم )

[twelve]

دابل کوت ها رو بذار، در غیر این صورت نمیتونی حتما انتظار داشته باشی که صفحه ت درست به نمایش در بیات! و مطمئنا هم میتونی بذاری و محدودیتی در این زمینه وجود نداره ... (اون فاصله های اضافی کنار علامت = رو هم بردار)

جان برادر ، من عرض کردم سورس HTML رو در قالب دستورات Asp و در یک دیتای string قرار میدم که خود این استرینگ بین " " قرار میگیره پس نمیتونم برای تخصیص ویژگی ها از این علامت استفاده کنم

ببینین ، مشکل من به زبان ساده اینه ( با یک پیشنهاد بیان میکنم )
یک جدول در صفحه html ایجاد کنید با این مشخصات :

<table border="1" CellPadding="4" CellSpacing="2" bordercolor=#EDDEC9>

    <tr>

        <td>&nbsp;</td>

    </tr>

</table>

به ضاهرش خوب نگاه کنید (قاب جدول منظورمه )
حالا این ای دی CSS رو بنویسید :

#MyTable1



{

    border:solid 1pt #EDDEc9;

}

حالا یه جدول دیگه درست کنید و این ای دی رو بهش اختصاص بدید با تعیین CellPadding و CellSpacing مثل جدول اول (دیگه به این جدول رنگ و بوردر و ... ندین )

<table id=MyTable1   CellPadding="4" CellSpacing="2" >

    <tr>

        <td>&nbsp;</td>

    </tr>

</table>

حالا دو جدول رو با هم مقایسه کنید ! من میخوام از روش دوم استفاده کنم اما جدول حاصل با ظاهر شبیه به جدول اول تولید بشه.

[tabib_m]

جان برادر ، من عرض کردم سورس HTML رو در قالب دستورات Asp و در یک دیتای string قرار میدم که خود این استرینگ بین " " قرار میگیره پس نمیتونم برای تخصیص ویژگی ها از این علامت استفاده کنم

میدونم. دو راه داری. یکی این که برای ساخت رشته (string) به جای استفاده از دابل کوت، از سینگل کوت استفاده کن « ' » . و دوم این که برای استفاده از کاراکتر " در جایی که رشته ت با خود " ساخته شده، میتونی از \ استفاده کنی:

"<table cellpadding=\"4\">"

حالا دو جدول رو با هم مقایسه کنید ! من میخوام از روش دوم استفاده کنم اما جدول حاصل با ظاهر شبیه به جدول اول تولید بشه.

مشکلت اینجاس که آشناییت با CSS خیلی پایینه!!
خاصیت border در جدول، مرز خود جدول و تمامی سلول ها رو تعیین میکنه. ولی خاصیت border در css فقط مخصوص همون شیئی هست که داری بهش style میدی!
یعنی وقتی با css به جدول میگی border ش چی باشه، فقط خود جدول (یعنی حاشیه ی جدول) این خصوصیت رو می پذیره و برای سلول ها باید جداگونه این خاصیت رو القا کنی:

#MyTable1{

    border:solid 1pt #EDDEc9;

}



td.myClass{

    border:solid 1pt #EDDEc9;

}

که خلاصه شده ش میشه:

#MyTable1 , td.myClass{

    border:solid 1pt #EDDEc9;

}

و در نهایت جدول:

<table id="MyTable1" cellpadding="4" cellspacing="2">

    <tr>

        <td class="myClass">&nbsp;</td>

    </tr>

</table>

راستی، cellpadding و cellspacing با حروف کوچک نوشته میشن :)

موفق باشید.

[twelve]

مرسی ، مشکل حل شد.

مشکلت اینجاس که آشناییت با CSS خیلی پایینه!!

ادعایی هم نداشتم و ندارم و گرنه اینجا تاپیک نمی زدم ، در جوار شما و دیگر استاید اطلاعاتم رو ارتقا می دم ، مطمئنا یک دست صدا نداره.

[Ehsan Valinouri]

سلام دوستان گرامی
من وب سایتی رو در حال طراحی هستم با استفاده از ASP.net . مشکل در نمایش جدول هاست یعنی در IE، جدول ها به درستی و در وسط نمایش داده میشن (Alignment=Centered) اما در مرورگرهای دیگه همه جدول ها به سمت چپ میرن.
جالب اینجاست که بعضی از عکسا رو هم نشون نمی ده و جای بعضی هاشون Submit Query می نویسه.
ممنون میشم اگه یه راه حل اساسی برای حل این مشکل بهم بدین. چون نمایش سایت در مرورگر های دیگه به خصوص فایرفاکس جونم خیلی برایم مهمه.
من از Padding و Margin استفاده نمی کنم. فقط از Table های ساده استفاده کردم و Style اش رو تنظیم کردم. از CSS هم استفاده می کنم اما نه در همه جا چون ترجیح میدم بعضی جاها رو دستی تنظیم کنم. شما فرض رو بر این بذار که تو این مشکل خاص هم از CSS استفاده نکردم. اگه مشکل به CSS حل میشه لطف می کنی کدش رو بزاری؟

[twelve]

در این جور مواقع سایزت رو فیکس کن.

یعنی بذارشون توی یک المان دیگه (مثل جدول) با سایز فیکس شده (مثلا 400 پیکسل)
اگر نشد ، کد هایی که استفاده میکنی رو بذار

[Ehsan Valinouri]

twelve جان مشکل رو تو این تاپیک مطرح کردم اگه شما و یا tabib_m در این مورد تجربه ای دارید ممنون میشم به من برای حل این مشکل کمک کنید.

[twelve]

یعنی بذارشون توی یک المان دیگه (مثل جدول) با سایز فیکس شده (مثلا 400 پیکسل)
اگر نشد ، کد هایی که استفاده میکنی رو بذار

جان برادر توی این پست که گفتم

[Ehsan Valinouri]

دوست عزیز تمام المان ها در جدول هستند اما تمایلی به استفاده از سایز فیکس شده ندارم جون در رزولوشن های دیگه سایت به هم میریزه.

[Ehsan Valinouri]

البته ان با کمک یکی از دوستان و align=center کردن تا حدود زیادی مشکل حل شده. مرسی از راهنماییتون

[twelve]

درود بر شما

من برای جدول خودم از background استفاده کردم ، که در تمام مرور گر ها هم به خوبی نمایش میداد اما امروز در عین ناباوری دیدم که در فایرفاکس نشونش نمیده ، البته همه background ها رو نشون میده جز همین! وقتی View Background Image هم زدم این خطا رو داد!!!

The image “http://localhost/Area/Images/MainTb_07.gif” cannot be displayed, because it contains errors.