Forum Moderators: not2easy

Message Too Old, No Replies

margin top is not appear in IE7

         

nanacss

3:47 am on Jul 27, 2007 (gmt 0)

10+ Year Member



hi, i have some problems for my css, i wish anybody who knows could help me out or give me some guides. thanks.

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>

londrum

8:24 pm on Jul 28, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



if you have two margins butting up against each other, then most modern browsers will merge them together.

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.

nanacss

3:18 pm on Jul 29, 2007 (gmt 0)

10+ Year Member



i see.
thank you very much for your reply.
i got it fix :-)