تفاوت یک عرض برابر در دو مرورگر

amirkhoshhal · Apr 16, 2009

IE7 :

FF3 :

سلام . خسته نباشید .
من 4 تا div دارم 3 تا کنار هم و یکی که هر 3 تا رو توو خودش نگه می داره .
به div مادر عرض 751px دادم . مشکل اینجاست که عرض div مادر توو مرورگرهای FF3 و IE7 فرق دارند . این هم کدم :
CSS :

کد:

.opentable{
    padding-top: 1px;
    padding-bottom: 1px;
    width: 751px;
    background-color: yellow;
}
.title_opentable1{
    background-image: url(../images/c-1.png);
    background-color: transparent;
    background-repeat: no-repeat;
    width: 49px;
    height: 30px;
    color: #000000;
    margin: 0px 0px 0px 0px;
    padding: 0px;
    float: right;
}
.title_opentable2{
    background-image: url(../images/c-2.png);
    background-color: transparent;
    background-repeat: repeat-x;
    width: 694px;
    height: 30px;
    color: #000000;
    margin-top: 0px;
    padding-top: 0px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.title_opentable3{
    background-image: url(../images/c-3.png);
    background-color: transparent;
    background-repeat: no-repeat;
    width: 8px;
    height: 30px;
    color: #000000;
    margin: 0px 0px 5px 0px;
    padding: 0px;
    float: left;
}

HTML :

کد:

<div class="opentable">
    <div class="title_opentable1"></div>
    <div class="title_opentable3"></div>
    <div class="title_opentable2">
        <span>
            {$title}
        </span>
    </div>
    <div class="opentable_border">

    </div>
</div>

ممنون .

amirkhoshhal · Apr 17, 2009

کسی تا به حال به این مشکل بر نخورده ؟
بکگراند زرد رنگ رو ببینید در IE7 بیشتر از FF3 هست . :cry:

echessdesign · Apr 18, 2009

درود بر شما
امیر خان، من کلا به روشی که برای گزاشتن پس ضمینه در بالا انجام دادی، مشکل دارم!
تصور می کنم لقمه رو دور سرت پرخوندی!!
یه مثال برات زدم، هم خیلی سادست هم خیلی شیواست...
در مرورگر های زیر هم بدمن مشکل است:
FF 3.0.8
OP 10 alpha
IE 7
safari 3.2.1
هر مشکلی داشتی در خدمتم

HTML:

<!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>test</title>
<style type="text/css">
#wrp {
	width:700px;
	height:20px;
	background:transparent url('1.gif') repeat-x;
}
#left {
	background:transparent url(2.gif) no-repeat left center;
}
#right {
	background:transparent url(3.gif) no-repeat right center;
}
</style>
</head>

<body>
	<div id="wrp">
		<div id="left">
			<div id="right">
				www.echessdesign.com
			</div>
		</div>
	</div>
</body>

</html>

amirkhoshhal · May 13, 2009

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

echessdesign · May 14, 2009

درود بر شما
مشکل از سورس نیست!
بلکه مشکل از transparent بودن پس ضمینه فایل های PNG شماست!
آنها را با فرمت JPG ذخیره کنید.
مشکل حل می شود.

amirkhoshhal · May 14, 2009

خیلی خیلی ممنون . یه مشکل دیگه هم دارم . وسط چین کردن متن به صورت افقی و عمودی (کلا وسط در وسط باشه)
از کد زیر استفاده می کنم اما وسط چین نمی شه .

کد:

        <div class="title_opentable_home_center">
            <div class="title_opentable_home_left">
                <div class="title_opentable_home_right">
                    <span>ثبت نام</span>
                </div>
            </div>
        </div>

--------------------------------------------------

کد:

.title_opentable_home_center{
    width: 458px;
    height: 30px;
    background: transparent url(../images/c-2.png) repeat-x;
}
.title_opentable_home_left{
    height: 30px;
    background: transparent url(../images/c-3.png) no-repeat left center;
}
.title_opentable_home_right{
    height: 30px;
    background: transparent url(../images/c-1.png) no-repeat right center;
}
.title_opentable_home_right span{
    padding-top: 9px;
    text-align: center;
    vertical-align: middle;
    color: #937200;
    font-weight: bold;
}