Avatar billede jepper65 Nybegynder
23. oktober 2006 - 16:22 Der er 10 kommentarer og
1 løsning

min side vises forskelligt i explorer og firefox

Hej eksperter.

jeg har et probem med mit design lavet i css.
Mit "conten" dvs. et område jeg har reserveret til tekst flugter ikke med mit menu billede. Eller dvs når det passer i firefox ser det forkert ud i explorer og omvendt. Jeg kan ikke helt gennemskue hvad min fejl er, håber i kan hjælpe, jeg paster koden herunder:

<html>
<title>ttt</title>
 
  <style type="text/css">

body    {
   
    text-align:left;
    background-color: white;
   
    }

#wrapper
    {text-align:left; margin-right:auto; margin-left:auto; position:relative; width:900px; height:auto
    }


#content {
    margin-top: 50px;
    margin-left: 110px;
    padding: 2em 2em 2em 2em;
   
    width: 665px;
   
    background-color: #f9f9f9;
}

H6.overlap {
    font-family: arial;
    margin-top: -76px;
    margin-left: 175px;
        }

#headerimage {
    margin-left: 65px;
   
    height: 168px;


  </style>

<body>
<div id="wrapper">

<div id="headerimage">
            <img src="menub1.png" >
        </div>
<H6 class="overlap">bbbbbb  gggggg  eeeee  kkkkk</H6>

<div id="content">
        Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? [33] At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
</div>
</div>   
</body>
</html>
Avatar billede sw_red_6 Nybegynder
23. oktober 2006 - 16:25 #1
det kan være noget med at IE går i quirksmode hvis ud ikke har en DTD, desuden er der også forskel på hvordan IE og FireFox behandler margin og padding så det kan også have noget sagen at gøre
Avatar billede jepper65 Nybegynder
23. oktober 2006 - 16:46 #2
Du har ret i at det kan have noget med padding a gøre. når jeg i mit content sletter: padding: 2em 2em 2em 2em;
viser begge browsere siden ens, men hvordan løser jeg så dette problem?
hvad er forresten en DTD?
Avatar billede sw_red_6 Nybegynder
23. oktober 2006 - 16:50 #3
DTD = Document Type Definition.
det skal placeres øverst i dine filer det er noget i den her retning, men jeg kan ikke huske resten. Der skal et link ind til sidst men det er bare væk lige nu.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

mht. problemet med padding så er der vidst nogle hacks, men der er jeg endnu mere blank.
Avatar billede mapoulsen Nybegynder
23. oktober 2006 - 17:06 #4
Du skal benytte dig af det såkaldte box model hack.

Det findes der en del løsninger på, som du kan se her:
http://www.google.dk/search?&q=box+model+hack

Men jeg syntes især at denne her forklarer det godt:
http://tantek.com/CSS/Examples/boxmodelhack.html
Avatar billede mapoulsen Nybegynder
23. oktober 2006 - 17:07 #5
Men du får nok nemmere ved at benytte dig af denne hack hvis du angiver din padding og din margin i samme enhed (px).
Avatar billede jepper65 Nybegynder
23. oktober 2006 - 19:42 #6
hm, det er ikke lykkedes mig at få det til at virke

jeg forsøger mig med noget der ser sådan her ud:
#content {
    margin-top: 50px;
    margin-left: 110px;
    padding: 25px 25px 25px 25px;
    width: 620px;
    background-color: #f9f9f9;
}

#content {
\width: 670px;
  width: 620px;
   

}

men jeg kan bare ikke få det til at passe i både explorer og firefos! Jeg ved ikke om jeg koder det forkert, men browserne synes at ignorere de 670 px
Avatar billede mapoulsen Nybegynder
23. oktober 2006 - 19:58 #7
Jeg kender heller ikke nogen hack hvor man skal sætte en \ foran en style.

Hvis du tog og læste lidt på http://tantek.com/CSS/Examples/boxmodelhack.html så ville du finde ud af at det skulle gøres således:

#content {
    padding:25px;
    width:670px;
    voice-family: "\"}\"";
    voice-family:inherit;
    width:620px;
}
Avatar billede jepper65 Nybegynder
23. oktober 2006 - 20:03 #8
ah ok nej, selvfølgelig, jeg brugte en dansk beskrivelse i stedet:
http://www.webdesign101.dk/xhtml/css/hacks/hack_7.php

og nu ahr jeg også fået den til at virje, jeps, jeg havde sat \ forkert!
Avatar billede jepper65 Nybegynder
23. oktober 2006 - 20:06 #9
jeg havde for øvrigt også prøvet på den måde du beskrev ma poulsen, men kunne ikke få det til at lykkedes, men jeg har nok glemt et tegn eller noget lignende!
Avatar billede mapoulsen Nybegynder
24. oktober 2006 - 07:53 #10
Okey, det hack der beskrives på den danske side der, har jeg aldrig prøvet før. Den ser jo umiddelbart lidt kortere ud.
Avatar billede olebole Juniormester
24. oktober 2006 - 10:31 #11
<ole>

At lave den slags hacks er skidt kodestil. Det korrekte er at gøre, som sw_red_6 skriver: Brug en fuld DTD:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">

Læs evt. mere om, hvorfor:
    http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie60/html/cssenhancements.asp

- læs under: The !DOCTYPE "Switch".

Du kan evt også teste disse to dokumenter i IE6 og FF:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
div {
    width: 150px;
    height: 150px;
    background: yellow;
}
.bordered {
    border: 50px solid red;
}
</style>
</head>
<body>

<div>tekst</div>
<div class="bordered">tekst</div>

</body>
</html>

- og:

<html>
<head>
<style type="text/css">
div {
    width: 150px;
    height: 150px;
    background: yellow;
}
.bordered {
    border: 50px solid red;
}
</style>
</head>
<body>

<div>tekst</div>
<div class="bordered">tekst</div>

</body>
</html>

Det er det første dokument, der vises korrekt i IE6. De vises begge korrekt i FF  =)
Du kan også prøve med den DTD, sw_red_6 viser. Så vil IE6 - ganske som du kan læse bag linket - også vise dokumentet forkert.
Til sw_red_6's forsvar skal det siges, at han selv understreger, DTD'en ikke er komplet  ;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