سوال: مشکل با list-style-image در مرورگرهای مختلف! [بایگانی]

hamid1988

جمعه 11 تیر 1389, 14:58 عصر

با سلام
دوستان من از list-style-image در تک <li></li> در کدهای زیر استفاده کرده ام اما فقط در مرورگر فایر فاکس بصورتی که میخواهم نشون داده میشه و در IE و Chrome تصویر در جای مناسب خودش قرار نمی گیره (تصاویر ضمیمه رو ببینید).
راه حل شما برای رفع این مشکل چیه؟

Css

body{ direction:rtl; font-family:Tahoma; font-size:12px;}
li{ list-style:none url(delete.gif) outside; width:500px; line-height:30px; margin-bottom:5px;}
.divR{float:right;width:100px; height:30px;}
.divL{float:left;width:400px; min-height:30px;}
#txtDescription
{
height: 176px;
width: 337px;
}
Html

<body>
<div>
<ul>
<li>
<div class="divR">نام:</div>
<div class="divL">
<input id="txtName" type="text" />
</div>
</li>
<li>
<div class="divR">ایمیل:</div>
<div class="divL">
<input id="txtMail" type="text" />
</div>
</li>
<li>
<div class="divR">توضیحات:</div>
<div class="divL">
<textarea rows="7" id="txtDescription"></textarea>
</div>
</li>
<li style="list-style:none; list-style-image:none;">
<div class="divL">
<input id="btnInsert" type="button" value="ارسال" style="font-family:Tahoma;" />
</div>
</li>
</ul>
</div>
</body>

mortezamacro

جمعه 11 تیر 1389, 20:38 عصر

سلام، اول جای تگ های Div که گذاشتی رو جا به جا کن. بعد style رو هم به شکل زیر تغییر بده.

<body>
<div>
<ul>
<li>
<div class="divL">
<input id="txtName" type="text" />
</div>
<div class="divR">نام:</div>
</li>
<li>
<div class="divL">
<input id="txtMail" type="text" />
</div>
<div class="divR">ایمیل:</div>
</li>
<li>
<div class="divL">
<textarea rows="7" id="txtDescription"></textarea>
</div>
<div class="divR">توضیحات:</div>
</li>
<li style="list-style:none; list-style-image:none;">
<div class="divL">
<input id="btnInsert" type="button" value="ارسال" style="font-family:Tahoma;" />
</div>
</li>
</ul>
</div>
</body>

li{ list-style:url(delete.gif) outside;
text-align:right;
margin-bottom:5px;
width:500px;
clear:both;
direction:rtl;
}
.divR{float:left;width:100px; height:30px;}
.divL{float:left;width:400px; min-height:30px;}

hamid1988

جمعه 11 تیر 1389, 21:48 عصر

مرسی دوست عزیز!
لیست آیتم ها درست قرار گرفتن فقط مشکلی که در IE هست اینکه دایره های قرمز بالای نوشته قرار گرفتن در حالی که من میخام مثل FireFox و Chrome هم ردیف نوشته ها باشن...
این مشکل رو چطور میشه رفع کرد؟

mortezamacro

شنبه 12 تیر 1389, 00:54 صبح

دوباره سلام،

احتمالاً دوباره line-height بکار بردی یا جایی height گذاشتی. برشون داری درست می شه. اگر نشد از clear:both استفاده کن.

ولی جدای از بحث رفع اشکالی که داشتی، چرا از label برای برچسب گذاری فیلدها استفاده نمی کنی؟ استاندارد تر هست.

موفق باشی.

hamid1988

شنبه 12 تیر 1389, 09:46 صبح

ولی جدای از بحث رفع اشکالی که داشتی، چرا از label برای برچسب گذاری فیلدها استفاده نمی کنی؟ استاندارد تر هست.
موفق باشی.
با Label، Span و... امتحان کرده بودم ولی Item listها در مرورگرهای مختلف بهم می ریختن که البته فکر کنم کد شما تو اونا هم جواب بده.
ناهماهنگی Cssها در مرورگرهای مختلف پدر آدم رو در میاره! بیشتر وقت من موقع برنامه نویسی وبسایت صرف سازگاری استایل با مرورگرها میشه.
ای کاش نرم افزاری وجود داشت که خودش کار هماهنگی Cssها رو انجام میداد!:ناراحت:

mortezamacro

شنبه 12 تیر 1389, 10:02 صبح

نبايد زياد به مشكل رو به رو بشي. شايد خوب CSS رو اصولي ياد نگرفتي. دوباره يك نگاهي بهش بنداز.