بهم خوردن اندازه سایت در browser های مختلف

[monika]

با سلام من در طراحی سایت از cssاستفاده کردم الان که سایت رو آپلود کردم در browserهای مختلف سایزش تغییر پیدا میکنه می شه راهنماییم کنین
اینم آدرس سایته
http://www.drguity.com

[Saber Mogaddas]

سلام
ابتدا در تگ body دستور width رو خذف کنید و در wraper# دستور margin:0 رو به margin:0 auto تغییر بدید..
با اینکار محتوای شما در وسط صفحه قرار میگیره ، تا اونجایی که من دیدم وب سایت شما تو firefox در سمت چپ و در ie در سمت راست قرار می گرفت که با تغییر دستورات بالا این مشکل حل خواهد شد .. این نقطه ها به چشم خورد اگه مشکل در قسمت های دیگه هم بود بگید تا بررسی شه ..
موفق باشید..

[monika]

دوست عزیز ممنون از راهنماییتون ول من می خوام Wrapperسمت چپ باشه همون طوری که در firefoxنمایش داده میشه.ویک مشکل دیگه این هستش که در کامپیوترهای مختلف سایز صفحه از لحاظ طولی تغییرپیدا می کنه

[Saber Mogaddas]

سلام
دادن عرض به body درست نیست چون شما به wraper عرض دادید اونو حذف کنید و به تگ wraper استایل float:leftرو اضافه کنید..با این دستور تو همه مرورگرها wraper سمت چپ قرار خواهد گرفت..
شما تگ هایی که از نظر ارتفاع مشکل دارند رو بدید تا بررسی شه..من که مشکلی ندیدم..

[monika]

مرسی دوست عزیز این فایل css منه



* {
margin : 0;
padding : 0;
}
body {
padding-top : 0;
font : 11px Tahoma;
background-color : #FEF4E8;

color : #000;
width: 830px;
}


/*WRAP*/
#wrapper
{

width : 797px;

background : #fff ;
margin: 0px;
padding:0px;

height:900px;

}
#right-row

{
height:820px;
width:115px;
background-color:#F5F9FC;
float:right;
}
#logos
{
width:115px;
height: 33px;

}
#artc
{
width:70px;
padding:10px 0px 2px 40px;
font:12px Tahoma;

color: #666;

}
#foot
{
width:141px;
height:38px;
margin-top:0px;
padding-top:0px;
}
/*HEADER*/


#header {
width : 656px;
height : 228px;
float : right;
margin : 0;
background : #fff url('/images/fff.jpg');
color : #666;
}
#mm
{
float:left;
width : 141px;
padding : 0;
border-top : 1px solid #fff;
font-size : 100%;
line-height : 1.8em; margin-bottom:0px;
color : #333;
margin-left: 0;
margin-right: 0;
margin-top: 0;
}

/*NAVIGATION*/
#slide {
width : 141px;
margin : 0 0 26px 0;
}
#footr
{
width:115px;
height:35px;
clear:both;

}
/*SIDEBAR*/
#mm
{
height:1045px;
float:left;
width : 141px;
padding : 0;

font-size : 100%;
line-height : 1.8em;
margin-bottom:0px;
color : #333;
margin-left: 0;
margin-right: 0;
margin-top: 0;
}




#box
{
height:119px;
width:141px;
background: #fff url('/images/37.jpg') repeat-x;
margin:0px;
padding:0px;
padding-top:0px;


}

/*CONTENT*/
#content {
float : left;
width : 541px;

margin : 0;
background-color:#fff;
height:820px;
}
#mr
{
float :right;
width : 115px;
height:320px;

}
#mr ul { padding: 0pt; margin: 0pt 0pt 0pt 0px; list-style-type: none; text-align:center;}
#mr li ul a:hover { color: rgb(51, 51, 51); background-color: rgb(206, 245, 255); width: 140px; background-image: none; }

#k
{
width :540px;
direction:rtl;
text-align:right;
padding-top:5px;

}
/*FOOTER*/
#final
{
background-color:#FEF4E8;
clear : both;
width :797px;
direction:rtl;

}

#f {
clear : both;
width :100%;
padding-left : 5px;
text-align : left;
background:url('/images/bottom_row8.gif');
height:10px;
}
/*TYPOGRAPHY*/
p {
margin : 10px 10px 10px 10px;
color : #666;

}
h1 {
margin : 0;
padding : 20px;
font-size : 9px;

color : #666;
background : inherit;
}
h2 {
margin : 0 50px 0 15px;
padding : 0 0px 0px 15px ;
font-size : 10px;

color : #666;
background : inherit;
}
h3 {
margin : 10px 0 10px 15px;
padding : 0 0 3px 3px;
font-size :14px;
color : #036;
background : inherit;
}

form {
margin: 0px 0px 0px 0px;

}
form p {

color: #666;
}

blockquote {
margin : 10px 20px 10px 15px;
font-weight : bold;
font-style : italic;
color : #b29b35;
}
/*CLASS*/
.img {
margin : 0 0 10px 0;
}
.myborder {
border : 1px solid #fff;
padding : 5px;
margin : 0 0 0 4px;
}
.myimg {
float : left;
border : 1px solid #eee;
padding : 5px;
margin : 5px 10px 10px 4px;
}
.mylogo {
margin-right : auto;
}
/*LINKS*/
a, a:visited {
text-decoration : none;
color : #369;
background : inherit;
}
a:hover {
color : #333;
background : inherit;
}
a img {
border : none;
}
#mm { width: 140px; position: relative; background: none repeat scroll 0% 0% transparent; margin: 0pt; z-index: 888; padding: 0px; }
#mm ul { padding: 0pt; margin: 0pt 0pt 0pt 0px; list-style-type: none; }
#mm a { display: block; color: rgb(51, 51, 51); text-align: right; text-decoration: none; font-size: 11px; font-family: Tahoma; margin: 0px; padding: 0pt 15px 8px 0pt; }
#mm ul li a:hover { color: rgb(57, 39, 27); display: block; background: url('arrow.jpg') no-repeat scroll right center rgb(206, 245, 255); }
#mm ul li { position: relative; color: rgb(221, 221, 221); z-index: 150; }
#mm ul li li a { width: 150px; }
#mm ul li ul { width: 150px; }
#mm li ul { text-indent: 8px; position: absolute; top: 0pt; left: 135px; display: none; padding-left: 10px; z-index: 175; width: 150px; }
#mm li ul ul { padding-left: 0pt; left: 150px; }
#mm li ul a { text-align: left; background-color: rgb(242, 242, 242); padding: 4px 6px; line-height: 16px; border-top: 1px solid rgb(255, 255, 255); font-weight: normal; z-index: 888; }
#mm li ul a:hover { color: rgb(51, 51, 51); background-color: rgb(206, 245, 255); width: 150px; background-image: none; }
div#mm ul ul, div#mm ul ul ul, div#mm ul li:hover ul ul, div#mm ul li:hover ul ul ul { display: none; }
div#mm ul li:hover ul, div#mm ul ul li:hover ul, div#mm ul ul ul li:hover ul { display: block; }

[hossein_rahmani]

سلام به خدمت دوست عزیزم
اگر می خواهید اندازه شما به browser خاصی محدود نشود از درصد در width‌استفاده کنید- اگر این کارهم برای شما سخت است راه آسان تر استفاده از framework های css موجود همچون Blueprint‌است.
به عنوان مثال : width:10%;
یا در فریم فورک class="span-2"
موفق باشید