Avatar billede jonbdk Nybegynder
08. oktober 2006 - 02:12 Der er 13 kommentarer og
2 løsninger

CSS side der ser "forkert" ud i opera & firefox

Jeg er ved at starte på css, og har konstrueret et lille eksempel (med inspiration).

Det ser fint ud i IE, men åbner jeg det i firefox eller opera.

Siden ligger her: http://www.22757575.dk/layout.asp
For fremtidig reference (og dem der kan gennemskue det alene ud fra koden), er koden her:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
body {
    background-color: #FFFFFF;
    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: 10px;   
    margin: 0px;
  padding: 0px;
}
h1 {
    color: #FFFFFF;
    background-color: ;
    font-family: arial, verdana, sans-serif;
}
h2 {
    color: #00FFFF;
    background-color: ;
    font-family: arial, verdana, sans-serif;
}
h3 {
    color: #FFFFFF;
    background-color: ;
    font-family: arial, verdana, sans-serif;
}
th {
    text-align: right;
}
td {
    text-align: left;
}
p {
    text-align: justify;
}
a {
    /*text-decoration:none;*/
    font-weight:bold;
}
a:link {
    color:#000000;
    background-color: #71B8DB;
    text-decoration:none;
}
a:visited {
    color:#000000;
    background-color: #71B8DB;
    text-decoration:none;
}
a:active {
    color:#000000;
    background-color: #71B8DB;
    text-decoration:underline;
}
a:hover {
    color:#000000;
    background-color: #71B8DB;
    font-weight:bold;
    text-decoration:underline;
}
#divHeader {
    background-color: #000066;
    height: 50px;
    width: 1100px;
}
#divContainer {
    width: 1100px;
    overflow: hidden;
    background-color: ;
}

#divContainer div {
    padding-bottom: 1001em;    /* X + padding-bottom */
    margin-bottom: -1000em;    /* X */
}

#divLeft {
    float: left;
    width: 150px;
    color: #000000;
    background-color: #71B8FF;
       
}
#divRight {
    float: right;
    width: 150px;
    background-color: #71B8FF;
}
#divCenter {
    margin: 0 152px 0 152px;
    background-color: #FFFFFF;
        height: 645px;
}

#divFooter {
    background-color: #000066;
    height: 30px;
    width: 1100px;
}
#wrapper {
    border: 0px solid #000000;
    margin: 0 auto;
    width: 1100px;
}
</style>
<title>Velkommen til denne side</title>
</head>
<body>


<div id="wrapper" >
    <div id="divHeader" >
        <div style="text-align:center" >
            <h1>hovedet</h1>
        </div>
    </div>
    <div id="divContainer">
          <div id="divLeft">           
           

        </div>
        <div id="divRight">
           
        </div>
        <div id="divCenter">
velkommen
        </div>
    </div>
    <div id="divFooter"><div style="text-align:center">
        <h3>Foden</h3>

    </div>
</div>
</div>
</body>
</html>
Avatar billede softspot Forsker
08. oktober 2006 - 07:53 #1
Umiddelbart (alene på grundlag af gennem af koden) så mangler du en værdi for background-color i divContainer.

Desuden så vil din margin på 10px i body blive overskrevet med en margin på 0px, idet

margin: 0px;

bare en forkortet form af

margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;

og da det er den sidste definition af en style for et element der gælder...
Avatar billede softspot Forsker
08. oktober 2006 - 07:56 #2
Du har i øvrigt et </div> for meget i bunden (såvidt jeg lige kan se).
Avatar billede softspot Forsker
08. oktober 2006 - 08:02 #3
Ydermere blander du DTD og url til DTD (HTML 4.0 blandet med en XHTML 1.0). Du skal sørge for at de stemmer overens. Prøv med:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Avatar billede softspot Forsker
08. oktober 2006 - 08:12 #4
der mangler også background-color i h1, h2 og h3.

Tag evt. og smid din side igennem W3C CSS-validator og ret fejl indtil der ikke er flere. Derefter kan du så begynde at arbejde med de forskelle der er på implementeringerne af CSS i de forskellige browsere. Jeg har kørt din side igennem W3C CSS-validator - se selv: http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.22757575.dk%2Flayout.asp&usermedium=all

