Notifikationer

Markér alle som læst Log ud

nwn Nybegynder

01. november 2008 - 22:17 Der er 26 kommentarer og
1 løsning

CSS margin-top vil ikke virke ved divs i FF

Jeg danner en box ud fra 5 divs og mit inkluderede CSS dokument.

Men af en eller anden grund, kan jeg ikke få margin-top til at virke lige i dette tilfælde (Det virker fint i IE, men ikke FF). Har det til at virke mange andre steder, og det mærkelige er, at margin-left, right og bottom gerne vil virke.

Det ser så ledes ud:

<div class="box_left"> </div>
<div class="box_middle"> </div>
<div class="box_right"> </div>
<div class="box_border"> </div>
<div class="box_inner">
Tekst lige her...
</div>

Ved at give .box_inner i mit CSS dokument indstillingerne:

margin-top: 5px;
margin-left: 2px;
margin-bottom: 2px;

Vil kun left og bottom virke i FF. I IE virker alle tre.

Nogle der har et bud på, hvorfor?

Synes godt om

w13 Novice

01. november 2008 - 22:40 #1

Det kunne have noget at gøre med box_border's CSS.

Kan vi se et link?

Får du noget at vide i FF's fejlkonsol? (Funktioner -> Fejlkonsol)

Synes godt om

nwn Nybegynder

01. november 2008 - 22:45 #2

Tilsyneladende ikke noget med box_border's CSS, da der blot er angivet en bredde, en baggrundsfarve, og så border til left, right og bottom.

Nej, desværre intet link, da det er noget jeg sidder og leger med på computeren.

Heller intet i fejkonsollen.

Jeg prøvede også lige at fjerne box_inner og overfører margin-top til box_border, og så blot smide noget indhold derind. Det gjorde ingen forskel.

Andre bud?

Synes godt om

w13 Novice

01. november 2008 - 22:48 #3

Nej, ikke uden at se det hele, enten via link eller kode.

Synes godt om

nwn Nybegynder

01. november 2008 - 22:56 #4

Mærkeligt. Jeg prøvede da lige at sætte margin-top helt op til 100 px, og da vil den gerne rykke sig. Jeg finder så frem til, at for at den skal rykke sig det mindste, skal den mindst være sat til 17px i FF.

Så får du lidt CSS kode her:

.box_border {
width: 150px;
background-color: green;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
}
.box_inner {
width: 150px;
margin-top: 5px;
margin-left: 5px;
margin-bottom: 5px;
}

Synes godt om

w13 Novice

01. november 2008 - 22:58 #5

Kunne der ikke være andet, som påvirker de to bokses CSS?

F.eks. hvis begge bokse ligger i div'en "container":

#container div{
...
}

Dette ville jo påføre både .box_border og .box_inner noget ekstra CSS.

Synes godt om

nwn Nybegynder

01. november 2008 - 22:59 #6

Ser ud til problemet opstår, for de FF tolker det som om, at box_border er tom for indhold, da selve indholdet først kommer i diven som befinder sig i box_border. For jeg prøvede lige at indsætte et bogstav (Kunne være hvad som helst) indenfor box_border og ikke indenfor box_inner, og pludselig kunne man regulerer margin-top :O

Synes godt om

nwn Nybegynder

01. november 2008 - 23:00 #7

Nej, det ligger ikke inde i andet CSS.

Synes godt om

w13 Novice

01. november 2008 - 23:06 #8

Prøv evt. at indsætte <div style="clear:both"></div> nederst i .box_border.

Synes godt om

nwn Nybegynder

01. november 2008 - 23:09 #9

Gjorde ingen forskel i dette tilfælde, men den funktion hjælper et andet sted i dokumentet, så baggrundsfarven er der i FF.

Men hjalp desværre ik her...

Synes godt om

w13 Novice

01. november 2008 - 23:16 #10

Ok. Jeg kan desværre ikke hjælpe mere ud fra det, du viser.

Synes godt om

nwn Nybegynder

01. november 2008 - 23:26 #11

Sig blot hvad du vil se...

Synes godt om

w13 Novice

01. november 2008 - 23:27 #12

Et link eller hele koden. ;)

Synes godt om

nwn Nybegynder

01. november 2008 - 23:34 #13

CSS:

.box_left {
float: left;
width: 10px;
height: 25px;
background-image: url("left.png");
background-repeat: no-repeat;
border-bottom: 1px solid black;
}
.box_right {
float: left;
width: 10px;
height: 25px;
background-image: url("right.png");
background-repeat: no-repeat;
border-bottom: 1px solid black;
}
.box_middle {
float: left;
width: 150px;
height: 24px;
font-family: Verdana;
font-size: 12px;
font-weight: bold;
background-image: url("middle.png");
border-top: 1px solid black;
border-bottom: 1px solid black;
text-align: center;
}
.box_border {
width: 170px;
background-color: green;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
}
.box_inner {
width: 169px;
margin-top: 5px;
margin-left: 5px;
margin-bottom: 5px;
}

HTML:

<div class="box_left"> </div>

<div class="box_middle">Log ind</div>

<div class="box_right"> </div>

<div class="box_border">

<div class="box_inner">
Tekst.
<div class="fixed"> </div>

</div>

Synes godt om

