Avatar billede jakobdo Ekspert
25. september 2008 - 12:57 Der er 15 kommentarer og
1 løsning

Double Padding efter float element

Jeg har forsøgt at lave en lille side: http://www.codebreaker.dk/leg/ajax_edit.php

Men padding-top: 10px; bliver til 20px i IE7 og i FF3 er det ok.

Jeg har kigget lidt på nettet og fundet frem til display:inline; skulle være løsningen.
Smider jeg det på div.row, så forsvinder padding helt.
Hvad vil en løsning være til mig ?

Jakob
Avatar billede keysersoze Ekspert
25. september 2008 - 13:03 #1
Det er ikke fordi du bare mangler at fjerne den padding der er som standard på html (eller er det på body?)?
Avatar billede ssv Nybegynder
25. september 2008 - 13:44 #2
Display: inline er et "hack" for at cleare dobbelt-marginen der er i IE6 når du floater et element samt giver et en side-margin (left/right).

Da du har både en padding-top og en generel padding på 5px, er det nok der problemet er - og der IE og FF muligvis tolker det forskelligt.
Avatar billede jakobdo Ekspert
25. september 2008 - 14:08 #3
Ingen forskel med padding: 5px; fjernet eller ej.
Den er godt nok også kun på formen.
Avatar billede jokkejensen Novice
25. september 2008 - 14:57 #4
Brug margin til afstand mellem block elementer..

/JJ
Avatar billede olebole Juniormester
25. september 2008 - 15:12 #5
<ole>

Når det sidste indhold i et block-element (eller et block-lignende element) er inline-indhold, vil et efterfølgende linjeskift i koden skabe ekstra luft i bunden af block-elementet ... men _kun_ i IE  ;o)

Ret dette:

    <span class="formw"><input type="submit" value="Save Data" size="25" /></span>
    </div>

- til:

    <span class="formw"><input type="submit" value="Save Data" size="25" /></span></div>

Så vil jeg tro, problemet forsvinder.

/mvh
</bole>
Avatar billede jokkejensen Novice
25. september 2008 - 15:21 #6
lettere bare at bruge margin-top i stedet..
Avatar billede jokkejensen Novice
25. september 2008 - 15:28 #7
jeg tror også du missede problemet ole, prøv at kigge i begge browsers.. Det er for alle .formw der er problemer, ikke kun knappen i bunden.

vh
Avatar billede roenving Novice
25. september 2008 - 16:55 #8
Dobbelt-margin/padding-buggen er en gammel kending i IE, det kan vist kun klares med hacks à la:

<!--[if IE]>
<style type="text/css">
  .formw{padding:5px;}
</style>
<![endif]-->
Avatar billede zips Juniormester
25. september 2008 - 20:38 #9
Her er et forsøg på at få det ens i IE6, IE7, FF, Opera og Chrome
http://www.prebendahl.dk/exp/test/jakobdo/

For at få IE6 til at se ok ud har jeg ændret size 25 til 20 i dine input, jeg har sat display: inline-block; på din row samt ændret lidt i dine størrelser, men det er jo også kun et forsøg :)
Avatar billede jakobdo Ekspert
26. september 2008 - 08:06 #10
zips: Jeg kan se du nu har sat padding på formw og label i stedet.
Er det tricket ?
Avatar billede zips Juniormester
26. september 2008 - 09:11 #11
Ja, jeg var nød til at ændre det da IE6 lavede dobbelt padding når man ville indtaste i dine input, derfor nu også inline i stedet for inline-block, men på den måde jeg har lavet det nu, se det ens ud i de nævnte browser.
Avatar billede jakobdo Ekspert
26. september 2008 - 10:55 #12
Problemet ser ud til at være løst, ved at flytte padding til de 2 span'er og ikke lade dem være på div.row.
Smid et svar zips.
Avatar billede zips Juniormester
26. september 2008 - 11:22 #13
Her et svar, men jeg kan se du stadig har size 25 på dine input, det gør at det ser forkert ud i IE6 blot så du er klar over det, jeg satte dem til 20 for at få dem ens i alle browser
Avatar billede jakobdo Ekspert
26. september 2008 - 11:27 #14
Jeg fjernede blot size, da jo bruger width: 150px;
Avatar billede zips Juniormester
26. september 2008 - 11:59 #15
Jeps :) det ser fint ud nu i IE6
Tak for point :)
Avatar billede jakobdo Ekspert
26. september 2008 - 12:05 #16
Tak for hjælpen. :o)
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