Avatar billede tipsen Nybegynder
18. marts 2002 - 00:06 Der er 3 kommentarer og
1 løsning

IE6 problemer med centrering!

Jeg har følgende en formular, som er styret primært af styles:

<form action="processform.php" method="post" ONSUBMIT="return validateform()">
    <table class="tblfrm">
        <tr>
            <th colspan="2">Send me an email:</th>
        </tr>
        <tr>
            <td nowrap width="100px">Your name:</td>
            <td><input type="text" name="name" onmouseover="msover_field(this)" onmouseout="msout_field(this)" onfocus="fieldfocus(this)" onblur="fieldblur(this)"></td>
        </tr>
        <tr>
            <td nowrap>Your email:</td>
            <td><input type="text" name="email" onmouseover="msover_field(this)" onmouseout="msout_field(this)" OnChange="validateEmail()" onfocus="fieldfocus(this)" onblur="fieldblur(this)"></td>
        </tr>
        <tr>
            <td nowrap>Subject:</td>
            <td><input type="text" name="subject" onmouseover="msover_field(this)" onmouseout="msout_field(this)" onfocus="fieldfocus(this)" onblur="fieldblur(this)"></td>
        </tr>
        <tr>
            <td nowrap valign="top">Message:</td>
            <td><textarea name="message" onMouseOver="msover_field(this)" onMouseOut="msout_field(this)" onFocus="fieldfocus(this)" onBlur="fieldblur(this)">Type your message here!</textarea></td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="reset" name="reset" value="Delete Email" id="reset" onclick="ClearFields()    ">
                <input type="submit" name="submit" value="Send Email" id="submit">
            </td>
        </tr>
    </table>
</form>

Jeg benytter følgende stylesheet til at styre det:

table.tblfrm {
    margin-left : 20%;
    margin-right : 20%;
    width : 60%;
}

table.tblfrm th {
    background : #003300;
    border-bottom-color : #33CC33;
    border-bottom-style : solid;
    border-bottom-width : 1px;
    border-top-color : #33CC33;
    border-top-style : solid;
    border-top-width : 1px;
    font-weight : bold;
    padding : 3px;
    text-align : left;
    white-space : nowrap;
}

table.tblfrm input {
    width : 100%;
    background-color : transparent;
    border : none;
    border : 1px solid #006600;
    color : #33CC33;
}

table.tblfrm textarea {
    width : 100%;
    height: 100px;
    background-color : transparent;
    color : #33CC33;
    border : 1px solid #006600;
    overflow: auto;
    /* kun > IE5.5 */
    scrollbar-arrow-color: #33CC33;
    scrollbar-3d-light-color: #FF33FF;
    scrollbar-base-color: #003300;
    scrollbar-face-color: #003300;
    scrollbar-highlight-color: #33CC33;
    scrollbar-darkshadow-color: #006600;
    scrollbar-shadow-color: #33CC33;
}

#reset, #submit {

    border:1px outset #33CC33;
    color:#33CC33;
    width:140px;
    margin-top : 20px;
}
#reset {
    background: #003300 url("../images/thmbnew.png") no-repeat 0% 50%;
    float:left;
}
#submit {
    background: #003300 url("../images/thmbmail.png") no-repeat 0% 50%;
    float:right;
}

Mit problem er at i IE6 har den et problem med at centrere tabellen - det virker lidt tilfældigt hvornår den har lyst til at centrere og hvornår den aligner tabellen ude i venstresiden!

Hvis jeg resizer vinduet, hopper tabellen frem og tilbage mellem venstre kant og midten...

Det virker fint i NN6.2 og en tilsvarende formular som benytter de samme styles fungerer også fint!!!

Er der nogen som kan se, hvad problemet kan skyldes!?

Laver jeg slamkode - er der en nemmere vej - bryder jeg nogle gyldne css-love eller er IE6 bare dårlig...

Spørgsmålene hober sig op - følg med i næste afsnit, hvor vi forhåbentlig får nogle svar!
Avatar billede oasen Nybegynder
18. marts 2002 - 03:36 #1
Nogle gange er der problemer med at justere objekter v.h.a. CSS, hvorfor man af og til bliver nød til at definere dette i selve html-filen.
Har du prøvet med:

<table align="center" class="tblfrm">

og

table.tblfrm {
    width : 60%;
}

Virker dette ikke kan du jo blive nødt til at bruge det forældede <center></center> omkring tabellen. Det skulle virke i alle browsere. Bl.a. er Opera ikke altid så glad for at adlyde CSS-kommandoer.
Avatar billede oasen Nybegynder
18. marts 2002 - 04:35 #2
Fungerer det, hvis du sætter en <div> uden om tabellen?

<div id="centrermig">
<table>
<tr>
<td>Bla bla bla</td>
</tr>
</table
</div>

og

#centrermig {
  text-align: center;
}
Avatar billede tipsen Nybegynder
19. marts 2002 - 13:11 #3
oasen: Undskyld, men jeg synes det virker lidt som en høkerløsning at kombinere html-tags og style-sheets på den første måde du foreslår...

Men en modfikation af den anden metode gav mig (vist nok) en fungerende løsning!

Tak for hjælpen!
Avatar billede oasen Nybegynder
19. marts 2002 - 20:13 #4
Selv tak :) Ja, jeg ville også gerne kunne klare det hele med CSS, men har måtte konstatere, at ikke alle browsere (endnu!) er glade for ALLE kommandoer...
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester