CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg
Cookie ikon
Avatar billede ngr Praktikant
24. maj 2010 - 23:57 Der er 9 kommentarer og
1 løsning

Webwriter: Billedet i den eksterne og i den interne browser er vidt forskellige

En html side med anvendelse af css ser vidt forskellig ud i hhv. den interne og den eksterne browser.
Hvad skal man så regne med?
Avatar billede olebole Juniormester
25. maj 2010 - 13:14 #1
<ole>

Det siger vel sig selv, at du skal regne med det program, alle andre skal se siden med ... eller ...?  =)

Er koden valid?

/mvh
</bole>
Avatar billede ngr Praktikant
25. maj 2010 - 18:43 #2
ja
Avatar billede ngr Praktikant
25. maj 2010 - 18:46 #3
tror jeg
Avatar billede olebole Juniormester
25. maj 2010 - 19:07 #4
Prøv at lægge et link til siden, så man kan se koden - og evt. til to billeder af, hvad du ser i Webwriter og browser
Avatar billede olebole Juniormester
25. maj 2010 - 19:08 #5
- og koden kan du validere her:
    http://validator.w3.org/
Avatar billede ngr Praktikant
25. maj 2010 - 20:09 #6
Kan ikke lægge den på nettet nu.
Har fået en til at lave den for mig, og begynder selv at forstå en lillebitte smule af, hvad der foregår.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta name="Generator" content="Stone's WebWriter 4">
<!-- Minus AutoDato -->
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Title</title> <style type="text/css">

body{
margin:0;
padding:0;
line-height: 1.5em;
}

b{font-size: 110%;}
em{color: red;}

#maincontainer{
background-repeat:repeat-y;
width: 900px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/ border:solid #333333 1px; }

#topsection{
background-color: #000000;
<!-- background-image:url(top.jpg);
background-repeat:repeat-y; -->
height: 90px; /*Height of top section*/ }

#topsection h1{
margin: 0;
padding-top: 15px;
}

#contentwrapper{
background-repeat:repeat-y;
float: left;
width: 100%;
}

#contentcolumn{
background-color:#FFFFFF;
margin: 0 5px 0 200px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/ height:400px;
overflow: auto;
}

#leftcolumn{
background-color:#000000;
float: left;
width: 200px; /*Width of left column in pixel*/
margin-left: -900px; /*Set margin to that of -(MainContainerWidth)*/ height:400px;
}

#rightcolumn{
background-color:#FFFFFF;
float: left;
width: 5px; /*Width of right column*/
margin-left: -5px; /*Set left margin to -(RightColumnWidth)*/ height:400px; }

#footer{
height: 100px; /*Height of top footer section*/
clear: left;
width: 100%;
background: black;
color: #FFFFFF;
text-align: center;
padding: 4px 0;
background: red;

}

#footer a{
color: #FFFF80;
}

.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 20px;
}

h1 { 
  font: 16px arial, sans-serif;
  color: yellow;
  line-height: 22px;
  text-align: center;
}


h2 {   
  font: 16px comic sans MS;
  color: #00198d;
  text-align: left;
}


</style>



</head>
<body>
<div id="maincontainer">

<div id="topsection"><div class="innertube">
<H1>
H1 tekst
</H1>
</div></div>

<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube">

<H2>Tekst i H2</H2>
aa


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

<div id="leftcolumn">
<div class="innertube">venstre kolone</div>
venstre kolonne<br><br><br><br>
venstre kolonne<br><br><br><br>


</div>

<div id="rightcolumn">
<div class="innertube">

<!-- <H1>Højre kolonne</H1> -->


</div> </div>

<div id="footer">Footer</div>

</div>
</body>
</html>
Avatar billede olebole Juniormester
25. maj 2010 - 21:29 #7
Det undrer mig lidt, du ikke har valideret koden. Der er 25 HTML-fejl og en CSS-fejl. Nogle af dem alvorlige. Derudover er der lidt uhensigtsmæssig kode i CSS-koden til din innertube klasse. Prøv denne kode i stedet:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<!-- Minus AutoDato -->
<head>
<meta name="Generator" content="Stone's WebWriter 4" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Title</title>
<style type="text/css">
body{
    margin: 0;
    padding: 0;
    line-height: 1.5em;
}
b{font-size: 110%;}
em{color: red;}
#maincontainer{
    background-repeat:repeat-y;
    width: 900px; /*Width of main container*/
    margin: 0 auto; /*Center container on page*/
    border: solid #333333 1px;
}

#topsection{
    background-color: #000000;
    /* background-image:url(top.jpg);
    background-repeat:repeat-y; */
    height: 90px; /*Height of top section*/
}
#topsection h1{
    margin: 0;
    padding-top: 15px;
}

#contentwrapper{
    background-repeat: repeat-y;
    float: left;
    width: 100%;
}

#contentcolumn{
    background-color: #FFFFFF;
    margin: 0 5px 0 200px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
    height: 400px;
    overflow: auto;
}

