Forum Moderators: not2easy
the problem is all the browser looks fine(i use firefox,safari to view it),but when i use my fren computer,
i saw some odd things, the 'diary_msg' the margin-top doest show up. (the msg "This past summer..." continue after the title "Cool Diary Store")
is there any reason?
here is part of the code in my css for the content part
#content {
margin: 0;
float: left;
width: 519px;
padding: 0 0 0 20px;
border-left: 1px solid #000066;
font-family: arial;
}
#content h1 {
margin: 0;
padding-left: 10px;
padding-top: 2px;
height: 18px;
font-size: small;
color: #ffffff;
background: #000066 url(../images/title_bar.gif) no-repeat;
}
.content_box {
margin: 0;
padding: 10px 0 10px 0;
height: 90px;
width: 520px;
border-width: 1px;
border-color: #000066;
border-style: none none dotted none;
}
.diary_img {
float: left;
margin-right: 10px;
}
.diary_date {
float: left;
margin-right: 10px;
padding-left: 24px;
font-weight: bold;
font-size: small;
background: url(../images/clock_icon_s.gif) left center no-repeat;
}
.diary_title {
float: left;
padding-left: 26px;
font-weight: bold;
font-size: small;
background: url(../images/title_icon_s.gif) left center no-repeat;
}
.diary_msg {
margin-left: 220px;
margin-top: 25px;
line-height: 1;
font-size: x-small;
}
.diary_more {
margin-left: 445px;
margin-top: 10px;
padding-left: 22px;
color: #999999;
background: url(../images/more_icon_s.gif) left center no-repeat;
font-size: x-small;
}
and then the html part would be
<div id = "pagebody">
<div id = "content">
<h1>:: Diary</h1><div class = "content_box">
<div class = "diary_img"><img src = "images/img210x90.gif" alt = "" />
</div>
<div class = "diary_date">12-12-2006</div>
<div class = "diary_title">Cool Diary Store</div>
<div class = "diary_msg">
This past summer, Thirty-four artists from various international cities and backgrounds were invited to create one of a kind sets of slip. It is backgrounds were invited to create one of a. back a were invited to create one of a.
</div>
<div class = "diary_more">read more</div>
</div>
</div>
so if you have a div with margin-bottom:10px on top of another div with margin-top:10px, then they will be merged together to create... 10px.
old browsers will honour both values though. so you would see a margin of 20px in those.