/ Forside/ Teknologi / Internet / Hjemme sider / Spørgsmål
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
Hjemme sider
#NavnPoint
molokyle 23766
Klaudi 7947
bentjuul 7763
BjarneD 4584
severino 4460
Manse9933 4366
natmaden 3985
disken 3947
miritdk 3593
10  refi 3578
HTML og Firefox
Fra : stl_s
Vist : 705 gange
500 point
Dato : 11-03-07 03:16

Håber på lidt hjælp fra HTML genierne.

Jeg har lige åbnet et sikkerhedsforum. Jeg skal ikke have nogen hjemmeside, men på domænet har jeg lagt en enkelt henvisende side ind. Jeg har bestemt ikke en hujende fis forstand på HTML, webdesign osv, men har alligevel fået bikset en side sammen. Den ser ok ud i IE7 og Maxthon browsere, men den sucks simpelthen i Firefox. What to do ? Kan man "standardisere", eller whatever der skal til ? Den er her http://malwarecheck.dk/


Indrømmet, designet sucks, og hvis en kan komme op med et pænere design, hvor tekst og billede indgår, smider jeg gerne en bunke points oveni.

 
 
Kommentar
Fra : o.v.n.


Dato : 11-03-07 04:50

Nu er du vist kræsen ikke at jeg har forstand på noget, men jeg kan ikke se forskel, jeg har 2 ens sider åbne, en i Internet Explorer 6 og en i Firefox 2.0.0.2 har bladret lidt, der ingen synlig forskel måske skal man være medlem for at se forskellen

Kommentar
Fra : rootyphp


Dato : 11-03-07 08:14
Kommentar
Fra : molokyle


Dato : 11-03-07 08:23

Se, det er et meget komplekst spørgsmål du stiller stl_s.

Tjek som det første om koden er 'gangbar' (valid):

(X-)HTML: http://validator.w3.org/
CSS 1,2,3: http://jigsaw.w3.org/css-validator/

For det første skal du sikre dig at der bruges den rette !DOCTYPE ellers sættes browserne i quirksmode, hvilket kan give utilsigtede sideeffekter, da browserne så 'gætter' en standard og dette gør de alle forskelligt. Ved at vælge en !DOCTYPE sættes browseren i standard compliant mode og bør da følge angivne standard version valgt med !DOCTYPE'n.

Læs om valg af !DOCTYPE hér:

1.) http://www.upsdell.com/BrowserNews/res_doctype.htm
2.) http://www.ericmeyeroncss.com/bonus/render-mode.html

(X-)HTML og CSS er en (flere) standarder ..og så findes der en hel del proprietære kommandoer/funktioner lavet af Microsoft og som kun forstås af deres produkter; IE/Frontpage og Internet Information Services (IIS).

Standarden/-erne for (X-)HTML er fastlagt af http://www.w3.org/ ..og man bør kode sine sider således, at de følger deres anvisninger.

Dette har gjort at man gennem tiden har måtte lave 'hack's for at få IE til at makke ret i forhold til andre browsere. Lad mig nævne: The Holly hack, Tantek hack, m.fl. ..for de flestes vedkommende; for at imødegå de fejl IE er årsag til, når man benyttede CSS box modellen. IE7 har rettet mange af disse fejl, men ikke dem alle og hvad værre er: De 'gamle' hacks får IE7 til at 'vælte'.

Imidlertid kan man 'udnytte' at Microsoft har lavet nogle betingede kommentarsætninger ( http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/overview/ccomment_ovw.asp ) så man kan 'udmaske' de 'ting', som er specielle for IE browserne. (Ja, hver eneste IE version har sine finurligheder!)

NB: Der findes sider som beskæftiger sig specielt med denne problematik. En af de aller væsentligste er denne: http://www.positioniseverything.net/

..og så er der en 'elegant' løsning som her bekrives/diskuteres af CSS Guru'en; Eric Meyer: http://meyerweb.com/eric/thoughts/2005/10/17/ie7-and-ie7/

Den går i korte træk ud på:

1.) Kod efter standarden.
2.) Hvis IE? ..så brug betingede kommentarer til at indlæse Dean Edwards IE script.

Scriptet kan hentes her: http://dean.edwards.name/ie7/

Meget af ovenstående kan du finde beskrevet på dansk af Jørgen Farum Jensen, deles gennem hans bøger som nok er de mest udbredte/brugte undervisnings referencer, når det kommer til webdesign, dels på hans hjemmeside: http://webdesign101.dk/

Hvis du har specifikke spørgmål til dele af koden på din side, så skal jeg gerne prøve at være behjælpelig, så langt evnerne rækker.

</MOLOKYLE>

Kommentar
Fra : molokyle


Dato : 11-03-07 08:38

Ved blot at kaste et blik på din sides kode falder det i øjnene at du blander CSS lokale stylesheets med in-line styles. Lad være med det, saml dine styles i et externet CSS stylesheet ! Dels kan du bruge samme stylesheet på alle sider, dels blever det en hel del nemmere at vedligeholde, da rettelser så kun skal foretages ét sted, nemlig i CSS filen.

