CODEWITHSUNDEEP
htmlcsseditorstylesdreamweaver
bonny
bonny

Reputation: 3247

specific editor settings for css?

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:

original code

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:

cs6 problem

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:

enter image description here

and entering the same code on jsfiddle will result:

this

Upvotes: 0

Views: 120

Answers (1)

Andrew Morris
Andrew Morris

Reputation: 1652

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

* {
    margin:0;
    padding:0;
}

Upvotes: 1

Related Questions