Selve validator startsiden findes her: http://jigsaw.w3.org/css-validator/
Avatar billede jonbdk Nybegynder
08. oktober 2006 - 12:01 #5
>>softspot
Så har jeg haft den gennem validatoren og rettet alle fejl - og lavet én igen - hvis jeg sætter background-color på min container, skjuler den min divLeft og divRight.(Så medmindre den kan sættes til "transparent" kan jeg ikke se hvorledes jeg validere den...)
Jeg har desuden brugt din doctype istedet (tak for det).
Antallet af Divs var rigtig nok(havde glemt at få udrykket én.
Det ovenstående er selvfølgelig meget godt, men har ikke rigtig løst problemet - der er stadig 2 hvide streger/barrer i opera/firefox som ikke er der i i IE(og som er uønsket). De er lige over hovedet og foden.
/Jon
Avatar billede jonbdk Nybegynder
08. oktober 2006 - 12:03 #6
Fjernede både color og background-color på divContainer, og nu validerer den
Avatar billede softspot Forsker
08. oktober 2006 - 12:27 #7
Ja, jeg kan da egentlig godt se at der er en div i divFooter, som jeg havde overset (sorry).

Såvidt jeg lige kan se, så er det FF der ikke kan finde ud af at fortolke dit stylesheet, da dine marginer er sat til 0px... det kan være du også lige skal prøve at sætte margin til 0 i html-elementet i dit stylesheet:

html { margin:0px; }
Avatar billede softspot Forsker
08. oktober 2006 - 12:30 #8
Såvidt jeg ved kan man godt sætte background-color til transparent (hvilket også er default-værdien), så det kan du da prøve...
Avatar billede mclemens Nybegynder
08. oktober 2006 - 23:55 #9
En baggrundsfarve sat til transparent som er default værdien vil stadig
resultere i en warning ... Læg mærke til at selvom man har flere tusinde warnings
er ens stylesheet stadig valid så længe man ikke har nogle errors ... Og joh, jeg
har selv et par warnings i mit rodede stylesheet ( http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.toystokids.com&usermedium=all )- det ville se helt dumt ud med en
baggrund på alle links'ene på min side ... Der er ingen grund til at definere baggrunden til transparent - det giver som sagt en advarsel alligevel ... kan se at jeg stadig har 2 transparente baggrundsdefineringer i det stylesheet der skal fjernes...

... Og de color defineringer som den siger måske bør defineres ... well, det er ikke en fejl og da warnings på baggrunden ikke kan ordnes - så hvorfor fixe en advarsel når det ikke er en fejl ...
Avatar billede mclemens Nybegynder
09. oktober 2006 - 00:01 #10
Og så lige denne her ind i css:
h1, h2, h3{margin:0px;}

Nat, nat ;)

Softspot kast evt. et svar hvis
du vil have noget for doctypen :)
Avatar billede mclemens Nybegynder
09. oktober 2006 - 00:06 #11
( og en lille forklaring: FF og andre browsere
kører med foruddefinerede margin og padding på
elementer - enkelte vælger at køre med
* {margin:0px;padding:0px;}
i deres stylesheet ...

Jeg foretrækker at nulstille elementerne efter behov som html,body {margin:0px;padding:0px;} og så nulstilling af margin / padding på
p elementer h1-h7 og ul, form, inputs ... elementer efter behov.
(der er nok flere jeg har glemt at nævne da jeg
ikke bruger så mange forskellige elementer)
Avatar billede softspot Forsker
09. oktober 2006 - 00:30 #12
:)
Avatar billede jonbdk Nybegynder
09. oktober 2006 - 08:49 #13
Super arbejde begge to :)
Tak for linket til valideringen - så skulle resultatet blive kønnere for eftertiden.
Jeg har fordelt 45/15 da mclemens løste det problem jeg efterspurgte(hurra for standarder).
Tusind tak for hjælpen
Avatar billede mclemens Nybegynder
09. oktober 2006 - 09:08 #14
Velbekom, og tak for point :)
Avatar billede softspot Forsker
09. oktober 2006 - 09:35 #15
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