..og det kan SLET ikke anbefales at blande 'gamle' layout markører som er under udfasning ..og så oveni købet style dem med in-line CSS

Eks.
Kode
<FONT style="BACKGROUND-COLOR: transparent" face="Georgia, Serif" color=#d0d0d0>


..hæslig konstruktion

Det er ikke forkert i forhold til den transitionelle !DOCTYPE du har valgt, men kan give ret uforudsigelige bivirkninger.

Jeg tror du slipper nemmest om det hvis du vælger at implementere dine sider i XHTML 1.0 med strict DTD ..så får du slet ikke 'lov' at lave konstruktioner som ovenstående

Lær XHTML: http://www.w3schools.com/xhtml/default.asp

..og kig lidt mere på CSS: http://www.w3schools.com/css/default.asp

Ps. Det første som sker når man validerer din side, er en besked om manglende tegnsæt. Vælg det vesteuropæiske:
Kode
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />


</MOLOKYLE>

Kommentar
Fra : molokyle


Dato : 11-03-07 08:44

En rigtig god dansk 'begynderside' (..jeg bruger den selv som reference ind imellem) er:

http://www.hjemmesideskolen.dk/

Den forklarer trin for trin de vigtigste designmæssige tiltag i et let forståeligt sprog

..en anden god dansk side er:

http://www.html.dk/

</MOLOKYLE>

Kommentar
Fra : molokyle


Dato : 11-03-07 08:53

Til slut vil jeg anbefale en side med CSS demonstrationer, hvor der virkelig er mange fine ting at hente ..og lære:

http://www.cssplay.co.uk/

..og en side med mange gode artikler om webdesign emner:

http://www.alistapart.com/

Når du tror du er færdig? ..og alt validerer korrekt? ..og ser Ok. ud i alle browsere? ...så læser du lidt om The Web Accessibility Initiative (WAI) :

http://www.w3.org/WAI/

</MOLOKYLE>

Kommentar
Fra : stl_s


Dato : 11-03-07 12:03

o.v.n -> Når jeg ser den i Firefox (portable), så "hænger" den nederste linie højt oppe på siden, i stedet for at ligge pænt i bunden. det er det primære problem. Jeg ser også en vis farveforskel.

rootyphp -> Takker, men jeg ved ikke rigtigt hvordan jeg skal bruge det der .

