Avatar billede nwn Nybegynder
16. november 2008 - 13:55 Der er 17 kommentarer og
3 løsninger

CSS Margin-top virker ikke i firefox

Hej!

Jeg har nogle bokse der er lavet via et par div's. Jeg har så anvendt margin-top for at teksten ikke skal stå helt oppe  toppen af boksen, men lidt længere nede. Det virker perfekt i IE, men i firefox virker det slet ikke.

Nogle der kunne have en ide til dette?

HTML:

<!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">&nbsp;</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">&nbsp;</div>

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

        <div class="box_right">&nbsp;</div>

        <div class="box_border">

                <div class="box_inner">
                  Tekst.
                <div class="clear">&nbsp;</div>

                </div>

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

    <div class="clear">&nbsp;</div>

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

-------------------------
CSS:
-------------------------

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;
}

Jeg takker mange gange på forhånd.
Avatar billede w13 Novice
16. november 2008 - 14:58 #1
Virker det, når du fjerner float:left; på #left?
Avatar billede w13 Novice
16. november 2008 - 14:58 #2
Altså selvfølgelig vises det hele så ikke som ønsket, men virker margin-top så? :)
Avatar billede zips Juniormester
16. november 2008 - 15:00 #3
Er det noget i denne stil?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Titel</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>


<div id="main">
  <div id="top">&nbsp;</div>
  <div id="navigation">
      Link link link
  </div>
  <div id="menu_right">
      Link link
  </div><div style="height:0;overflow:hidden;clear:both">&nbsp;</div>
  <div id="middle">
      <div id="left">
        <div class="box_left">&nbsp;</div>
            <div class="box_middle">Log ind</div>
        <div class="box_right">&nbsp;</div>
        <div class="box_border">
        <div class="box_inner">Tekst.</div>
            </div>
</div><div class="clear">&nbsp;</div>
</div>
    <div class="clear">&nbsp;</div></div>
</body>
</html>

Jeg er ikke helt klar over hvad du mener :)
Avatar billede w13 Novice
16. november 2008 - 15:02 #4
En korrekt doctype er nok en god idé ja. =)
Avatar billede Slettet bruger
16. november 2008 - 15:05 #5
Muligt du kan smide resten af style koderne eller link til siden?
Avatar billede nwn Nybegynder
16. november 2008 - 15:35 #6
w13 -> Nej, virker desværre heller ikke =(.

zips -> Virker heller ikke.. Problemet er, at jeg inde i boksen (.inner) ikke kan få margin-top til at virke i firefox. Det virker fint i internet explorer.

roxki -> Ja, det er jeg ked af:

.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;
}
Avatar billede Slettet bruger
16. november 2008 - 16:02 #7
Nu har jeg prøvet lidt at finde hovede og hale i koderne, men der er noget der hele tiden bliver ved med at forvirrer mig, så som du bruger 'id="navigation"' men du har ingen css kode til den id.. Du har derimod en css kode der matcher 'id="menu"' men hvis jeg sætter den ind istedet for navigation's id'et så ser selve siden stadig utrolig underlig ud..

Ville være rart hvis du kunne smide et link til den samlede fil op, så jeg kan se om jeg har fået klippet de her koder rigtigt sammen, eller om jeg er helt forkert på den.
Avatar billede olebole Juniormester
16. november 2008 - 16:05 #8
<ole>

nwn >> Jeg kan ikke se, du overhovedet har noget inde i boksen med klassen 'box_inner', som margin-top kan vike på - og du sætter jo heller ikke margin-top på noget inde i boksen  =)

.box_inner {
    margin-top: 5px;
}

- betyder, at der skal lægges 5px 'luft' ind _over_ den pågældende boks.

.box_inner {
    padding-top: 5px;
}

- betyder derimod, at der skal lægges 5px luft i toppen af boksen - indenfor denne. Skal teksten i boksen rykkes ned i boksen, bør du bruge padding-top

