[IE] Omgang van <form> tags in een <table>

[Joshua]

Ik heb een probleem met een <form> en de ruimte eronder in IE.

Ik wil een <form> verwerken in een <table> maar telkens als ik dat doe en dan eronder een stuk tekst doe (dus onder de </form>) krijg ik in IE meer ruimte dan dat ik dat bijvoorbeeld krijg in FireFox..

Ik heb totaal geen idee hoe ik dit moet oplossen (heb al geprobeer de height van de desbetreffende <td> waar de <form> instaat aan te geven maar ook dit helpt niet.

Hieronder een voorbeeld van de code die ik gebruik: (zonder dat ik de <td> een height meegeef)

HTML:

<table width="200px">
    <tr>
        <td>
        Zoeken
        </td>
    </tr>
    <tr>
        <td>
        <center>
        <form action="index.php?cont=search" method="post">
            <input name="search" /> &nbsp; <br />
            &nbsp; <br />
            <input class="button" name="submit" type="submit" value="Zoeken" /> &nbsp;&nbsp; <input class="button" name="reset" type="reset" value="Wissen" /> &nbsp; <br />
            &nbsp; <br />
        </form>
        </center>
        </td>
    </tr>
    <tr>
        <td>
        Tekst eronder (dit doe ik aangezien deze td een andere class meekrijgt uiteindelijk)
        </td>
    </tr>
</table>

Ik hoop beetje duidelijk te zijn waar ik op uit ben aangezien ik niet zo goed ben in het uitleggenv an dingen

[ Voor 20% gewijzigd door Joshua op 09-07-2006 01:56 ]

[B-Man]

Is het niet zo (het is maar een gokje) dat firefox FORMs misschien een andere margin-bottom meegeeft dan IE?

Wat gebeurt er als je op de FORM tag style="margin-bottom:0px" aangeeft?

[Joshua]

B-Man schreef op zondag 09 juli 2006 @ 02:05:
Is het niet zo (het is maar een gokje) dat firefox FORMs misschien een andere margin-bottom meegeeft dan IE?

Wat gebeurt er als je op de FORM tag style="margin-bottom:0px" aangeeft?

Jah! dat was het! het werkt!

Thanks a lot (zo zie ik maar weer eens hoe weinig ik er nog vanaf weet)

[B-Man]

Ben het zelf ook wel eens tegengekomen, vandaar dat ik eraan dacht. Het zijn van die kleine dingen die tussen browsers verschillen.

Weer een tweaker geholpen

[Technicality]

Ook voor in de toekomst: het zijn meestal de margins of de paddings van elementen binnen elementen die dit soort dingen veroorzaken. Een ander voorbeeld is een h1 element in een div (bijvoorbeeld als header).

[BalusC]

Even browser-default ruimtes op nul zetten:

Cascading Stylesheet:

* {
    margin: 0px;
    padding: 0px;
    border: 0px;
}

dan kun je het zélf per element/style instellen

[Rowanov]

Dat is ook niet alles en kost negen van de tien keer lappen code, die anders onnodig waren. Daarnaast, het grootste verschil zit hem in de text margins en paddings en daar maakt het minder uit als het verschilt. Alle layout-kritieke elementen pas je toch wel aan; denk aan lijsten voor menu's etc.

[lullebakman]

BTW:
In html moet je geen px gebruiken voor breedtes, dus die <table width="200px"> moet <table width="200"> zijn. Ik zie het want het wordt rood onderlijnd

[Rowanov]

Dat leert je dan ook gelijk om alleen css te gebruiken.

[paulh]

Als je de style "display:inline" op een form zet dan heb je ook gelijk geen
extra regel meer die vaak aangemaakt wordt. Dat is ook een soortgelijk probleem.

<form style="display:inline;"></font>

[Verwijderd]

dat is de oorzaak omzeilen, zet dan gewoon de marge op 0, het is namelijk geen extra regel, maar een marge

[BtM909]

En 'rare' margins en paddings kan je ook heel makkelijk zien door je element even een border mee te geven of de webdevelopers extensie binnen firefox te gebruiken.

[Joshua]

Ok weer een post van mij, ik werk nu met margin's.

Heb de defaults allemaal op 0 gezet door middel van

Cascading Stylesheet:

* {
    margin: 0px;
    padding: 0px;
    border: 0px;
}

Nu heb ik dus 2 tables waarvan 1tje float: left; is en de andere float: center;
Dit werkt goed, alleen als ik dus de tables nu een margin-left: 10px; mee geeft dan geeft IE het anders weer dan FireFox (lijkt erop dat de margin-left van 10px, 20px; lijkt)

HTML:

<table width="200" style="margin-left: 10px; float: left; border: dashed 2px;">
    <tr>
        <td>
        table 1
        </td>
    </tr>
</table>
<table width="200" style="margin-left: 10px; float: center; border: dashed 2px;">
    <tr>
        <td>
        table 2
        </td>
    </tr>
</table>

heb ze die borders gegeven om beter te kunnen kijken of alles goed staat enzo

[ Voor 22% gewijzigd door Joshua op 17-07-2006 00:23 ]

[XWB]

Float: center; bestaat niet.
Ik zou het zo doen:

Cascading Stylesheet:

*
{
    margin: 0;
    padding: 0;
    border: 0;
}

#container
{
    margin-left: 10px;
    margin-top: 10px;
}

HTML:

<div id="container">
    <table style="float: left; border: dashed 2px; width: 200px;">
          <tr>
            <td>
            table 1
            </td>
        </tr>
    </table>
    <table style="margin-left: 10px; border: dashed 2px; width: 200px;">
        <tr>
            <td>
            table 2
            </td>
        </tr>
    </table>
</div>

Die tweede tabel hoeft geen float te zijn, die komt vanzelf tegen de eerste zolang daar plaats voor is (dus zolang de container breed genoeg is).

Ipv van een container kan je ook dit doen:

Cascading Stylesheet:

body
{
    margin-left: 10px;
    margin-top: 10px;
}

[ Voor 48% gewijzigd door XWB op 17-07-2006 00:38 ]

[Joshua]

Dit werkt goed in FireFox maar niet in IE, bij de 2de tabel wil hij in IE nog die margin-left niet pakken

[Verwijderd]

sluit de form af na de td

[Rowanov]

Als je iets wilt centreren, dan is dit de cleanste manier:

Cascading Stylesheet:

body {
  text-align: center;
}
#container {
  margin: 0 auto;
  text-align: left;
}