#leftcolumn{
    background-color: #000000;
    float: left;
    width: 200px; /*Width of left column in pixel*/
    margin-left: -900px; /*Set margin to that of -(MainContainerWidth)*/
    height: 400px;
}

#rightcolumn{
    background-color: #FFFFFF;
    float: left;
    width: 5px; /*Width of right column*/
    margin-left: -5px; /*Set left margin to -(RightColumnWidth)*/
    height: 400px;
}

#footer{
    height: 100px; /*Height of top footer section*/
    clear: left;
    width: 100%;
    background: black;
    color: #FFFFFF;
    text-align: center;
    padding: 4px 0;
    background: red;
}
#footer a{
    color: #FFFF80;
}
.innertube{
    margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
    margin-top: 0;
    padding-top: 20px;
}
h1 { 
    font: 16px arial, sans-serif;
    color: yellow;
    line-height: 22px;
    text-align: center;
}
h2 {   
    font: 16px "comic sans MS";
    color: #00198d;
    text-align: left;
}
</style>
</head>
<body>

<div id="maincontainer">
    <div id="topsection">
        <div class="innertube">
            <h1>H1 tekst</h1>
        </div>
    </div>

    <div id="contentwrapper">
        <div id="contentcolumn">
            <div class="innertube">
                <h2>Tekst i H2</h2>
                aa
            </div>
        </div>
    </div>

    <div id="leftcolumn">
        <div class="innertube">venstre kolone</div>
            venstre kolonne<br /><br /><br /><br />
            venstre kolonne<br /><br /><br /><br />
    </div>

    <div id="rightcolumn">
        <div class="innertube">
            <!-- <H1>Højre kolonne</H1> -->
        </div>
    </div>

    <div id="footer">Footer</div>
</div>

</body>
</html>

Jeg tager ikke stilling til kodens opbygning. Jeg har udelukkende ryddet op i den, så den vises nogenlunde ens i forskellige browsere - og stillet den lidt mere overskueligt op.
Avatar billede olebole Juniormester
25. maj 2010 - 21:36 #8
- og da W3C har opgivet at videreføre XHTML standarden, som vi kender den, kan du ligeså godt skrive den i HTML 4.01:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!-- Minus AutoDato -->
<head>
<meta name="Generator" content="Stone's WebWriter 4">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Title</title>
<style type="text/css">
body{
    margin: 0;
    padding: 0;
    line-height: 1.5em;
}
b{font-size: 110%;}
em{color: red;}
#maincontainer{
    background-repeat:repeat-y;
    width: 900px; /*Width of main container*/
    margin: 0 auto; /*Center container on page*/
    border: solid #333333 1px;
}

#topsection{
    background-color: #000000;
    /* background-image:url(top.jpg);
    background-repeat:repeat-y; */
    height: 90px; /*Height of top section*/
}
#topsection h1{
    margin: 0;
    padding-top: 15px;
}

#contentwrapper{
    background-repeat: repeat-y;
    float: left;
    width: 100%;
}

#contentcolumn{
    background-color: #FFFFFF;
    margin: 0 5px 0 200px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
    height: 400px;
    overflow: auto;
}

#leftcolumn{
    background-color: #000000;
    float: left;
    width: 200px; /*Width of left column in pixel*/
    margin-left: -900px; /*Set margin to that of -(MainContainerWidth)*/
    height: 400px;
}

#rightcolumn{
    background-color: #FFFFFF;
    float: left;
    width: 5px; /*Width of right column*/
    margin-left: -5px; /*Set left margin to -(RightColumnWidth)*/
    height: 400px;
}

#footer{
    height: 100px; /*Height of top footer section*/
    clear: left;
    width: 100%;
    background: black;
    color: #FFFFFF;
    text-align: center;
    padding: 4px 0;
    background: red;
}
#footer a{
    color: #FFFF80;
}
.innertube{
    margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
    margin-top: 0;
    padding-top: 20px;
}
h1 { 
    font: 16px arial, sans-serif;
    color: yellow;
    line-height: 22px;
    text-align: center;
}
h2 {   
    font: 16px "comic sans MS";
    color: #00198d;
    text-align: left;
}
</style>
</head>
<body>

<div id="maincontainer">
    <div id="topsection">
        <div class="innertube">
            <h1>H1 tekst</h1>
        </div>
    </div>

    <div id="contentwrapper">
        <div id="contentcolumn">
            <div class="innertube">
                <h2>Tekst i H2</h2>
                aa
            </div>
        </div>
    </div>

    <div id="leftcolumn">
        <div class="innertube">venstre kolone</div>
            venstre kolonne<br><br><br><br>
            venstre kolonne<br><br><br><br>
    </div>

    <div id="rightcolumn">
        <div class="innertube">
            <!-- <H1>Højre kolonne</H1> -->
        </div>
    </div>

    <div id="footer">Footer</div>
</div>

</body>
</html>

