Avatar billede nemlig Professor
05. december 2009 - 15:40 Der er 5 kommentarer og
1 løsning

Simpel CSS virker i FF og IE7, men ikke i IE8

Hejsa.
Jeg har kastet mig ud i at designe websider med css i stedet for <table>. Troede egentligt at alt virkede perfekt, men det gør det åbenbart ikke i IE8.
Jeg har lavet en simpel side, hvor problemet er i IE8. Den kan ses her (Boks2 med den gule baggrund skal stå til højre, men flyttes ned i IE8):

http://www.fam-johansen.dk/test/test.html

HTML-koden:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <link rel="stylesheet" href="styleKontakt.css" type="text/css">
  <title></title>
</head>
  <body>
 
    <div class="yderKrans">
   
      <div id="Boks1">Tekst i boks1</div>
      <div id="Boks2">Vejledning!</div>
   
    </div> <!-- Yderkrans end-->

</body>
</html>


CSS-KODEN:
        html,body{
        margin:0;
        padding:0;
        height:100%;
        font-family: Tahoma,Verdana;       
        font-size: 8pt;
        text-align : left;
        }
       
        body {
        background-color: #eeeeee;
        }
       
        div.yderKrans {
            width: 980px;
            margin: 1em auto;
            margin-top: 0px;
            background-color: #ffffff;
            height: 634px;
            border-right:        1px solid #000000;
            border-left:        1px solid #000000;
            border-bottom:        1px solid #000000;
        }

       
        #Boks1 {
            float:left;
            width: 630px;
            height: 400px;
            margin-top: 10px;
            margin-right: 5px;
            margin-bottom: 5px;
            margin-left: 5px;   
            border:    1.2px solid #cccccc;
            padding:     5px;
            background-color: #eeeeee;
        }

        #Boks2 {
            float:right;
            width: 306px;
            height: 400px;
            margin-top: 10px;
            margin-right: 5px;
            margin-bottom: 5px;
            margin-left: 5px;   
            border:    1.2px solid #cccccc;
            padding:             5px;
            background-color: #ffffcc;
           
        }
Avatar billede mclemens Nybegynder
05. december 2009 - 16:16 #1
Ret 1.2px til 1px
Avatar billede mclemens Nybegynder
05. december 2009 - 16:17 #2
(1px er forresten den mindste måleenhed på din skærm og 1.2px giver derfor ingen mening)
Avatar billede mclemens Nybegynder
05. december 2009 - 16:23 #3
Hvis du tager
        div.yderKrans {
            width: 980px;

og fratrækker

        #Boks1 {
            width: 630px;
            margin-right: 5px;
            margin-left: 5px; 
            border:    1.2px solid #cccccc; (skal ganges med 2 - højre og venstre)
(642,4px)

samt

        #Boks2 {
            width: 306px;
            margin-right: 5px;
            margin-left: 5px; 
            border:    1.2px solid #cccccc; (skal ganges med 2 - højre og venstre)
(318,4px)

Mangler du de 0,8px til at de kan stå ved siden af hinanden - (selvom det altså ikke giver mening at IE beregner de 0.2px ved layout af siden)
Avatar billede zips Juniormester
05. december 2009 - 16:40 #4
Og hvis du ønsker de stakler som stadig bruger IE6 også skal have den gule boks op på siden af Boks1, kan du indsætte display:inline; i din css #Boks1 pga der er dobbelt margin bug, eller lave en css regel kun til IE6
Avatar billede nemlig Professor
05. december 2009 - 16:55 #5
Sejt - det virker dælme, og så fik jeg oven i købet en super forklaring. Tak for det mclemens. Du løste problemet på mit spørgsmål, så du får pointene.
Også mange til zips med ekstra info ift. IE6. Det var jeg heller ikke opmærksom på. :)
Avatar billede mclemens Nybegynder
05. december 2009 - 17:30 #6
Og m.h.t. IE6 kan du måske springe lidt over margin og evt. sige

        div.yderKrans {
            width: 970px;
            margin: 1em auto;
            margin-top: 0px;
            background-color: #ffffff;
            height: 619px;
            border-right:        1px solid #000000;
            border-left:        1px solid #000000;
            border-bottom:        1px solid #000000;
            padding:10px 5px 5px 5px;
        }

       
        #Boks1 {
            float:left;
            width: 630px;
            height: 400px;
            border:    1px solid #cccccc;
            padding:     5px;
            background-color: #eeeeee;
        }

        #Boks2 {
            float:right;
            width: 306px;
            height: 400px;
            border:    1px solid #cccccc;
            padding: 5px;
            background-color: #ffffcc;
           
        }

margin på boks 1 og 2 er fjernet og erstattet af padding på den ydre boks (højde og width er derfor også reduceret)


Problemet med dobbelt margin sker ved
float right plus right margin = dobbelt margin
float left plus left margin = dobbelt margin
float left plus right margin eller float right plus left margin giver ingen problemer.


Der er en sidste måde at løse den på udover ovenstående og Zips og det er ved at lave et element først på f.eks. 635px, floate det left, lægge et element indeni med width 630px og floate det right. (blot for lige at nævne den mulighed også)


... og tak for point :)
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