Geneste weergave | Lineaire weergave

decrypt · 02-03-2010 17:26:05

In een form krijg ik de submitbutton (Begin Gesprek) niet in het midden uitgelijnd in Internet. Explorer 8.
Firefox werkt prima.

Zou iemand eens kunnen kijken wat ik hier fout doe? Want ik raak een beetje uit opties.

http://www.rjdevries.eu/chat/

Alvast erg bedankt!

Jasper · 02-03-2010 17:32:37

#innerFooter {
width: zoveel;
margin: 0 auto;
text-align: center;
}

decrypt · 02-03-2010 20:52:58

Het is net alsof er iets fout is wat deze mogelijkheid fout laat uitpakken. Want de button blijft aan de linker zijde staan helaas.

Jasper · 02-03-2010 21:12:57

Hmm... en als je text-align: center; en een breedte ook nog eens meegeeft aan #footer?

atimmer · 02-03-2010 21:56:10

(02-03-2010 21:12:57)Jasper schreef: Hmm... en als je text-align: center; en een breedte ook nog eens meegeeft aan #footer?

als je het met firebug probeert kun je een hole in one slaan

En dan kan dat vraagteken ook weg

Ikke · 02-03-2010 22:25:37

Probleem is dat het in Firefox goed werkt, maar in IE niet, dus heb je niks aan firebug

(IE heeft trouwens ook een developers console oid).

atimmer · 02-03-2010 22:42:30

Kan met IETab

Ikke · 02-03-2010 22:44:33

Maar dan werkt Firebug niet goed meer (nog nooit gewerkt) Dan krijg je de IEtab te zien.

Neophyte · 03-03-2010 08:06:22

probeer is width: auto in de #footer te vervangen met width: 100%;

decrypt · 03-03-2010 10:35:01

Shit dat werkt ook niet. Bedankt voor jullie reacties iig. Ik zit nu al weer een tijdje te puzzelen en snap er helemaal niks meer van.

Ik heb de html-code even samengevat zodat het misschien wat overzichtelijker wordt.

PHP-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>rjChat</title>
<style type="text/css">
@charset "utf-8";
/* CSS Document */


#page{
    background-color:#F4F7E7;
} 

#container {
    background-color: #F4F7E7;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border: 5px solid #94CE18;
    margin-top: 75px;
    margin-left:auto;
    margin-right:auto;
    width: 420px;
}

h1{
    font-size:30px;
    text-shadow:inherit;
    text-align:center;
    margin-bottom:20px;
    color:#FFFFFF;
    font-family:Tahoma, Geneva, sans-serif;
}

#header {
    -moz-border-radius-topleft: 14px;
    -webkit-border-top-left-radius: 14px;
    -moz-border-radius-topright: 14px;
    -webkit-border-top-right-radius: 14px;
    border-bottom: 5px solid #3793d1;
    padding: 10px;
    height:50px;
    background-color:#333333;
}

#content {
    background-color:#F4F7E7;
    height: 150px;
    padding: 10px; 
}

#footer{
    -moz-border-radius-topleft: 15px;
    -webkit-border-top-left-radius: 15px;
    -moz-border-radius-topright: 15px;
    -webkit-border-top-right-radius: 15px;
    -moz-border-radius-bottomleft: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -moz-border-radius-bottomright: 3px;
    -webkit-border-bottom-right-radius: 3px;
    border: 2px solid #94CE18;
    width: auto;
    height: 50px;
    background-color:#94CE18;
    /* padding: 3px;
    padding-left: 3px;
    padding-right: 3px;
    padding-top: 3px;
    padding-bottom: 3px;*/
}

#innerFooter {
border: 2px solid #FFFFFF;
background-color:#94CE18;
width: auto; /*410px; */
margin: 0 auto;
text-align: center;
}

/*#innerFooter {
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    -khtml-border-radius: 15px;
    border: 2px solid #FFFFFF;
    background-color:#94CE18;
    height: 47px;
    margin-top: 2px;
}*/



/* Form Style */

html, body, form, fieldset, legend, ol, li {
    background-color:#F4F7E7;
    margin: 0;
    padding: 0;
    }

body {
    padding: 0px;
}

