Har grubblat alldeles för långe på detta och detta j*vla streck som går vertikalt på sidan. Dock har nu DET löst sig.
Det andra problemet som kommit upp är att det "första" stycket blir indraget i FF, på alla sidor. Samt att "rubriken" åker ner litegrann. I IE är det samma höjd som i menyns rubrik.
Hur ska jag komma bort från det?
Sen om man kollar sidan i Opera så flyttas hela sidan, utom bakgrunden, några pixlar höger och ner. Varför då?
Att tillägga är att det är första sidan jag gör i lager.. lite läst här o där, provat o så.. skriv bara inte en kodsnutt utan förklara gärna vad som menas med det.
För det första bör du inte styra avstånd och liknande med <br> taggar. Använd margin och padding i css-mallen istället.
Istället för att applicera <span> för dina rubriker bör du använda riktiga rubriktaggar. På så sätt blir din kod mer semantisk, smidigare och lättare att tyda. :)
Du bör se över din css-mall. Du har tex. glömt att ange enhet på höjden för #top.
Vad händer om du plockar bort height:100%; i #content samt anger margin och padding för alla block. Jag vet att vissa läsare använder ett annat värde än 0 om man utelämnar margin och padding på block-element.
Du kanske vill prova en riktig DOCTYPE när du kodar med css. För nu har du Quirks mode, ett läge där browsers simulerar gamla buggar för att vara bakåt-kompatibla.
Sen har du ju olika kod för rubrikerna, i vänster spalten har du en paragraph innehållande en span och i mitten har du en div i en p vilket är fel. Endast inline elements (b, span etc) får befinna sig in en p.
För rubriken kan du istället använda en h2 (block element, så du får ha den utanför en p) eller något i den stilen, i stället för att ha classer på divs och spans.
Sen som sista tips rekommenderar jag dig också att du vaiderar koden, nu har du ett fel i rad 49 enligt validatorn.
Hmm...
MSIE och Mozilla m.fl har (som PepeJeria säger) olika uppfattning om huruvuda padding skall räknas in i width eller ej eftersom du kör med den <!DOCTYPE du gör.
I MSIE räknas din padding just nu in som en del av width, dvs #leftnav-div:en blir 155px bred (dvs lika bred som margin-left på #content)...
Men i Mozilla läggs padding till utöver width, så #leftnav blir width (155px) + 2em bred (eftersom du har padding: 1em)... Vilket "trycker in innehållet i #content eftersom #leftnav är en "float" som är bredare än #contents margin-left...
Förslag på lösning:
Sätt padding i px för #leftnav (istället för em som du har nu).
Öka margin-left för #content med minst 2* denna nya padding (left och right)
Hmm, nu upptäckte jag en ny grej.
Ta tex FF, drar jag fönstret så att det blir hälften av skärmen blir horisontella strecket kortare och är då inte 100% längre.
Iaf, jag är en sån som har väldigt kort tålamod, konstigt nog har jag stått ut med denna sida väldigt länge nu men den har iofs legat ett tg utan att jag gjort något.
Nu känns det även som om det bara går in en massa kod som jag läser, bra info från er men det behandlas bara inte i min skrympna lilla hjärna.
Så nu e jag väldigt nära o ge upp å strunta i denna sida o börja på nåt nytt... sidan kommer snart inte passa in i sitt rätta jag då hösten e förbi snart. (visst jag kan ändra bild o bakgrund..)
Än vad jag ändar så tycker ajg det inte händer så värst mycket. I värsta fall får jag göra om allt från grunden igen då det brular lösa sig eller så bygger jag på nåt annat sätt.. orkar inte sitta o kolla på samma koder dag in o dag ut.
/r Vilken doctype borde jag ha till den här sidan?
Hmm...
MSIE och Mozilla m.fl har (som PepeJeria säger) olika uppfattning om huruvuda padding skall räknas in i width eller ej eftersom du kör med den <!DOCTYPE du gör.
I MSIE räknas din padding just nu in som en del av width, dvs #leftnav-div:en blir 155px bred (dvs lika bred som margin-left på #content)...
Men i Mozilla läggs padding till utöver width, så #leftnav blir width (155px) + 2em bred (eftersom du har padding: 1em)... Vilket "trycker in innehållet i #content eftersom #leftnav är en "float" som är bredare än #contents margin-left...
Förslag på lösning:
Sätt padding i px för #leftnav (istället för em som du har nu).
Öka margin-left för #content med minst 2* denna nya padding (left och right)
Hmm, får det inte att funka.. men jag kan ha missuppfattat det hela.
Ska jag göra den här ändringen?
Hmm, nåt fel måste det nu vara. Jag förstår tankegången, tackar för förklaringen jarvklo..
Men ändå är topbilden nersänkt och skjuten åt höger men endast i Opera.
IE & Mozill, (FF) är klockrena nu.
Sen det vertikala strecket. Samma där att det är opera som strular. Strecket går ner så långt som det är något skrivet.
Vad ska man då göra åt Opera?
/r Allt e inte som det ska förresten.
Högerspalten är nerskjuten i alla läsare utom IE. Men det kanske beror på rubrikkodningen hit o dit som PepeJeria påpekade..
även det har jag lite problem med att lösa hur jag ska göra.
<p>
<div id="rubrik">Framsidan</div><p></p>
<b>Obs!!!</b> Eftersom detta är min första ... .. ......
</p>
Vad är det för skillnad?
Det som funkar nu är ju att det iaf är lika som IE & FF.. dock att FF börjar lite längre ner men det är skit samma..
Opera gör det hela snett, men måtten emellan är lika, bara det att högerspalten börjar lite mer nedanför.
Får tacka Jarvklo (järvklo?) att jag kommit så här långt iaf. :birp
Gör om id="rubrik" till class="rubrik" överallt (ID="rubrik" får bara förekomma med värdet "rubrik" exakt en gång på en sida, men en class="rubrik" får ha samma värde ("rubrik")flera gånger...
I CSS:en deklarerar du helt enkelt bara om från "#rubrik" till ".rubrik"
OT:
Får tacka Jarvklo (järvklo?) att jag kommit så här långt iaf.
Ingen orsak - och ja jag heter Järvklo men "nickar" jarvklo här :e )
En annan sak, rubriken består av en div med en class, bättre vore att använda dig av headings överallt
<h3>Rubrik</h3>
Om man nu skulle se sidan utan css så ser man inte tydligt vad som är rubrik. Detta tycker jag är en bra ide, att se sidan utan css. Är allt överskådligt så har man lyckats. Gör om menyn också till unordered lists som Okkido sade.
Detta är bara tipps dock, om du är nöjd nu med att det ser bra ut i alla browsers så är det ju helt ok det med! :)
Du behöver inte ha en class på h1 om du nu stylar h1 direkt som du gjort i ditt exempel. Sen till rubrikerna så kanske h2, eller h3 lämpar sig bättre. h1 vore bättre till en huvudrubrik.
Angående lists, så rekommenderar jag följande tutorial som är väldigt bra!
Gjort om menyn till lista och det funkade helt ok så det blir kvar.
Header - hmm, tycker inte det blir snyggt. Vet inte hur jag ska lösa det. Gör jag nån storlek större än det som är nu blir jag inte nöjd.
Validering - Har gått bra det åxå men har lite problem med vissa sidor som jag skulle vilja ha hjälp med.
1. Alla bilders undersidor får fel i valideringen på bildscriptet.
Vet inte hur jag ska åtgärda detta.
2. Under länkar vill jag ha 2 spalter.
Hur fixar jag det? Det som jag har nu funkar inte sen jag tog bort <p>:na.
3. Under bannerbyte får jag valideringsfel igen.
Det är på tabellen, javascriptet och något med form-taggen.
Sen är det en annan sak jag undrar om valideringen. Kan man inte validera hela sidan, istället för att gå igenom sida för sida. Nu har inte jag så många sidor men säg att man skulle ha upp åt en 100 sidor. Ska man bita i det sura äpplet och gå igenom sida för sida?
<script type="text/javascript">
<!--
// Obs! detta är Javascript,
// och kommentarer ser annorlunda ut där!
// Du skall alltså *inte* köra med "HTML-kommentarer
// mellan <script> och </script> annat än de som är med i detta exempel!
/* detta är en annan kommentar */
//-->
</script>
Får återkomma om detta (om ingen annan hinner före villsäga ;) )
Du är trött!
- Du kan inte ha <form> (eller något annat öht) mellan <table> och <tr> :e - byt bara plats på <table> och <form> så löser det sig både form- oc tabellproblemen ;)
- Du måste ha med type="text/javascript" i <script>-taggen (se exemplet ovan)
Ska man bita i det sura äpplet och gå igenom sida för sida?
Yep såvitt jag vet (men jag kan ju ha missat någon ny validator)!
Fast gör man det från början är det egentligen inte så mycket extra jobb per sida ;)
:birp
145 ms totalt · 3 externa anrop · v20260731065814-full.55e59744
