Avatar billede Slettet bruger
08. februar 2008 - 11:23 Der er 5 kommentarer og
1 løsning

CSS virker forskelligt i IE og Firefox

Jeg kan få min hjemmeside til at se pæn ud i IE, men der sker et eller andet med min top margin i Firefox og jeg forstår det ikke.

Mit html ser sådan ud:
<body>
<div class="TopLogo"><a href="#"><img src="banner.png" alt="Tryk for at komme til startsiden" width="800" height="129" class="LinkImg" /></a></div>
<div class="Navigation">menu</div>
<div class="Content">
  <div class="ContentText">
  Indhold
  </div>
</div>
<div class="ContentFooter"></div>
<div class="Footer"><img src="Footer.png" width="800" height="43" /></div>
</body>
</html>

Og mit css ser således ud:
@charset "utf-8";

body {
color:black;
background:url(../images/bg.png);
background-repeat:repeat-x;
background-color:#7fa7c4;
text-align:center;
}

.Content {
    background-color: #ffffff;
    background-image:url(../images/Tablebg.png);
    background-repeat:repeat-x;
    height:auto;
    width:800px;
    font-size:14px;
    font-family:Arial, Helvetica, sans-serif;
    text-align:left;
    margin:0 auto;
    margin-top:0px;
    padding-top:0px;
   
   
}

.ContentFooter {
background-image:url(../images/TablebgFooter.png);
background-repeat:repeat-x;
height:20px;
width:800px;
margin:0 auto;
}

.Footer {
}

.ContentText {
    margin-left:10px;
    margin-right:10px;
    margin-top:5px;
    margin-bottom:5px;
}

.Navigation {
    background-color: #ffffff;
        height:auto;
    width:800px;
    font-size:14px;
    font-family:Arial, Helvetica, sans-serif;
    text-align:left;
    margin:0 auto;
}

.LinkImg {
border:none;
}

.TopLogo {
border:0;
display:inline;
}

Er der nogle der kan gennemskue hvad jeg gør galt?
Avatar billede Slettet bruger
08. februar 2008 - 11:24 #1
Det skal siges at der hvor det går galt er mellem toplogoet og indholdet hvor der i IE ikke kommer noget mellemrum mens der i firefox kommer et mellem rum. Havde jeg lavet det i tabeller havde jeg bare smidt en valign=top ind men hvad her?
Avatar billede Slettet bruger
08. februar 2008 - 11:47 #2
Jeg har dog selv fundet ud af at hvis jeg smider en border-top:solid; ind i min content i css så er der intet mellemrum... Hvordan kan det være?
Avatar billede di8leva Nybegynder
08. februar 2008 - 11:52 #3
Det er din

.ContentText {
    ...
    margin-top:5px;
    ...
}
som vises forskelligt i IE og FF.

Pröv at bruge

.ContentText {
    ...
    padding-top:5px;
    ...
}


i stedet så ser det bedre ud.
Avatar billede Slettet bruger
08. februar 2008 - 12:08 #4
Super... TAK
Avatar billede di8leva Nybegynder
08. februar 2008 - 12:18 #5
:)
Avatar billede olebole Juniormester
08. februar 2008 - 14:35 #6
<ole>

Hvis dét ændrede noget, er der en anden fejl - og det er sandsynligt (grænsende til stensikkert), at du med din kode selv disable'er CSS i IE. Formodentlig bruger du ikke en fuld DTD, men det er ikke til at afgøre udfra det oplyste.

Prøv at skrive:
    java script:alert(document.compatMode)

- i adresselinjen på IE, mens du står på siden, og tryk 'Return'. Hvis du får returneret andet end 'CSS1Compat', har du disabled de vigtigste dele af CSS i IE6 og bør derfor ændre din DTD ... ellers har du endnu kun set toppen af isbjerget og vil altid være forfulgt af problemer  ;o)

/mvh
</bole>
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