w13 Novice

01. november 2008 - 23:57 #14

Hvad med doctype, html, head, og body-tags o.lign.?

Synes godt om

nwn Nybegynder

02. november 2008 - 00:17 #15

Det kan da ik være nødvendigt?

Det HTML jeg skrev, er placeret inde under body og hvis doctypen skulle have nået at sige, så er det: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN">

Både HTML og CSS er valideret til 0 fejl ved W3.

Synes godt om

w13 Novice

02. november 2008 - 00:27 #16

Jo, din doctype afgør jo f.eks., hvordan HTML og CSS skal tolkes, så det er alt-afgørende. Jeg bliver derfor nødt til at se samtlige linjer for at kunne hjælpe.

Synes godt om

nwn Nybegynder

02. november 2008 - 01:09 #17

Jeg har angivet CSS'en og HTML'en der benyttes, samt dokument typen. Det hele kan da ikke være nødvendigt? Head indeholder nogle få meta informationer, titel og inkludering af CSS dokumentet.

Synes godt om

nwn Nybegynder

02. november 2008 - 01:13 #18

Fandt lige ud af, at formindsker jeg box_left, box_middle og box_right's height, så skal margin-top kun være sat til 4 for at det rykker sig en tand ned ad. Men har stadig ikke fanget problemet helt.

Synes godt om

w13 Novice

02. november 2008 - 02:00 #19

Det hele er ikke nødvendigvis nødvendigt nej, men hvis jeg skal bruge tid på at fejlfinde i din kode, vil jeg være sikker på, at fejlen ikke befinder sig i de koder, jeg ikke har fået vist. =)

Synes godt om

nwn Nybegynder

03. november 2008 - 21:41 #20

Undskyld jeg ik lige har fået svaret. Du får lige lidt mere kode så :-)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>Titel</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>

<div id="main">

<div id="top"> </div>

<div id="navigation">
Link link link
</div>

<div id="menu_right">
Link link
</div>

<div id="middle">

<div id="left">
<div class="box_left"> </div>

<div class="box_middle">Log ind</div>

<div class="box_right"> </div>

<div class="box_border">

<div class="box_inner">
Tekst.
<div class="clear"> </div>

</div>
</div>
<div class="clear"> </div>
</div>
</div>
</body>
</html>

Og så lige CSS'en for de nye classes og divs:

body, pre {
font-family: Arial;
font-size: 12px;
color: #000000;
background-color: red;
}

#top {
width: 100%;
height: 200px;
background-image: url("billede-url");
background-repeat: no-repeat;
}

#menu {
float: left;
width: 80%;
padding-top: 4px;
padding-bottom: 3px;
font-family: Arial;
font-size: 15px;
background-color: #FFFFFF;
text-align: left;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
#menu_right {
float: left;
width: 20%;
padding-top: 2px;
padding-bottom: 2px;
font-family: Arial;
font-size: 15px;
background-color: #FFFFFF;
text-align: left;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}

#middle {
width: 100%;
height: 100%;
background-color: #FFFFFF;
}
#left {
float: left;
width: 150px;
margin-top: 5px;
margin-left: 5px;
text-align: left;
}

.clear {
font-size: 0px;
clear: both;
}

Synes godt om

nwn Nybegynder

03. november 2008 - 21:45 #21

Det smuttede da vidt lige godt og grundigt der. Hvis du lige i HTML'en kan replace fra div id=main og ned til slutningen med følgende:

<div id="main">

<div id="top"> </div>

<div id="navigation">
Link link link
</div>

<div id="menu_right">
Link link
</div>

<div id="middle">

<div id="left">
<div class="box_left"> </div>

<div class="box_middle">Log ind</div>

<div class="box_right"> </div>

<div class="box_border">

<div class="box_inner">
Tekst.
<div class="clear"> </div>

</div>

</div>
</div>
</div>

<div class="clear"> </div>

</div>
</body>
</html>

Synes godt om

olebole Juniormester

08. november 2008 - 21:35 #22

<ole>

Jeg ville i hvertfald bruge en mere moderne DTD (HTML 4.01 i stedet for HTML 4.0):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Derudover er jeg i tvivl om, hvad det egentlig er, du ønsker =)

/mvh
</bole>

Synes godt om

nwn Nybegynder

10. november 2008 - 22:37 #23

Hej.

Noget tiden siden, men jeg valgte at blot at bruge billeder der passer. Det gør også, at man kan benytte knappen ligemeget hvor der trykkes. Den anden metode ville nemlig give problemer med, hvis man trykker i venstre eller højre side ;)

Synes godt om

w13 Novice

10. november 2008 - 22:43 #24

Ok, så må du huske at lukke her. =)

Synes godt om

nwn Nybegynder

13. november 2008 - 19:16 #25

Nej hov, mit indlæg skulle være placeret i mit andet spg.

Synes godt om

nwn Nybegynder

15. november 2008 - 22:08 #26

Olebole ->

Problemet er, at CSS margin-top ikke virker i dette tilfælde, ved nogle bokse, i FF. Det virker derimod fint i IE ;)

Synes godt om

nwn Nybegynder

16. november 2008 - 13:52 #27

Jeg tror jeg må prøve at oprette et nyt spg. Ellers tak for hjælpen w13.

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS