Avatar billede sobr Nybegynder
11. august 2005 - 11:29 Der er 22 kommentarer og
1 løsning

Hvorfor laver div mellemrum ved float: left?

Jeg er begyndt at bruge div tags, istedet for tabeller til layout, men er stadig nødt til at bruge en enkelt tabelcelle til centreringen af siden.
Men jeg har problemer med mellemrum imellem div tags. Jeg har trukket 4px fra til border.
Jeg vil ha' dem til at nå helt sammen, men det mellemrum kan jeg ikke få væk - hvorfor?

Eks:

<TABLE WIDTH="528" BORDER="0" ALIGN="center" CELLSPACING="0" CELLPADDING="0">
<TR VALIGN="top">
    <TD>
<DIV STYLE="width:128px;border:1px solid #000000;float:left;margin:0px;padding:0px;">vidde 128</DIV>
<DIV STYLE="width:396px;border:1px solid #000000;margin:0px;padding:0px;">vidde 396</DIV>
</TD>
</TR>
</TABLE>
Avatar billede busschou Praktikant
11. august 2005 - 11:33 #1
hvorfor gå væk fra tables hvis det er den funktionalitet du ønsker?
Specielt når du alligevel ikke går væk fra det?
Der er jeg lost ;o)
---
anyways kan du evt sætte style="display:inline;" på dem og så lave en <br> bagefter dem
Avatar billede busschou Praktikant
11. august 2005 - 11:35 #2
hov my bad dur vist ik
Avatar billede sobr Nybegynder
11. august 2005 - 11:38 #3
Fordi at jeg prøver at følge lidt med ;)

Hvad gør style="display:inline;"  ???
Avatar billede busschou Praktikant
11. august 2005 - 11:44 #4
det gør at din div bliver vist som et inline element i stedet for et block element
men så kunne man ligeså godt benytte span som jo er inline element
--
følge med?
Der er vist lidt rigelig religion over brug af <table> men som de dygtigste herinde siger, så findes der intet element som kan erstatte en tabel. Tabellen er til for at opstille "tabuleret data" , at efterligne dette tag er lidt af en unødvendig hurle :o)
Avatar billede busschou Praktikant
11. august 2005 - 11:46 #5
men i og med du har margin:0 og float:left, så giver det dig din effekt, hvorfor IE laver mellemrum når FF ikke gør, det ved jeg ski ikke
Avatar billede sobr Nybegynder
11. august 2005 - 11:50 #6
Jeg har lige prøvet med span, det er det samme med mellemrummet
Hvor irriterende !!!
Avatar billede sobr Nybegynder
11. august 2005 - 11:53 #7
For at vende tilbage til det med div i stedet for tabeller, så blir koden i hvert fald for mig mere overskuelig
Avatar billede busschou Praktikant
11. august 2005 - 11:56 #8
Ikke hvis du ønsker den samme funktionalitet, det er umuligt
En table gør en masse ting for dig automatisk som du selv ellers skal kode dig fra på mystifystisk vis
Men det er selvfølgelig dit eget valg
---
Jeg ved ikke lige hvad mellemrummet skyldes, det skyldes ikke din border i hvert fald
Avatar billede sobr Nybegynder
11. august 2005 - 12:00 #9
Er der virkelig ikke andre der er stødt på dette problem end mig - det kan da vist ikke passe ;o)
Avatar billede busschou Praktikant
11. august 2005 - 12:03 #10
hvis du sætter begge til float:left så sker der noget
Se om det er til at leve med :o)
Avatar billede busschou Praktikant
11. august 2005 - 12:05 #11
jeg skulle til at sige at stregen bliver tyk, men det er jo klart, for der er jo to div med hver deres border, det giver jo dobbelt imellem dem :o)
Så det må da vist være løsningen ? :o)
Avatar billede busschou Praktikant
11. august 2005 - 12:08 #12
anyways så kan det fra start af måske også skyldes manglende doctype ;o)
Avatar billede sobr Nybegynder
11. august 2005 - 12:10 #13
Ja - det må du da nok sige - der skete noget der!

Men kan jeg så også regne med, at det ikke skaber problemer i andre browsere?
Ser det lige sådan ud i FF?

Ja - det skulle jeg selvfølgelig selv sørge for at tjekke, men har ikke lige fået inst. den efter en format.
Avatar billede sobr Nybegynder
11. august 2005 - 12:11 #14
Nej - jeg har bare nøjedes med at tage tabellen med!
Avatar billede sobr Nybegynder
11. august 2005 - 12:12 #15
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
    <TITLE>Margin og padding</TITLE>