form#clientStart {
    background: #F4F7E7;                                /* #9cbc2c; */
    counter-reset: fieldsets;
    margin-top: 20px;
    margin-left: auto; /* plaatst deze in het midden */
    margin-right: auto; /* plaatst deze in het midden */
    width: auto; /* 400px */
}
        
form#clientStart fieldset {
    border: none;
    margin-bottom: 10px;
}
        
form#clientStart ol li {
    background: #94CE18;
    background: rgba(148,206,24,.7);
    border-color: #3793d1;
    border-style: solid;
    border-width: 3px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    line-height: 30px;
    list-style: none;
    padding: 5px 10px;
    margin-left: 25px;
    margin-right: 25px;
    margin-bottom: 10px;
}
                            
form#clientStart label {
    float: left;
    margin-top: 6px;
    font: 14px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    /*font-size: 13px; */
    width: 110px;
}
    
form#clientStart input {
    background: #FFFFFF;
    border: none;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 3px;
    font: 14px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    outline: none;
    padding: 5px;
    width: 200px;
}
                    
form#clientStart button {
    background: #384313;
    border: none;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 20px;
    color: #ffffff;
    display: block;
    font: 18px Georgia, "Times New Roman", Times, serif;
    letter-spacing: 1px;
    margin-top: 4px;
    margin-left: auto;
    margin-right: auto;
    padding: 8px 25px;
    text-shadow: 0 1px 1px #000000;
    text-transform: uppercase;
}

/*#submitButton {
    background: #333333;
    border: none;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 20px;
    color: #ffffff;
    display: block;
    font: 18px Georgia, "Times New Roman", Times, serif;
    letter-spacing: 1px;
    margin-left: auto; margin-right: auto;
    margin: auto;
    padding: 7px 25px; 
    text-shadow: 0 1px 1px #000000;
    text-transform: uppercase;
}*/

form#clientStart button:hover {
    background: #3793d1; /* #1e2506; */
    cursor: pointer;
}
</style>

</head>
<body onLoad="document.form.formUserName.focus()">
    <div id="page">
        <div id="container">
            <div id="header"><h1>rjChat Support</h1></div>
            <form id=clientStart name="form" target="" METHOD=POST>
                <div id="content">
                    <ol>
                        <li>
                            <label for=name>Je naam</label> <input id=name name="formUserName" maxlength="30" type=text placeholder="Voornaam" required autofocus>
                            </li>
                        <li>
                            <label for=email>Onderwerp</label> <input id=email name="formSubject" maxlength="50" placeholder="example@domain.com" required>
                        </li>
                    </ol>
                </div>
                <div id="footer">
                    <div id="innerFooter">
                                <button name="formSubmit" type=submit>Begin Gesprek!</button>
                       </div>
                </div>
            </form>
        </div>
    </div>
</body>
</html> 

IETab werkt inderdaad niet goed aangezien de button bij het openen via ietab wel in het midden staat.

Neophyte · 03-03-2010 10:56:11

geef #content eens een overflow: hidden

decrypt · 03-03-2010 11:02:11

(03-03-2010 10:56:11)Neophyte schreef: geef #content eens een overflow: hidden

Lijkt geen verschil te maken.

Jasper · 03-03-2010 11:52:09

hier dan

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />

<title>rjChat</title>

<style type="text/css">

* {margin: 0; padding: 0;}

#page{

    background-color:#F4F7E7;

} 

#container {

    background-color: #F4F7E7;

    -moz-border-radius: 20px;

    -webkit-border-radius: 20px;

    -khtml-border-radius: 20px;

    border: 5px solid #94CE18;

    margin-top: 75px;

    margin-left:auto;

    margin-right:auto;

    width: 420px;

}

h1{

    font-size:30px;

    text-shadow:inherit;

    text-align:center;

    margin-bottom:20px;

    color:#FFFFFF;

    font-family:Tahoma, Geneva, sans-serif;

}

#header {

    -moz-border-radius-topleft: 14px;

    -webkit-border-top-left-radius: 14px;

    -moz-border-radius-topright: 14px;

    -webkit-border-top-right-radius: 14px;

    border-bottom: 5px solid #3793d1;

    padding: 10px;

    height:50px;

    background-color:#333333;

}

