hi, i make this form, at my radio button, the images have space at the bottom in IE6, what is the caused of that?(fine in Firefox)
i tried margin:0, padding: 0, display: block, but it doest help, is anyone know bout it?
thanks!
i deleted some non relevant code
html (the problems is at line 46):
<!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>test</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>
<div class = "bbs_box"><!-- start bbs_box -->
<div class = "clearfix"><!-- start clearfix -->
<form action = "index.php?ID=bbs" method = "post">
<div id = "bbs_form_box1">
<fieldset>
<label class = "label" for = "bbs_input_name">
Name:
</label>
<span class = "control">
<input type = "text" id = "bbs_input_name" name = "bbs_name" value="" />
</span>
<label class = "label" for = "bbs_input_email">
Email:
</label>
<span class = "control">
<input type = "text" id = "bbs_input_email" name = "bbs_email" value = "" />
</span>
<label class = "label" for = "bbs_input_url">
URL:
</label>
<span class = "control">
<input type = "text" id = "bbs_input_url" name = "bbs_url" value = "" />
</span>
</fieldset>
</div>
<div id = "bbs_form_box2">
<fieldset>
<label class = "label_comment" for = "bbs_textarea_comment">Comment:</label>
<span class = "control_comment"><textarea id = "bbs_textarea_comment" name = "bbs_msg" rows = "4" cols = "25"></textarea></span>
</fieldset>
</div>
<div class = "bbs_form_box3">
<fieldset>
<label class = "label_image" for = "bbs1">
<input class = "radio" type = "radio" id = "bbs1" name = "bbs_img" value = "bbs1.jpg" />
</label>
<span class = "control_image">
<img src = "images/bbs/bbs1.jpg" height = "25px" width = "25px" alt = "bbs1" />
</span>
</fieldset>
<fieldset>
<label class = "label_image" for = "bbs2">
<input class = "radio" type = "radio" id = "bbs2" name = "bbs_img" value = "bbs2.jpg" />
</label>
<span class = "control_image">
<img src = "images/bbs/bbs2.jpg" height = "25px" width = "25px" alt = "bbs2" />
</span>
</fieldset>
<fieldset>
<label class = "label_image" for = "bbs3">
<input class = "radio" type = "radio" id = "bbs3" name = "bbs_img" value = "bbs3.jpg" />
</label>
<span class = "control_image">
<img src = "images/bbs/bbs3.jpg" height = "25px" width = "25px" alt = "bbs3" />
</span>
</fieldset>
</div>
<div id = "submit_post_bbs">
<input type = "submit" name = "bbs_submit" value = "Post It" />
</div>
</form>
</div><!-- end clearfix -->
</div><!-- end bbs_box -->
</body>
</html>
css: (the error i guess is at line 159,224,230)
/* Body
---------------------------------------------------------------------- */
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%; /* Required */
}
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;
}
/* Content
---------------------------------------------------------------------- */
#content {
display: inline;
margin-top: 20px;
margin-bottom: 30px;
float: right;
width: 520px;
padding: 0 0 0 20px;
border-left: 1px solid #000066;
}
#content h1 {
margin: 0;
padding-left: 10px;
padding-top: 3px;
height: 17px;
font-size: 12px;
font-weight: bold;
color: #ffffff;
background: #000066 url(../images/common/title_bar.gif) no-repeat;
}
/* 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;
}
#bbs_form_box2 {
float: left;
margin-right: 0;
margin-left: 6px;
}
.bbs_form_box3 {
width: 520px;
clear: both;
float: left;
margin-top: 5px;
padding: 0;
height: 25px;
}
/* Form Stuffs
------------------------------------------------------- */
form {
margin: 0;
}
fieldset {
float: left;
margin: 0;
padding: 0;
border: none;
}
input, select, textarea {
border-style: solid;
border-width: 1px;
border-color: #aaaa94 #dfdfd6 #dfdfd6 #aaaa94;
color: #999999;
background: #f1f1ed;
}
input.radio {
border-style: none;
color: #000000;
width: 10px;
height: 9px;
background: transparent;
}
.label {
clear: both;
display: block;
padding-bottom: 0.5em;
padding-top: 0.8em;
float: left;
width: 35px;
line-height: 1em;
}
.control {
display: block;
margin: 0 5px 0 40px;
padding-top: 0.5em;
padding-bottom: 1em;
}
.label_comment {
clear: both;
display: block;
padding-bottom: 0.5em;
padding-top: 0.5em;
float: left;
line-height: 1em;
}
.control_comment {
display: block;
clear: left;
margin: 0;
padding-bottom: 1em;
}
.label_image {
margin: 0;
padding: 0;
display: block;
float: left;
}
.control_image {
padding: 0;
border: 1px solid #000066;
display: block;
margin-top: 0;
margin-bottom: 0;
margin-left: 13px;
margin-right: 8px;
width: 25px;
height: 25px;
}
/* Width settings of input parts
------------------------------------------------------- */
#bbs_input_name, #bbs_input_email, #bbs_input_url {
width: 220px;
}
#bbs_textarea_comment {
width: 240px;
height: 70px;
}
/* Transmission button
------------------------------------------------------- */
#submit_search input {
margin-top: 8px;
float: right;
border-width: 1px;
border-color:#dfdfd6 #aaaa94 #aaaa94 #dfdfd6;
width: 5em;
color: #999999;
font-size: 10px;
background: #dfdfdf;
}
#submit_post_bbs input {
margin-top: 10px;
float: right;
border-width: 1px;
border-color:#dfdfd6 #aaaa94 #aaaa94 #dfdfd6;
width: 5.2em;
color: #999999;
background: #dfdfdf;
}
i attached the problems links too,
html:
http://www.nanaku4design.com/problem/bbs.html
css:
http://www.nanaku4design.com/problem/css/base.html
thanks!