/mvh
</bole>
Avatar billede nwn Nybegynder
16. november 2008 - 16:26 #9
roxki -> "Kodernes" navne er ik helt up to date. <div id="navigation"> skulle have været <div id="menu">.

Olebole -> _over_ den pågældende boks? Det foregår jo inden for boksen, og margin-left virker f.eks fint i begge browsere. Jeg prøvede lige med padding-top istedet. Gjorde ingen forskel, virker fint i IE, men ikke FF.
Avatar billede olebole Juniormester
16. november 2008 - 16:34 #10
Uanset, hvad du måtte tro, så lægges margin udenom elementet, mens padding lægges indenfor. Du har aldrig set eller oplevet andet. That's it 'n' that's that!  ;o)
Avatar billede olebole Juniormester
16. november 2008 - 16:35 #11
- test evt. selv med nogle nestede div med forskellig baggrundsfarve  ;o)
Avatar billede nwn Nybegynder
16. november 2008 - 16:43 #12
De nødvendige margins er så blevet udskiftet med paddings, ligner det samme, ok.

Jeg lavede lige en lille test ved at sætte en tydelig adskillende baggrundsfarve til .inner div. Jeg kan så se at IE er det kun det _inden for_ boksen der får baggrundsfarven, og i firefox er det også det inden for boksen, men også det lige oven over boksen, som indeholder en tekst. Det forklare jo hvorfor den margin/padding ikke er synlig, det virker jo hvis jeg ændre den margin/padding-top til 20.

Jeg må åbenbart mangle at clear noget, lige som zips prøvede.
Avatar billede nwn Nybegynder
16. november 2008 - 16:45 #13
Utroligt det egentlig var så simpelt. Smed en clear: both; ind i CSS'en inden for .inner og så virker det. Så jeg synes egentlig disse points skulle deles mellem w13, olebole og zips.
Avatar billede olebole Juniormester
16. november 2008 - 17:31 #14
Et floated vil ligesom et absolut positioneret element ikke optage plads i det alm. dokument-flow. Som ordet 'float' antyder, 'flyder' det ovenpå dokumentet.

Efterfølges floatede elementer af et element med 'clear', optager de alligevel plads. Det gælder dog _kun_ floatede elementer ... ikke absolut positionerede  ;o)

Hvis du vil lære mere om de ting, der har været diskuteret i disse to tråde, så er her, hvad standarden siger om float:
    http://www.w3.org/TR/CSS2/visuren.html#floats
- tjek også den efterfølgende clear property.

Her er box modellen, som fastlægger reglerne for dimensioner, margin, border og padding:
    http://www.w3.org/TR/CSS2/box.html

- og her er mit svar  =)
Avatar billede w13 Novice
16. november 2008 - 17:32 #15
:)
Avatar billede zips Juniormester
16. november 2008 - 17:40 #16
Her er et svar :)
Avatar billede nwn Nybegynder
16. november 2008 - 18:04 #17
Jeg må indrømme du havde ret Ole. Kun godt, da min CSS så blot er blevet mere "korrekt".

Den med float vil jeg lige få læs.

Ellers vil jeg sige tak til alle der har forsøgt, især w13 og olebole, for støtten, i kampen mod CSS :-)
Avatar billede w13 Novice
16. november 2008 - 18:05 #18
Og jeg vil sige tak for points! :)
Avatar billede zips Juniormester
16. november 2008 - 18:11 #19
Tak for point :)
Avatar billede olebole Juniormester
16. november 2008 - 19:07 #20
ehhh ... jeg vil ikke håbe, jeg bliver opfattet som frontkæmper _mod_ CSS - men jeg tror nok, jeg forstår, hvad du mener  ;D

Tak for points  =)
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

Seneste spørgsmål Seneste aktivitet
I dag 16:10 Tomt felt i Start Af ErikHg i Windows
I går 23:00 Hyperlink til tekst Af Nanarsi i Excel
18/0121:03 Forlænge ringetid Af 1Dorte i Apps til Android
17/0117:38 Video ikoner Af Malm i Windows
17/0117:27 Video ikoner Af logbuilders i Windows