Why is the margin not displaying correctly? I noticed a 4px difference in Chrome in the box_news element. I read something about rest.css but I'm not sure if it will be helpful in my situation.
This is the code on the right side:
<div class="rightside">
<div class="box_news">
<h1>الاخبار</h1>
<div class="centerIt">
<div class="readmore"><a href="#">مزيد من الاخبار</a></div>
</div>
<br><br>
</div>
<div class="box1">
<h1>آخر معارض الصور</h1>
<table align="center">
<tbody><tr>
<td align="center"><img width="140" height="110" src="./Chrome_files/illaf693012853.jpg" alt="alt">
</td>
</tr>
<tr>
<td align="center">
<a class="gallery" href="http://domain.com/ictproject/site/gallery?gal_id=13">اللاذقية 2013: مساعد ممارس في البرمجة اللغوية العصبية</a><br>2013-03-03</td>
</tr>
</tbody></table>
<table align="center">
<tbody><tr>
<td align="center"><img width="140" height="110" src="./Chrome_files/illaf654896994.jpg" alt="alt">
</td>
</tr>
<tr>
<td align="center">
<a class="gallery" href="http://domain.com/ictproject/site/gallery?gal_id=5">دورة المغرب الصور الكاملة </a><br>0000-00-00</td>
</tr>
</tbody></table>
<table align="center">
<tbody><tr>
<td align="center"><img width="140" height="110" src="./Chrome_files/illaf906907216.jpg" alt="alt">
</td>
</tr>
<tr>
<td align="center">
<a class="gallery" href="http://domain.com/ictproject/site/gallery?gal_id=12">اللاذقية 2012: دبلوم البرمجة اللغوية العصبية (2)</a><br>0000-00-00</td>
</tr>
</tbody></table>
<div class="centerIt">
<div class="readmore"><a href="http://domain.com/ictproject/site/Galleries">مزيد من المعارض</a></div>
</div>
</div>
</div>
CSS :
.rightside {
display: block;
padding-top: 0;
position: relative;
width: 215px;
}
.box1{
display: block;
position: relative;
background: none repeat scroll 0 0 #FFFFFF;
border-radius: 5px 5px 5px 5px;
box-shadow: 0 0 2px #cccccc;
color:#666666;
font-family: DroidKufi-Regular;
font-size:12px;
width: 98%;
margin-top: -27px;
}
.box1 p {font-size:12px; text-align: right; color:#666666;}
.box1 a { text-shadow: 1px 1px 1px gray; color:#1570a6; }
.box1 a:hover { color:#49a4da; }
.box1 H1{
color:#1570a6;
font-family: DroidKufi-Regular;
font-size:14px;
border-bottom:thin #eee solid;
text-shadow: 0px 0px 0px gray;
padding:5px;
}
.box_news{
margin-top: -27px;
background: none repeat scroll 0 0 #FFFFFF;
border-radius: 5px 5px 5px 5px;
box-shadow: 0 0 2px #cccccc;
color:#666666;
font-family: DroidKufi-Regular;
font-size:12px;
width: 98%;
margin-bottom: 10px;
height: 100%;
}
.box_news H1{
color:#8b9801;
font-family: DroidKufi-Regular;
font-size:14px;
border-bottom:thin #eee solid;
text-shadow: 0px 0px 0px gray;
padding:5px;
}
.news_title{
color:#8b9801;
font-family: DroidKufi-Regular;
font-size:11px;
text-shadow: 0px 0px 0px gray;
padding:0px;
}
.news_title a{
color:#8b9801;
}
.news_title a:hover{
color:#;
text-shadow: 1px 1px 1px #EEE;
}
.news_time{
color:#cccccc;
font-family: DroidKufi-Regular;
font-size:10px;
border-bottom:thin #eee solid;
text-shadow: 0px 0px 0px gray;
padding:0 10 0 0px;
}
.readmore{
display:block;
width:110px;
height:24px;
font-size:12px;
background:url(../images/readmore.png) no-repeat center;
font-family:DroidKufi-Regular;
text-align:center;
color:#FFF;
padding:4 0 0 5px;
margin:4px;
}
.readmore a{color:#FFF;}
.readmore a:hover{text-shadow: 2px 2px 2px #0a4e76;}
Firefox
Chrome
I would greatly appreciate any assistance. Thank you in advance.