#content {

    background-color:#F4F7E7;

    height: 150px;

    padding: 10px; 

}

#footer{

    -moz-border-radius-topleft: 15px;

    -webkit-border-top-left-radius: 15px;

    -moz-border-radius-topright: 15px;

    -webkit-border-top-right-radius: 15px;

    -moz-border-radius-bottomleft: 3px;

    -webkit-border-bottom-left-radius: 3px;

    -moz-border-radius-bottomright: 3px;

    -webkit-border-bottom-right-radius: 3px;

    border: 2px solid #94CE18;

    width: 410px;

    height: 50px;

    background-color:#94CE18;

    text-align: center;

}

#innerFooter {

border: 2px solid #FFFFFF;

background-color:#94CE18;

width: 410px;

margin: 0 auto;

text-align: center;

}

/* Form Style */

html, body, form, fieldset, legend, ol, li {

    background-color:#F4F7E7;

    margin: 0;

    padding: 0;

    }

body {

    padding: 0px;

}

form#clientStart {

    background: #F4F7E7;                                /* #9cbc2c; */

    counter-reset: fieldsets;

    margin-top: 20px;

    margin-left: auto; /* plaatst deze in het midden */

    margin-right: auto; /* plaatst deze in het midden */

    width: auto; /* 400px */

}

form#clientStart fieldset {

    border: none;

    margin-bottom: 10px;

}

form#clientStart ol li {

    background: #94CE18;

    background: rgba(148,206,24,.7);

    border-color: #3793d1;

    border-style: solid;

    border-width: 3px;

    -moz-border-radius: 5px;

    -webkit-border-radius: 5px;

    -khtml-border-radius: 5px;

    border-radius: 5px;

    line-height: 30px;

    list-style: none;

    padding: 5px 10px;

    margin-left: 25px;

    margin-right: 25px;

    margin-bottom: 10px;

}

form#clientStart label {

    float: left;

    margin-top: 6px;

    font: 14px "Lucida Sans Unicode", "Lucida Grande", sans-serif;

    /*font-size: 13px; */

    width: 110px;

}

form#clientStart input {

    background: #FFFFFF;

    border: none;

    -moz-border-radius: 3px;

    -webkit-border-radius: 3px;

    -khtml-border-radius: 3px;

    border-radius: 3px;

    font: 14px "Lucida Sans Unicode", "Lucida Grande", sans-serif;

    outline: none;

    padding: 5px;

    width: 200px;

}

form#clientStart button {

    background: #384313;

    border: none;

    -moz-border-radius: 20px;

    -webkit-border-radius: 20px;

    -khtml-border-radius: 20px;

    border-radius: 20px;

    color: #ffffff;

    display: inline-block;

    padding: 8px 25px;

    font: 18px Georgia, "Times New Roman", Times, serif;

    letter-spacing: 1px;

    text-align: center;

    text-shadow: 0 1px 1px #000000;

    text-transform: uppercase;

}

form#clientStart button:hover {

    background: #3793d1; /* #1e2506; */

    cursor: pointer;

}

</style>

</head>

<body onLoad="document.form.formUserName.focus()">

    <div id="page">

        <div id="container">

            <div id="header"><h1>rjChat Support</h1></div>

            <form id=clientStart name="form" target="" METHOD=POST>

                <div id="content">

                    <ol>

                        <li>

                            <label for=name>Je naam</label> <input id=name name="formUserName" maxlength="30" type=text placeholder="Voornaam" required autofocus>

                            </li>

                        <li>

                            <label for=email>Onderwerp</label> <input id=email name="formSubject" maxlength="50" placeholder="example@domain.com" required>

                        </li>

                    </ol>

                </div>

                <div id="footer">

                    <div id="innerFooter">

                                <button name="formSubmit" type="submit">Begin Gesprek!</button>

                    </div>

                </div>

            </form>

        </div>

    </div>

</body>

</html>

decrypt · 03-03-2010 14:33:51

HET WERKT! Bedankt man!

Jasper · 03-03-2010 14:40:32

you're welcome

Geneste weergave \| Lineaire weergave Submit button niet in het midden met IE8
Auteur	Bericht