تفاوت margin در IE و FF

plague · Jul 25, 2010

سلام
سایت من یه sidebar در سمت راست داره که میخام از کنار قالب اصلی یکم بهش فاصله بدم که یکم بیاد وسط
این ساید باره float : right هستش که البته فکر نمیکنم ربطی به این داشته باشه

خلاصه اینکه وقتی بهش مارجین راست میدم توی فایرفاکس اونجایی که میخام قرار میگیره ولی توی ie به اندازه 1 پیکسل عقب یا جلوتره , منم یه عکس برای بکگراند دارم که باید محل ساید بار قیق باشه تا خراب نشه

مشکل از چیه ؟

HTML:

@charset "utf-8";
h1,h2,h3,h4,h5,h6,p {
    margin:0;
}
body  {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
    padding: 0;
    text-align: center;
}
#container {
    width: 800px;
    text-align: left;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    padding-right: 5px;
    padding-left: 5px;
    background-image: url(images/LONG-BACK.gif);
    background-repeat: repeat-y;
    height: 100%;
} 
#header {
    margin: 0px;
    padding: 0px;
    height: 180px;
    background-image: url(images/NEW-HEADER.jpg);
} 
#sidebar1 {
    float: right; /* since this element is floated, a width must be given */
    width: 155px;
    padding-top: 15px;
    background-color: #E5E5E5;
    padding-right: 5px;
    padding-left: 5px;
    text-align: right;
    border-right-width: 2px;
    border-bottom-width: 2px;
    border-left-width: 2px;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #A4A4A4;
    border-right-color: #A4A4A4;
    border-bottom-color: #A4A4A4;
    border-left-color: #A4A4A4;
    margin-right: 2px;
}
#mainContent {
    margin-top: 0;
    margin-right: 180px;
    margin-bottom: 0;
    margin-left: 0;
    padding-top: 0;
    padding-right: 20px;
    padding-bottom: 0;
    padding-left: 20px;
} 
#footer { 
    padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
    background:#DDDDDD; 
} 
#footer p {
    margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
    padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
    float: right;
    margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
    float: left;
    margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

کد:

<!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>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body class="twoColFixRtHdr">

<div id="container">
  <div id="header">

  <!-- end #header -->
  </div>
  
  <div id="sidebar1">
    <h3>Sidebar1 Content</h3>
    <p>The background color on this div will only show for the length of the content. If you'd likt, nibh. Donec nec libero.</p>
  <!-- end #sidebar1 -->
  </div>
  <div id="mainContent">
    <h1> Main Content </h1>
    <p>Lorem ipsum dolor sit amet, consectet nec libero.</p>
    <h2>H2 level heading </h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adt, odio.</p>
    <!-- end #mainContent -->  </div>
  <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
  
  <!-- end #container -->
</div>
</body>
</html>

DaRiOuShJh · Jul 26, 2010

سلام
برادر خسته نباشی!×!

اینکه میگن IE6 بلای طراح های وب هست همینه دیگه

چون خنگ ترین و غیر استاندارد ترین مرورگر تشیف دارن که البته ورژن های جدیدش یه کم کمتر خنگن

برای همین شما باید همیشه در مراحل مختلف طراحی در چند مرورگر مختلف مخصوصا IE 6 تست کنید

IE فاصله ها مخصوصا padding و amrgin رو بیشتر از حد میبینه که همین موضوع برای این موارد و مخصوصا طرح های گرافیکی بد دردسر ایجاد میکنه

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

IE6 style fix

اینجا چند تایی گفته:
http://www.webcredible.co.uk/user-friendly-resources/css/internet-explorer.shtml

من از روشه خودم استفاده میکنم یعنی استایل مجزا برای ورژن 6

سورس بلاگم رو ببینی متوجه میشی:

http://blog.djh.ir

کد:

<style type="text/css">
@import url('http://djh.ir/blog/wp-content/themes/DaRiOuShJh/darioushjh.css') screen, print;
</style>

<!--[if IE]>
	<style type="text/css">
		@import url('http://djh.ir/blog/wp-content/themes/DaRiOuShJh/ie.css');
	</style>

<![endif]-->
برای همین کار رو دوبرابر میکنه و معمولا یه استایل جدا برای این یه دونه مرورگر به داکیومنت الحاق میکنن
میتونی برای هر کدوم هم توی همون استایل فیکس بزاری ولی دردسرش به نظرم از این روش بیشتره و به درد داکیمونت های بزرگ نمیخوره