Notifikationer

Markér alle som læst Log ud

tokelil Nybegynder

27. maj 2006 - 19:38 Der er 14 kommentarer og
3 løsninger

position: absolute. IE vs. the rest

Jeg forsøger at lave noget hjemmeside design i xhtml 1.0 strict og er løbet ind i et ellers simpelt problem. Desværre har jeg ikke været i stand til at google et brugbart svar. :(

På siden skal der nederst være en linie med navn mv. Dvs. at hvis indholdet er mindre end browser vinduet, så der ikke skal scrolles, så skal det være placeret nederst i browser vinduet.
Er indholdet derimod længere end browser vinduet, så der skal scrolles, skal det placeres neden under indholdet. (Det er altså ikke synligt før man scroller helt ned)

Den slags er jo for det meste nemt at lave via tables etc., men jeg kan ikke få det til at virke vi <div> etc. + css, så jeg håber der er en der kan hjælpe.

bottom: 1em;
position:abosolute;
gør i IE det jeg er ude efter, mens Firefox korrekt sætter min div i bunden af browser vinduet i stedet. :( (Hvilket vil sige at det kommer til at stå oven i min tekst når der skal scrolles)

Nogen der ved hvordan jeg får placeret min tekst korrekt?

Synes godt om

olebole Juniormester

28. maj 2006 - 02:21 #1

<ole>

Har du mon noget stående før din DTD ... en XML-deklaration, f.eks? Det må du ikke, da IE så ikke understøtter CSS. Prøv at skrive dette i adressefeltet i IE, mens du står på siden:
java script:alert(document.compatMode)

Hvis der returneres 'backCompat', har du sikkert noget stående før DTD'en, der skal slettes :)

/mvh
</bole>

Synes godt om

olebole Juniormester

28. maj 2006 - 02:22 #2

"Prøv at skrive dette i adressefeltet i IE, mens du står på siden - og tryk 'Return':" ;o)

Synes godt om

olebole Juniormester

28. maj 2006 - 02:25 #3

- der burde nu ikke være problemer med den kode, du viser - så du må nok lægge et link :)

Synes godt om

mclemens Nybegynder

28. maj 2006 - 03:32 #4

Kiggede på den før og var lidt rundt på gulvet ...
regner med at problemet er noget i denne stil ... kan bare ikke lige se løsningen undtagen at man js'er height over til fra den ene div til den anden - så den bund div'en placeres ordentligt :/

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">
html,body{padding:0px;margin:0px;height:100%;}

#cont{height:100%;position:relative;}
#bcont{bottom:10px;position:absolute;font-size:20px;}

div.spacer{height:40px;}

</style></head>

<body>

<div id="cont">

abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abcslut<br>abc<br>abc<br>abcslut<br>abc<br>abc<br>abcslut<br>abc<br>abc<br>abcslut<br>abc<br>abc<br>abcslut<br>abc<br>abc<br>abcslut<br>

<div class="spacer"> </div>

<div id="bcont">deffffffffffffffff</div>

</div>

</body></html>

Synes godt om

mclemens Nybegynder

28. maj 2006 - 04:17 #5

øv kl. er 4:17 ,lidt for sent her er et script eksempel ...
ikke helt optimalt - man kan måske bruges :/

<script type="text/javascript">
window.onload=function(){
tmph=document.getElementById("cont");
if(tmph.scrollHeight>=document.body.scrollHeight){tmph.style.height="auto";document.getElementById("bcont").style.top=tmph.offsetHeight-30+"px";}
}
</script>

Synes godt om

tokelil Nybegynder

28. maj 2006 - 12:15 #6

Olebole:
Så vidt jeg ved skal der da være en xml deklarering for at kunne validere som xhtml. Og css virker "fint" i eksemplet nedenunder.
Men du har ret i den skrive backCompat med xml deklarationen der og css1compat uden. Men det ændre ikke på hvordan den opføre sig, og den læses css begge gange.

mclemens:
Tak for forslaget med JS, har selv tænkt på det... Men jeg må sige at det ikke er løsningen jeg leder efter. Det var mit mål at løse det uden brug af tables (som folk jo påstår er onde... Har personligt ikke den opfattelse, men anyway) og JS "hacks" er mindst lige så onde IMO.

Anyway, jeg har valgt at løse det med xhtml 1.0 strict compatible tables alligevel, men hvis nogen kan komme op med en måde at gøre det på uden, så er jeg lutter "øre".

Min code, som desværre ikke opføre sig helt som jeg beskrev i første post, men det er ikke ens på IE og FF. (Det er muligt der skal indsættes mere tekst for at få det til at scrolle...)

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da" lang="da">
<title></title>
<style type="text/css">
body {
color: black;
background-color: white;
text-align: center;
}