Daarnaast zijn je inline styles naatuurlijk onzin; zet die ook gewoon met een class in je stylesheet.

De dubbele margin kan heel goed een float bug in IE zijn, kijk even [url=http://www.positioniseverything.net/explorer/doubled-margin.html]op deze site[/url wat je er aan kan doen. Een display: inline; op de betreffende div zou moeten werken.

[Joshua]

Thanks iedereen, het werkt

[crisp]

Verwijderd schreef op maandag 17 juli 2006 @ 10:04:
sluit de form af na de td

Dat is de 18e-eeuwse methode en bovendien invalid in HTML.

[iH8]

ik ben een tijd terug ook met die star-selector bezig geweest met de nodige problemen, toen vond ik dit en ben er zelf maar vanaf gestapt

The other thing is the use of the "star-selector," or * { } in CSS. The star selector selects every single element, which produces an overkill of style-nullifying. Sander pointed out that Mozilla (for one) has a great deal of default styling on form controls, which the star selector nullifies when applying margin:0 and padding:0 to it. As a result, buttons don't behave like buttons anymore, and so forth. I never really noticed that, which only goes to show that I'm no longer used to buttons behaving like buttons. I did some research in this, and as it turned out, most of all the weblogs I frequently comment on have this same problem: buttons not behaving like buttons. In most cases, it was indeed the star selector being the culprit.

Additionally, Mozilla developers have stated that the star selector slows down things. While this is apparently not noticeable for end-users in most cases, it may slow down other aspects that interact with the CSS as well. And don't forget that it's definitely a bit overkill to loop through all elements when you only have to alter a dozen of them, roughly.

http://kurafire.net/log/a...26/starting-css-revisited

[moozzuzz]

Maar 't izz zeker handig want ik set er ook mijn default font, size, ... etc

[crisp]

fonts, font-size ed zijn inherited dus hoef je eigenlijk enkel op je body-element te definieëren - aangevuld eventueel met het td/th-element voor sommige oudere browsers...
(needless to say dat ik ook geen voorstander ben van het op 0 zetten van alle default margins/paddings voor alle elementen)

[ Voor 29% gewijzigd door crisp op 17-07-2006 15:18 ]