- og så ville jeg helt klart vælge utf-8 som tegnsæt i stedet:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Det kræver dog, at du gemmer dine filer som utf-8. Du kan evt. tjekke hvilket tegnsæt, filen er gemt med ved at åbne den i Notepad. Vælg så Save as..., hvor tegnsættet kan ses/vælges forneden i dialogen.

Bruger du database, skal du også sørge for, at den kører utf-8. Så er du til gengæld kompatibel med resten af verden og moderne webteknologier  ;o)
Avatar billede ngr Praktikant
25. maj 2010 - 21:50 #9
Hej Olebole
1000 tak skal du have. Jeg validerede den også, da jeg så dit link, men anede ikke, hvad jeg skulle stille op med alle fejlene. Som sagt har jeg ikke selv lavet den - men håber på at kunne blive klogere på css ved at lege med den (filen, altså).
Jeg bruger webwriter, men kan ikke umiddelbart se, at man kan vælge at gemme som utf-8 eller noget, der ligner.
Mvh
Avatar billede ngr Praktikant
20. december 2010 - 00:19 #10
nkn,nk,n
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
Programmeringssprog kurser
Kurser inden for grundlæggende programmering
Se alle Programmeringssprog kurser

Flere spørgsmål fra Programmeringsværktøjer kategorien

Titel Indlæg Oprettet Seneste aktivitet
Capcha problemer Af Asky i Programmeringsværktøjer 0 02/03/202517:21 -
senior Af Uroda i Programmeringsværktøjer 1 22/06/202418:29 23/06/202413:17
Sort Skærm Af Kaj Sondrup i Programmeringsværktøjer 5 25/02/202421:45 27/02/202420:17
DATA (D) Af rene1111 i Programmeringsværktøjer 3 21/02/202415:03 22/02/202409:08
Power Automate, åben en fil der er delt med mig Af KATM i Programmeringsværktøjer 1 16/02/202409:07 19/02/202409:10
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester



Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
24 min siden Ændre autoudfyld i Outlook og Word Af TTA i Office & Kontorpakker
I dag 12:27 Office Pro 2019 forsvinder Af mort1 i Office & Kontorpakker
I går 16:34 Se filmen : "Vi, som går køkkenvejen" (Hovedperson : Birgitte Reimer Af Ikke-ekspert i Fri debat
02/0719:07 Mellem tidspunkter Af nyhavn18 i Excel
02/0710:02 Oversigt over antal feriedage Af AnjaJesse i Excel
White papers
Flere white papers »


Premium
Teaser billede
Vil fyre tusindvis af ansatte globalt: Nu reagerer Microsofts danske organisation med 800 medarbejdere
Læs mere »
Staten binder sig med ny aftale til Microsoft i usædvanlig lang tid - og det er der en særlig årsag til
Pengene vælter ud af den danske Dynamics-kæmpe Cepheo i selskabets andet leveår - men forretningen buldrer frem
Du skal opdatere hurtigst muligt: Alvorlig sårbarhed opdaget i Citrix-software
Se alle »
Computerworld
Teaser billede
Danmarks største fiberselskab skifter navn: Norlys skal ikke længere hedde Norlys
Læs mere »
Glemte at fjerne adgang for suspenderet it-medarbejder: Næste dag var kunder i Tyskland og Bahrain låst ude
Amerikansk koncern med 700 ansatte i Danmark: Sender besked til kunder 21 måneder efter storstilet angreb
Microsoft kæmper med at få Copilot ud over rampen – og det skyldes især én ting
Se alle »
CIO
Teaser billede
Microsoft kæmper med at få Copilot ud over rampen – og det skyldes især én ting
Læs mere »
Her står medarbejderne for at ansætte og fyre - og det har gjort rekruttering af it-professionelle langt lettere
Rigspolitiet gør klar til stort opgør med it-evighedskontrakter: Søger hjælp fra leverandørerne
Mange CISO'er mistrives i jobbet: Nu stiller tidligere cyber security-chef i Energinet og Ørsted et kontroversielt forslag
Se alle »
Job & Karriere
Teaser billede
Fungerede ikke: Dropper AI som erstatning for kundeservice-medarbejdere - har nu brug for nye folk
Læs mere »
It-chef og halv it-afdeling fyret i forsikringsselskab på grund af kommentar om potteplante
Danske it-folk tør ikke længere skifte job hele tiden - og det er der en særlig årsag til
Itm8 fyrer: Opsiger ansatte og reorganiserer
Se alle »
White paper
Teaser billede
Sådan samler du virtualisering og containerdrift i én løsning
Læs mere »
IT i front: Sådan bliver netværk en strategisk driver
Undgå at printeren bliver svageste led i sikkerheden
Tidsbegrænset kampagne: Overvejer du at udskifte eller tilføje printere i din forretning? Vi kan tilbyde én eller flere maskiner gratis
Se alle »

Events
Flere events »
White papers
Flere white papers »
IT-Kurser
Se alle vores it-kurser »