Sidan drar ut sig när jag lägger till Doctype

17 svar · 705 visningar · startad av mackanz 1 feb. 2006

mackanzMedlem sedan sep. 2003443 inlägg

Frågan1 feb. 2006 10:34#1

Hej!

Jag undrar varför en sida drar i sär sig så mkt att det blir en scoll horisontell scroll.

Den horisontella scrollen kom till när jag lade till

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

högst upp på sidan. (skrivet på en hel rad)

Jag vet inte alls vad som det är som gör att sidan drar ut sig.
På vissa sidor jag ställt tabellen till width="96%" med det hjälper inte.

http://www.markuz.se/index2.htm <-- Hemsidesadressen
http://www.markuz.se/global.css <-- CSS Mallen

Sidan är "tyvärr" uppbyggd med ramar och tabeller

mackanzMedlem sedan sep. 2003443 inlägg

1 feb. 2006 12:22#2

Har testa att skriva det mesta i bodytaggen för css:en men inget funkar.
Vad är det som drar ut sidan?

tantenMedlem sedan nov. 20051 596 inlägg

1 feb. 2006 12:38#3

Med IE:s sätt att räkna marginaler och padding så är jag lite osäker på om dina 96% räcker. Du har ju ganska mycket cellspacing border och liknande lite här och där. Om du raderar dessa och lägger in det i css i stället.
*{
margin:0;
padding:0;
}
som du bör lägga in i din css-fil. Börja med den och se om det hjälper.

Den här glömde jag som en del säger hjälper i vissa situationer.
html { overflow-x:hidden; }

mackanzMedlem sedan sep. 2003443 inlägg

1 feb. 2006 13:02#4

Hjälper inte...

Men....

Sidorna såg ok ut innan jag lade in doctypen. Då hade jag inte en horisontell scoll utan bara en verikal där det behövdes.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

Doctypen måste jag ha för att få lite annat css-tjafs att fungera.

Jag ser ju absolut ingeting så drar ut sidan. För ökar jag sidbredden får jag ändå en liten horisontell scoll.

EwikMedlem sedan apr. 200491 inlägg

1 feb. 2006 13:10#5

Prova så här istället:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

mackanzMedlem sedan sep. 2003443 inlägg

1 feb. 2006 13:23#6

Gör jag så som Ewik skrev så blir sidan "normal" och scrollen i sidled försviner.

men då funkar inte följande css-element.

.img {
border: 1px  #20466A;
background-color:#ffffff;
padding:5px;
margin: 0px 0px 0px s0px;
}

då får jag ingen padding till bilderna utan bara en ram.

Så det verkar som jag får välja. Antingen srcoll i sidled eller css-effekt på bilderna. :(

tantenMedlem sedan nov. 20051 596 inlägg

1 feb. 2006 13:39#7

Ta bort punkten framför img

mackanzMedlem sedan sep. 2003443 inlägg

1 feb. 2006 13:44#8

Punkten har jag nu för att det ska bli en klass eftersom alla bilder inte ska ha css-effekten. Funkade inte utan. Men punkten ska finnas eftersom det är en class.

zcorpanMedlem sedan dec. 20042 245 inlägg

1 feb. 2006 15:21#9

Hmm...testa:

body { overflow-x:hidden; }

mackanzMedlem sedan sep. 2003443 inlägg

1 feb. 2006 16:13#10

Funkar ej. Blir gråhårig snart....

Jag ger upp snart ;)

(eller så får jag bygga om sidan helt efter WAI/W3C Standards.
jag gjiorde ju det emd min onlinecv så varför ska det inte funka
med min andra sida.)

zcorpanMedlem sedan dec. 20042 245 inlägg

1 feb. 2006 16:25#11

mackanz skrev:

Funkar ej. Blir gråhårig snart....

Det funkar för mig. Det är alltså på sidan som ligger inuti din iframe.

mackanzMedlem sedan sep. 2003443 inlägg

1 feb. 2006 17:50#12

På mainsidan har jag inte applicerat någon css effekt på bilderna, så därför ser det ut som att det funkar kanske?

Se på https://www.markuz.se/index2.htm (klicka på ex dansband och sedan rekomenderat så ser du)

Css eftekten består av en linje och en padding på 5px. Den funkar inte om inte doctypen finns med.

http://www.markuz.se/index2.htm <-- Hemsidesadressen
http://www.markuz.se/global.css <-- CSS Mallen

zcorpanMedlem sedan dec. 20042 245 inlägg

1 feb. 2006 19:14#13

Jag pratar inte om bilderna, jag pratar om den horisontella scrollen.

tantenMedlem sedan nov. 20051 596 inlägg

1 feb. 2006 19:27#14

Jag har scroll och bildeffekt i IE, varken det ena eller andra i FF
Nedre menyn ser konstig ut i FF.
Du har dubblerat class på dina bilder, åtminstone på Rekommendationssidan.
Ser inte att du lagt in något av det jag eller zcorpan skrev i din css.
När jag ber om sidinfo i FF så har sidan tolkats som windows-1252. (kan ev. ha betydelse, men jag vet inte säkert.)

