ورود

View Full Version : حذف فاصله های textbox و checkbox


emad_67
شنبه 27 مهر 1387, 17:15 عصر
سلام
می خواستم بدونم چه جوری میشه مقدار margin رو در textbox و checkbox صفر کرد. من هر بلایی سرش اوردم نشد.اینجوری نوشتم:


input
{
border: none;
margin: 0;
}
همین فاصله تو ie باعث میشه اندازه و فاصله عناصر دیگه هم کم و زیاد بشه.
emad_67
شنبه 27 مهر 1387, 20:16 عصر
برای چک باکس چه جوری اندازه فونت رو کم کنم؟ متن که نیست.
این مشکل رو radio هم داره.
مثلا فرض کم من میخوام یه ماژول نظر سنجی کنار سایت داشته باشم که کنار گزینه های اون radio قرار داره.
اون وقت همین فاصله باعث میشه که اندازه اون ماژول توی ie و ff تغییر کنه و ماژولی که قراره زیر این نظر سنجی هم قرار بگیره جاشو دقیق نمیشه تنظیم کرد.
as13851365
یک شنبه 28 مهر 1387, 08:31 صبح
فکر کنم برای اینها هم بتونی از مقدار flat استفاده کنی

برای چک باکس هم که می خواهی اندازه فونت رو تغییر بدی بهتره از css استفاده کنی

شما کد رو قرار بده تا مشکل راحتتر حل بشه
emad_67
یک شنبه 28 مهر 1387, 09:23 صبح
سلام
والا من نمیخوام اندازه فونت چک باک رو تغییر بدم؟ اصلا مگه میشه؟ چک باکس که خاصیت متنی نداره.
اونو من در جواب دوست قبلی گفته بودم که نمیدونم چرا حذف کرد پستشو.
به هر حال این رو شما ببین:


.login
{
width: 210px;
font-family: tahoma;
font-size: .7em;
text-align: right;
color: #ffc47f;
border: 1px solid #000000;
margin: 0;
padding: 10px;
background-color: #4d4d4d;
}
span
{
float: right;
padding: 0;
margin: 0;
width: 60px;
}
a:link, a:visited
{
font-family: tahoma;
font-size: 1em;
color: #ffc47f;
text-decoration: none;
}
a:hover
{
color: #ff7676;
}
.textbox
{
width: 120px;
font-size: 12px;
margin: 0;
padding: 0;
background-color: #757575;
border: 1px solid #000000;
height: 17px;
}
.fieldarea
{
margin: 0;
padding: 0;
}


<div class="login">
<div class="fieldarea">
<span>نام کاربری: </span>
<input type="text" class="textbox"/>
</div>
<div class="fieldarea">
<span>کلمه عبور: </span>
<input type="password" class="textbox"/>
</div>
<input type="checkbox" class="checkbox">مرا به یاد داشته باش</input><br/>
<a href="#">عضویت</a></br/>
<a href="#">فراموش کردن کلمه عبور</a>
</div>
اینو توی ie و ff باز کن بعد متوجه margin ئی که textbox و checkbox توی ie دارن و باعث میشن که اندازه div کلی هم کم و زیاد بشه، میشی.
as13851365
یک شنبه 28 مهر 1387, 11:36 صبح
من کد شما رو به صورت زیر در یک فایل ذخیره کردم و در سه تا مرورگر Internet Explorer و firefox و opera باز کردم ولی مشکلی که شما می گید رو ندیدم
اگر دقت کنید می بینید که در کد زیر


<a href="#">عضویت</a></br/>

یک / اسلش اضافی وجود داره که من اونو حذف کردم
کد صفحه رو در این قسمت قرار می دم اگر کمی واضحتر بگی بهتر می فهمم .


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.login
{
width: 210px;
font-family: tahoma;
font-size: .7em;
text-align: right;
color: #ffc47f;
border: 1px solid #000000;
margin: 0;
padding: 10px;
background-color: #4d4d4d;
}
span
{
float: right;
padding: 0;
margin: 0;
width: 60px;
}
a:link, a:visited
{
font-family: tahoma;
font-size: 1em;
color: #ffc47f;
text-decoration: none;
}
a:hover
{
color: #ff7676;
}
.textbox
{
width: 120px;
font-size: 12px;
margin: 0;
padding: 0;
background-color: #757575;
border: 1px solid #000000;
height: 17px;
}
.fieldarea
{
margin: 0;
padding: 0;
}
</style>
</head>

<body dir="rtl">
<div class="login">
<div class="fieldarea">
<span>نام کاربری: </span>
<input type="text" class="textbox"/>
</div>
<div class="fieldarea">
<span>کلمه عبور: </span>
<input type="password" class="textbox"/>
</div>
<input type="checkbox" class="checkbox">مرا به یاد داشته باش</input><br/>
<a href="#">عضویت</a><br/>
<a href="#">فراموش کردن کلمه عبور</a>
</div>
</body>
</html>


اگر مشکل شما فاصله بین *نام کاربری : * و textbox مربوطه است می تونی از جدول استفاده کنی

باز اگر مشکلی بود بگو ( واضحتر )
emad_67
یک شنبه 28 مهر 1387, 12:53 عصر
با تشکر
ولی مشکل من فاصله بین خود textbox ها هست. شما همین کدی رو که دادی اگر توی ie باز کنی میبینی که textbox ها یه مقدار با هم فاصله دارن( انگار margin-top دارن) ولی تو فایرفاکس بهم چسبیده اند. درستش مال ff هست، حالا میخوام بدونم تو ie چه بلایی سرش بیارم؟
این مشکل برای checkbox و radio هم هست. شاید اگه border ها رو برای این 2 تا فعال کنی متوجه بشی. مثلا توی ie دکمه رادیویی مثل یه مربع میمونه که دایره ای رو داخل اون قرار دادن ولی تو ff همچین چیزی نیست و فقط خود دایره وجود داره. همینها باعث میشه یه مقدار فاصله ها بالا پایین بشه.
یا مورد دیگه تگ hr هست که تو ie کلی margin-bottom بهش میخوره در صورتی که توی css اون من مینویسم که margin:0; ولی انگار نه انگار.
as13851365
دوشنبه 29 مهر 1387, 09:46 صبح
آهان .
اول باید به شما بگم که زیاد خودتان را اذیت نکنید چون IE استاندارد نیست البته ورژنهای 7 و 7 به بعد دارن به سوی استاندارد شدن می رن

این کدهایی که شما مطرح کردید در opera و FF درست کار می کنند ولی در IE کمی فاصله می اندازه .

فکر نکنم بتونی کاری براش بکنی جز این که بیخیال این فاصله بشی .
emad_67
دوشنبه 29 مهر 1387, 10:38 صبح
ممنون دوست عزیز
من سعی کردم با قرار دادن textbox داخل یه div که ارتفاعش بیشتر از اون textbox هست، کاری کنم که فاصله اون تقریبا نشون داده نشه. ممنون


.fieldarea
{
margin: 0;
padding: 0;
height: 19px;
}