hi, i have some floating problems in IE, here is my question:
my “bbs_name”, “bbs_date”, “bbs_msg”, “bbs_img”, and “bbs_url” are in the right position,
which is what i want, but my “bbs_email” seems not in the position i want.
the “bbs_email” suppose to be in the same line as the “bbs_url”, but it is not in IE6 (it is fine in Firefox)
when my “bbs_msg” is long (has many text), my “bbs_email” is then same line as the “bbs_url”,
i know this is mayb a very simple problems…but i just dunno what kind of problem is this,i would be really appreciate if someone knows could tell me, thanks a lot.
html: (at line 25 and 26)
<!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=gb2312" />
<title>Siew Na Kooy's Portfolio</title>
<link rel = "stylesheet" href = "css/version4.css" type = "text/css" />
<link rel = "stylesheet" href = "css/import.css" type = "text/css" media = "screen,print" />
</head>
<body>
<a name = "top"></a>
<div id = "wrapper">
<div id = "pagebody" class = "clearfix">
<div class = "bbs_box">
<div class = "clearfix">
<div class = "bbs_date">2002-12-12</div>
<div class = "bbs_name">nana</div>
<div class = "bbs_img"><img src = "./images/bbs/bbs1.jpg" height = "50" width = "50" alt = "bbs1" /></div>
<div class = "bbs_msg">test</div>
<div class = "bbs_url"><a href = "">visit me</a></div>
<div class = "bbs_email"><a href = "">mail me</a></div>
</div>
</div>
<div class = "bbs_box">
<div class = "clearfix">
<div class = "bbs_date">2002-12-12</div>
<div class = "bbs_name">nana</div>
<div class = "bbs_img"><img src = "./images/bbs/bbs1.jpg" height = "50" width = "50" alt = "bbs1" /></div>
<div class = "bbs_msg">this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test</div>
<div class = "bbs_url"><a href = "">visit me</a></div>
<div class = "bbs_email"><a href = "">mail me</a></div>
</div>
</div>
</div><!-- end of content -->
</div><!-- end of pagebody -->
</div><!-- end of wrapper -->
</body>
</html>
css:at line 90 and 106
/* Body
---------------------------------------------------------------------- */
body {
font-size: 11px;
font-family: Arial;
color: #000066;
background: #ffffff url(../images/common/bg.gif) repeat-y;
}
#wrapper {
width: 720px;
text-align: left;
position: relative;
min-height: 100%; /* For Modern Browsers */
height: auto !important; /* For Modern Browsers */
height: 100%; /* For IE */
}.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
/* Page Body
---------------------------------------------------------------------- */
#pagebody {
width: 700px;
padding-left: 10px;
}
#pagebody:after {
clear: both;
display: block;
font: 1px/0px serif;
content: ".";
height: 0;
visibility: hidden;
}
/* BBS
------------------------------------------------------- */
.bbs_box {
padding: 0 0 10px 0;
margin-top: 10px;
width: 520px;
border-width: 1px;
border-color: #000066;
border-style: none none dotted none;
}
.bbs_box p {
color: red;
padding-bottom: 5px;
font-size: 10px;
}
.bbs_date {
margin-right: 10px;
margin-bottom: 10px;
float: left;
padding-left: 24px;
font-weight: bold;
font-size: 12px;
background: url(../images/common/clock_icon_s.gif) left center no-repeat;
}
.bbs_name {
float: left;
margin-bottom: 10px;
padding-left: 21px;
font-weight: bold;
font-size: 12px;
background: url(../images/common/name_icon_s.gif) left center no-repeat;
}
.bbs_img {
clear: both;
float: left;
margin-right: 10px;
border: 1px solid #000066;
}
.bbs_msg {
margin-bottom: 5px;
float: left;
width: 450px;
line-height: 1.2;
overflow: hidden;
}
.bbs_url {
display: inline;
clear: both;
float: left;
margin-left: 60px;
padding-left: 26px;
color: #999999;
width: 90px;
background: url(../images/common/link_icon_s.gif) left center no-repeat;
}
.bbs_url a {
color: #999999;
}
.bbs_url a:hover {
color: #ff6666;
}
.bbs_email {
float: right;
padding-left: 23px;
color: #999999;
background: url(../images/common/email_icon_s.gif) left center no-repeat;
}
.bbs_email a {
color: #999999;
}
.bbs_email a:hover {
color: #ff6666;
}
#bbs_form_box1 {
float: left;
height: 110px;
margin: 0;
}
just in case, this is the link:
html: http://www.nanaku4design.com/problem/bbs2.html
css: http://www.nanaku4design.com/problem/css/base.css