<META NAME="Generator" CONTENT="Stone's WebWriter 3.5">
</HEAD>
<BODY>

</BODY>
</HTML>
Avatar billede busschou Praktikant
11. august 2005 - 12:12 #16
altså uden doctype ser det ens ud i min IE og FF
Avatar billede busschou Praktikant
11. august 2005 - 12:14 #17
sådan her ser de også ens ud i IE og FF
---
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<TABLE WIDTH="528" BORDER="0" ALIGN="center" CELLSPACING="0" CELLPADDING="0">
<TR VALIGN="top">
    <TD>
<DIV STYLE="width:128px;border:1px solid #000000;float:left;margin:0px;padding:0px;">vidde 128</DIV>
<DIV STYLE="width:396px;border:1px solid #000000;float:left;margin:0px;padding:0px;">vidde 396</DIV>
</TD>
</TR>
</TABLE>
</body>
</html>
Avatar billede sobr Nybegynder
11. august 2005 - 12:15 #18
OK -det må jeg jo så nok aceptere.

Jeg tænkte bare på, om ikke de kunne finde på, at lægge sig i højre side begge to, under hinanden ?
Avatar billede busschou Praktikant
11. august 2005 - 12:15 #19
hvis du fjerner den ene float:left med denne doctype så går der kun mere ged i det i IE
Avatar billede busschou Praktikant
11. august 2005 - 12:15 #20
11/08-2005 12:14:17
ser rigtig ud i min FF,IE,Netscape og IE af de nyeste versioner
Avatar billede sobr Nybegynder
11. august 2005 - 12:20 #21
Ja, men så skal du da ha' tusind tak for servicen -

Du får pointene selv  :)  værsgo'
Avatar billede busschou Praktikant
11. august 2005 - 12:21 #22
det var så lidt da
Avatar billede roenving Novice
11. august 2005 - 14:00 #23
-- men du behøver absolut ikke en tabelcelle, hvis du bruger den fuldt kvalificerede doctype inklusive dtd-link, for så forstår også IE margin:auto !-)

-- til gengæld er det helt tåbeligt, som busschou også gør opmærksom på, at undlade at bruge det element, som lige præcis kan det, man vil, for der er _ingen_ god grund til at undlade at bruge tabel-elementet, hvis man godt vil have to eller flere elementer ved siden af hinanden, i tilgift får man så endda, at de vil fylde det samme i højden, hvilket oftest i den sammenhæng vil være ønskeligt ...

-- se f.eks. forskellen:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;margin:0px;border:0px;padding:0px;font-family:tahoma,verdana,arial,sans-serif;font-size:small;}
#site{width:528px;margin:0 auto;}
#minTabel{border-collapse:collapse;}
#minTabel td{border:1px solid black;margin:0;padding:0;vertical-align:top;}
</style>
<title></title>
</head>
<body>
<div id="site">
  <table id="minTabel">
    <tr>
      <td style="width:128px;">128px bredde</td>
      <td style="width:396px;">396px bredde<br>
        - og en hel masse tekst<br>
        - og en hel masse tekst<br>
        - og en hel masse tekst<br>
        - og en hel masse tekst<br>
        - og en hel masse tekst<br>
        - og en hel masse tekst<br>
        - og en hel masse tekst<br>
        - og en hel masse tekst<br>
        - og en hel masse tekst<br>
        - og en hel masse tekst<br></td>
    </tr>
  </table>
</div>

<TABLE WIDTH="528" BORDER="0" ALIGN="center" CELLSPACING="0" CELLPADDING="0">
<TR VALIGN="top">
    <TD>
<DIV STYLE="width:128px;border:1px solid #000000;float:left;margin:0px;padding:0px;">vidde 128</DIV>
<DIV STYLE="width:396px;border:1px solid #000000;float:left;margin:0px;padding:0px;">396px bredde<br>
        - og en hel masse tekst<br>
        - og en hel masse tekst<br>
        - og en hel masse tekst<br>
        - og en hel masse tekst<br>
        - og en hel masse tekst<br>
        - og en hel masse tekst<br>
        - og en hel masse tekst<br>
        - og en hel masse tekst<br>
        - og en hel masse tekst<br>
        - og en hel masse tekst<br></DIV>
</TD>
</TR>
</TABLE>
</body>
</html>
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