jarvkloMedlem sedan juli 20013 378 inlägg

1 feb. 2006 19:58#15

Hmm...

Hittade detta gamla exempel som jag knackade fram när vi tacklade samma beteende av andra orsaker här på wF för några år sedan :)

http://member.webforum.nu/2241/iframescrollertest1.html - Testa det i olika webbläsare så ser du skillnaden mellan alternativen (MSIE utmärker sig mer än en del andra i detta fall :l )

MSIE hanterar alltså rullisterna i en iframe olika beroende på om sidan som laddas in i iframen går i "standards" eller "quirks" mode som konstaterats ovan...

Förutom att du bör ta bort margin och padding från html och body från dokumentet som laddas in, som föreslagits, verkar det som om du även behöver "trixa" med overflow-x och overflow-y i det dokument som laddas...

Varför har jag glömt - men trådarna där vi råddade igenom olika alternativ finns här på wF om någon orkar leta (jag har också för mig att det finns en elegant lösning som togs fram efter det att mitt testexempel gjordes, men jag hittar inte igen det just nu)...

Lycka till! :birp

tantenMedlem sedan nov. 20051 596 inlägg

2 feb. 2006 08:00#16

Hittade en hel del småfel till i din css. Rättade dem och jag hoppas att FF nu kan läsa den. Jag testade också
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> vilket ger större likheter mellan webläsarna.
Ännu bättre med denna:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Kan du testa detta? Och att vi kan få se resultatet innan innan du tar tillbaka ditt igen... ;)

*{
margin:0;
padding:0;
}
a:hover{
color:#16284c;
text-decoration:none;
}
a:active,a:link,a:visited{
color:#2c5778;
text-decoration:none;
}
caption{
color:#32326d;
font-family:Trebuchet MS,Verdana;
font-size:14pt;
}
html,body{
overflow-x:hidden;
}
html,body{
background-attachment:fixed;
background-color:#fff;
background-image:url(bilder/tmbg.gif);
color:#000;
font-family:Trebuchet MS;
font-size:8pt;
margin-bottom:0;
margin-left:0;
margin-right:0;
margin-top:0;
padding:0;
scrollbar-3dlight-color:#fff;
scrollbar-arrow-color:#6f7894;
scrollbar-darkshadow-color:#fff;
scrollbar-face-color:#fff;
scrollbar-highlight-color:#6f7894;
scrollbar-shadow-color:#6f7894;
scrollbar-track-color:#fff;
}
.brodtext{
color:#112a3f;
font-family:Trebuchet MS,Verdana;
font-size:8pt;
}
.img{
background-color:#fff;
border:1px solid #20466a;
margin:0px 0px 0px s0px;
padding:5px;
}
.input,textarea{
border:1px solid #808080;
color:#000;
font-family:Trebuchet MS Verdana
background-color:#dadfe2;
font-size:9pt;
scrollbar-3dlight-color:#dadfe2;
scrollbar-arrow-color:#c0c0c0;
scrollbar-darkshadow-color:#dadfe2;
scrollbar-face-color:#dadfe2;
scrollbar-highlight-color:#dadfe2;
scrollbar-shadow-color:#dadfe2;
scrollbar-track-color:#dadfe2;
}
.meny{
font-family:Trebuchet MS,Verdana
font-weight:bold;
font-size:9pt;
}
.mrubrik{
background-color:#b5bcc1;
background-image:url(bilder/menyb.gif);
color:#112a3f;
font-family:Trebuchet MS,Verdana;
font-size:8pt;
font-weight:bold;
}
.rander{
border-bottom-color:#c0c0c0;
border-bottom-style:solid;
border-bottom-width:1px;
border-left-width:0px;
border-right-width:0px;
border-top-width:0px dotted;
color:#112a3f;
font-family:Trebuchet MS,Verdana;
font-size:8pt;
}
.rullmeny{
background-color:#fff;
color:#000;
font-family:Trebuchet MS,Verdana;
font-size:8pt;
}
.tdinfo{
width:90%;
}

mackanzMedlem sedan sep. 2003443 inlägg

2 feb. 2006 09:59#17

TANTEN: Nu verkar det fungera när jag kopierade in css-mallen som du tydligen modifierat.

Jag vet inte hur jag ska tacka er. Har ni hemsidor så posta era länkar så länkar jag upp dem i mitt länkarkiv.

Supertack alla som svara t och hjälpt till. Ni är guld värda. :)

tantenMedlem sedan nov. 20051 596 inlägg

2 feb. 2006 10:39#18

Vad skönt då, men tänk på att dina sidor nu är 0-ställda... vilket gör att du kan behöva ändra marginaler och padding lite här och där.
Sedan finns det sådant som inte är bra med din css, som jag inte ändrade.
Textstorlen pt är egentligen för utskrifter och bör inte användas på webben. Du bör också ha med några fler fonter. t.ex font-family: "Trebuchet MS", Verdana, Geneva, Arial, Helvetica, sans-serif ;

Lycka till i fortsättningen.