Molo -> Tak for al infoen, men jeg har ikke kodet siden, men blot bixet den samme i one.com`s editor. Som sagt, jeg fatter hat af HTML, og orker nu heller ikke at sætte mig vildt meget ind i alt det komplekse, for den ene sides skyld .

Men vil selvfølgelig gerne have den til at opføre sig korrekt.

Så Jeg havde håbet på nogle konkrete forslag til at få den rettet ind.

Kommentar
Fra : molokyle


Dato : 11-03-07 12:28

Jeg skal gerne kigge på 'problemet' senere for at rette op på 'miseren', men da det kræver en del arbejde med at hente relevant grafik mm. fra din side og teste det offline hos mig selv (...jeg kan jo ikke oploade via FTP til din server ), så må du nok ha' en smule tålmodighed.

Jeg gætter på det har noget med føromtalte CSS stylign blandet med udfasede layoutelementer som f.eks. <font> .. </font> og tilsvarende parametre f.eks. align=center og så dine manglende anførsels tegn og blanding af små og STORE bogstaver:
Kode
<BODY style="BACKGROUND: #333333" text=#000000>


..er helt ude i skoven og skal skrives:
Kode
<body style="background-color:#333333; text-color:#000000;">


..selvom du burde have skrevet egenskaberne ind i dit lokale stylesheet:
Kode
body, td {font-size: 12pt; font-family: times new roman, times, serif}


..ved at dele op:
Kode
body {
background-color:#333333;
text-color:#000000;
}
td {
background-color:#333333;
text-color:#000000;
font-size: 12pt; font-family: times new roman, times, serif
}

...eller bruge en class definition:
Kode
body.forside {
background-color:#333333;
text-color:#000000;
}
td.tabelfelt {
background-color:#333333;
text-color:#000000;
font-size: 12pt; font-family: times new roman, times, serif
}


..og så henvise i HTML koden til disse klasser:
Kode
<body class="forside">
.
.
<table>
<tr>
<td class="tabelfelt">..</td>
</tr>
</table>
.
.
</body>


Der er bestemt rum for forbedringer, men det kræver en smule arbejde fra din side, medmindre du ønsker jeg skal scriple hele skidtet for dig

..og DÉT koster

Jeg kigger ind senere på dagen ...og ser hvordan det går ...hej så længe

</MOLOKYLE>

Kommentar
Fra : stl_s


Dato : 11-03-07 12:35

Takker Molo . Jeg prøver at kigge på det. Bliver nok ikke i dag, da jeg får gæster om lidt.

Går det helt galt så sender jeg gerne en kasse øl , eller whatever i din retning, hvis du vil lave det.

Kommentar
Fra : molokyle


Dato : 11-03-07 20:08

..for at få det på det rene:

Det er vel din forside vi taler om? http://malwarecheck.dk/

..ikke din phpBB side? http://www.malwarecheck.dk/forum/

..for jeg kan ikke se anden forskel end scrollbaren i højre side. (=vises i IE, men ikke i Firefox).

Forskel i skriften skyldes, at jeg har aktiveret 'Clear Type' i IE.

Divergerende farver skyldes, at der kun findes 216 crossbrowser faste webfarver:

http://www.html.dk/dokumentation/farver/

Som du kan se består farverne af hex tal par'ene: 00, 33, 66, 99, cc og ff.

Derfor vil de farver du benytter: #d0d0d0, #808080 og #4682b4 se en smule anderledes ud i forskellige browsere.

Det du beskriver, at teksten "Login problemer ? Kontakt os her":
Citat
.."hænger" den nederste linie højt oppe på siden, i stedet for at ligge pænt i bunden.

..kan jeg ikke genkende
Den står samme sted i både IE7, Opera, Netscape (IE og Firefox rendering), samt i Mozilla Firefox.

..og hvorfor skulle den stå i bunden? Det har du jo ikke 'bedt' den om?

Skal en tekst stå i bunden af en side, må man lave et footer felt i CSS og placere tekst/grafik dér:

http://alistapart.com/articles/footers

</MOLOKYLE>

Kommentar
Fra : stl_s


Dato : 11-03-07 20:29

Tak Molo, jeg må lige kigge på de farver

Hvorfor du ser linien ens i alle browsere, ved jeg så ikke. Men det det vil være fedt, om den kunne blive lavet som en footer

Hvordan jeg så får det lavet, fatter jeg stadigvæk hat af. De koder, og hvordan det liiiige skal sættes ind, det kan jeg altså ik gennemskue .

Hvis du kan give mig et hint om det, vil jeg blive glad.

Har forhøjet point.


Accepteret svar
Fra : molokyle

Modtaget 500 point
Dato : 11-03-07 20:50

Her er en hurtig skod løsning:

Udskift den sidste del af koden på din side:
Kode
<P align=center><SPAN style="FONT-SIZE: 11pt"><FONT face="Century Gothic, Sans-Serif"><FONT color=#808080>Login problemer ?&nbsp; Kontakt os</FONT>&nbsp;</FONT><A href="mailto:admin@malwarecheck.dk"><FONT face="Century Gothic, Sans-Serif"><U><STRONG><FONT color=#4682b4>her</FONT></STRONG></SPAN><SPAN style="FONT-SIZE: 10pt"></U></FONT></A></SPAN></P></BODY>


..med:
Kode
<SPAN style="position:absolute;display:block;width:98%;text-align:center;bottom:16px;margin:auto;FONT-SIZE: 11pt;"><FONT face="Century Gothic, Sans-Serif"><FONT color=#808080>Login problemer ?&nbsp; Kontakt os</FONT>&nbsp;</FONT><A href="mailto:admin@malwarecheck.dk"><FONT face="Century Gothic, Sans-Serif"><U><STRONG><FONT color=#4682b4>her</FONT></STRONG></SPAN><SPAN style="FONT-SIZE: 10pt"></U></FONT></A></SPAN></BODY>
</HTML>


Så 'burde' du få ønskede effekt.

..men hold kæft det er 'grim' kode

</MOLOKYLE>

Kommentar
Fra : molokyle


Dato : 11-03-07 21:05

Det validerer hverken til højre eller venstre

Bare et eks:

anchor markøren <a..> ... </a> er et såkaldt in-line element og må derfor ikke indeholde block elementer som <font> .. </font> eller <u> .. </u>...MEDMINDRE disse indkapsles i et <span> ... </span> in-line element. Brug dog CSS menneske!

Der er så megen redundant kode, at det skærer i mine øjne og skurrer i mine ører

..men det ka' da være du ka' lære det en dag stl_s?

</MOLOKYLE>

Kommentar
Fra : stl_s


Dato : 11-03-07 21:15

Det lærer jeg nok aldrig .

Må vist hellere holde mig til sikkerhed .

Men godt at DU ved noget om det .

Tak for din store hjælp http://malwarecheck.dk/ (Kigger på farverne senere).

Godkendelse af svar
Fra : stl_s


Dato : 11-03-07 21:16

Tak for svaret molokyle.

Kommentar
Fra : molokyle


Dato : 11-03-07 21:22

Velbekommelse stl_s

</MOLOKYLE>

Du har følgende muligheder
Eftersom du ikke er logget ind i systemet, kan du ikke skrive et indlæg til dette spørgsmål.

Hvis du ikke allerede er registreret, kan du gratis blive medlem, ved at trykke på "Bliv medlem" ude i menuen.
Søg
Reklame
Statistik
Spørgsmål : 177558
Tips : 31968
Nyheder : 719565
Indlæg : 6408914
Brugere : 218888

Månedens bedste
Årets bedste
Sidste års bedste