address {
margin-top: 0.3em;
padding-top: 0.3em;
border-top: thin dotted;
position: absolute;
bottom: 1em
}
</style>
</head>
<body>
<p>
en <br /> masse <br /> tekst <br /> en <br /> masse <br /> tekst <br /> en <br /> masse <br /> tekst <br /> en <br /> masse <br /> tekst <br /> en <br /> masse <br /> tekst <br /> en <br /> masse <br /> tekst <br /> en <br /> masse <br /> tekst <br /> en <br /> masse <br /> tekst <br /> en <br /> masse <br /> tekst <br /> en <br /> masse <br /> tekst <br /> en <br /> masse <br /> tekst <br /> en <br /> masse <br /> tekst <br />
</p>

<address>Dette skal stå nederst på siden</address>

</body>
</html>

Synes godt om

mclemens Nybegynder

28. maj 2006 - 12:44 #7

[ ... og JS "hacks" er mindst lige så onde IMO. ] - Kunne ikke være mere enig.

[ ... med xhtml 1.0 strict compatible tables alligeve ... ] - Tables er ikke helt beregnet til designmæssig placering af objecter ... så det er vel også en slags hack - men hvis når det virker, så er det helt klart bedre end et js-hack :)

[ mit mål at løse det uden brug af tables (som folk jo påstår er onde... ] - Har heller intet imod dem ... det kan bare ved overdreven brug hurtigt komme til at fylde ... desværre :/ (men det kan overdreven brug af div's selvfølgelig også :) )

... kan heller ikke komme tættere på en løsning, end det jeg kom til før uden at hoppe over til tabeller hellere - men, måske kan olebole se alternativet :)

Synes godt om

mclemens Nybegynder

28. maj 2006 - 12:52 #8

[ Så vidt jeg ved skal der da være en xml deklarering for at kunne validere som xhtml. ] - xml deklarationen kan være nødvendig i enkelte situationer for at browserne virker som man vil... b.l.a. haft noget fixed no-repeat baggrunds billede på html,body{} med/uden xml deklaration i FF ...

- m.h.t. css, så kan det være noget af en udfordring at bruge padding og lignende css i IE...

- Men, hvis man får problemer senere med noget css, kan man jo prøve at fjerne xml'eren - jeg vælger dog at beholde min :)

Synes godt om

olebole Juniormester

28. maj 2006 - 20:01 #9

CSS foreskriver helt klart, at borders skal lægges udenom den del af elementet, der defineres af height og width. Prøv så dette dokument i FF og IE:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da" lang="da">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>TITLE</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
background-color: yellow;
}
.withBorders {
border: 50px solid red;
}
</style>
</head>
<body>

<div>En tekst</div>
<div class="withBorders">En tekst</div>

</body>
</html>

- prøv derefter at slette XML-deklarationen og test igen i begge browsere. IE forstår simpelthen ikke CSS' box-model, når der står noget somhelst før DTD'en. Denne bug bliver rettet i IE7.0, men det kan jo sagtens efterfølgende tage et par år, før den er tilstrækkelig udbredt.

Løsningen er at slette XML-deklarationen. Der er formodentlig intet at bruge den til, da dokumentet sikkert under alle omstændigheder parses/behandles som HTML - og ikke XHTML. XHTML er elendig understøttet på WWW ... selvom man efterhånden dårlig tør nævne det :)

Synes godt om

olebole Juniormester

28. maj 2006 - 20:04 #10

- og dokumentet validerer iøvrigt glimrende uden XML-deklarationen ;o)

Synes godt om

mclemens Nybegynder

28. maj 2006 - 20:35 #11

Kan kun give Olebole ret i problemer m.h.t. xml deklarationen :)
Og med hensyn til xhtml generalt ... ja så kan man ikke sige, det er nødvendigt, som landet ligger idag - det kan kun give problemer ... Det løser ihvertfald ikke nogle problemer, der ikke kan håndteres bedrer med html 4.01 (så vidt jeg ved) :)

... virker lidt dumt at jeg ikke synes, at den doctype jeg selv bruger, ikke er optimal som landet ligger idag - men det er en længere historie, der står i en anden tråd ... ( http://www.eksperten.dk/spm/711580 ) <- der står lidt om xhtml vs. html, og jeg tror ikke den kan uddybes yderligere ...
- ellers så klik på Olebole (eller rettere hans navn) og find artikler oprettet af ham... alle 3 artikler anbefales :)

Synes godt om

tokelil Nybegynder

06. juni 2006 - 15:44 #12

Nå, som sagt løste jeg det med tables for denne gang... Ærgeligt der ikke er bedre understøttelse for xhtml 1.0 strict etc.
Anyway, tak for eksemplerne og diskussionen. Hvis i smider et svar kan vi dele pointene...

Synes godt om

mclemens Nybegynder

06. juni 2006 - 16:59 #13

ok :)

Synes godt om

olebole Juniormester

06. juni 2006 - 18:32 #14

*griiiiiiiiib* ;o)

Synes godt om

mclemens Nybegynder

06. juni 2006 - 19:13 #15

- og tak for point :)

Synes godt om

olebole Juniormester

06. juni 2006 - 19:34 #16

Tak herfra også ;o)

Synes godt om

tokelil Nybegynder

06. juni 2006 - 19:35 #17

Selv tak... :)

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

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.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS