hello i have a problem using my editor. i’m using dreamweaver cs6 and would like to use a fieldset.
the problem with that is that i tried to implement my original code from here:
where i thought it used to be same style in my editor. but it is not the same as in the example. as a result i will get this:
as you can see on left hand side it seems to be that there are automatically added tabs in there so that the input fields not flushes with the dark frame.
if there is someone who could tell me how to solve this i really would appreciate. thanks a lot.
UPDATE:
the picture above is what i will see in dreamweaver.
when i publish it on my webserver with that code:
<!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=UTF-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
#left {
height: 400px;
width: 500px;
float: left;
border: solid 2px #f23;
}
#left #frame {
background-color:#444444;
height: 337px;
width: 440px;
margin-top: 36px;
}
#left #frame form fieldset {
height: 337px;
width: 440px;
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
display: block;
border: none;
}
#left #frame form fieldset h1 {
margin-top: 15px;
font-size: 16px;
font-weight: bold;
margin-left: 10px;
}
#left #frame form fieldset h2 {
font-size: 13px;
font-weight:lighter;
margin-left: 10px;
margin-top: 3px;
}
#left #frame form fieldset ul {
list-style-type: none;
margin-top: 30px;
}
#left #frame form fieldset ul .fl label {
font-size: 12px;
color: #ECECEC;
font-weight: bolder;
width: 80px;
margin-bottom: 2px;
}
#left #frame form fieldset ul .fr label {
font-size: 12px;
color: #ECECEC;
font-weight: bolder;
width: 80px;
margin-bottom: 2px;
}
#left #frame form fieldset ul input {
color: #444444;
font-size: 10px;
width: 180px;
height: 18px;
padding-left: 5px;
outline:none;
}
#left #frame form fieldset ul .fl {
width: 180px;
float: left;
margin-bottom: 15px;
background-color: #f23;
margin-left: 0px;
}
#left #frame form fieldset ul .fr {
width: 180px;
float: right;
margin-bottom: 15px;
background-color: #0F6;
margin-right: 0px;
}
</style>
</head>
<body>
<div id="left">
<div id="frame">
<form action="" method="post">
<fieldset>
<h1>Text 1</h1>
<h2>text 2</h2>
<ul>
<li class="fl">
<label for="label1">Label 1</label>
<input type="text" id="label1" name="label1" tabindex="10" autocomplete="off">
</li>
<li class="fr">
<label for="label2">Label 2</label>
<input type="text" id="label2" name="label2" tabindex="20" autocomplete="off">
</li>
<li class="fl">
<label for="label3">Label 3</label>
<input type="text" id="label3" name="label3" tabindex="30" autocomplete="off">
</li>
<li class="fr">
<label for="label4">Label 4</label>
<input type="text" id="label4" name="label4" tabindex="40" autocomplete="off">
</li>
<li class="fl">
<label for="label5">Label 5</label>
<input type="text" id="label5" name="label5" tabindex="50" autocomplete="off">
</li>
<li class="fr">
<label for="label6">Label 6</label>
<input type="text" id="label6" name="label6" tabindex="60" autocomplete="off">
</li>
</ul>
</fieldset>
</form>
</div>
</div>
</body>
</html>
i will get as a result:
and entering the same code on jsfiddle will result:
It will probably be an automatic padding/margin issue, try 0’ing out all your values as the first thing you do, then you can set the values as you want