Avatar billede or.han Nybegynder
07. november 2005 - 14:44 Der er 33 kommentarer og
1 løsning

Fejl med float i IE

Jeg har to divs, som skal være ved siden af hinanden. Når jeg skriver "float:left;" ved begge divs, rykker div'en på venstre side lidt til højre. Hvorfor?
Det virker fint i Firefox, men ikke i IE...
Avatar billede roenving Novice
07. november 2005 - 14:53 #1
Prøv at vise det, f.eks. på et link !-)
Avatar billede olebole Juniormester
07. november 2005 - 14:53 #2
<ole>

Nu forstår jeg ikke, hvordan man kan tale om 'venstre' og 'højre' div, før de er floated ... et div er jo et block-level element  :)

Anyway, så må du nok vise noget kode, for det her virker da helt som forventet:

<!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>TITLE</title>
<style type="text/css">
body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}
</style>
</head>
<body>

<div style="width:100px;float:left">Venstre</div>
<div style="width:100px;float:left">Højre</div>

</body>
</html>

/mvh
</bole>
Avatar billede or.han Nybegynder
07. november 2005 - 15:00 #3
Jeg viser ikke hele siden men bare der hvor der er "fejl":

// Div'en til venstre
#siteContainer #indholdContainer{
    margin:5px 0 0 5px;
    padding:7px;
    width:400px;
    height:500px;
    background-color:#FFF;
    overflow:auto;
    float:left;
}

//Div'en til højre
#rightContainer{
    width:120px;
    height:514px;
    margin:5px 0 0 5px;
    padding:0;
    background-color:#FFF;
    float:left;
}

//Div'en som er udenom de to div'er
#siteContainer{
    width:600px;
    height:100%;
    margin:0 0 0 -300px;
    padding:0;
    position:absolute;
    top:0;
    left:50%;
    background-color:#CCC;
}

HTML'en:
<div id="siteContainer">
  <div id="indholdContainer"></div>
  <div id="rightContainer"></div>
</div>
Avatar billede or.han Nybegynder
07. november 2005 - 15:02 #4
De kommentarer som er i CSS, er bare noget jeg lavede her på exp, så det er altså ikke med i min style.
Avatar billede or.han Nybegynder
07. november 2005 - 15:06 #5
I kan se her:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
html,body {
    height:100%;
    width:100%;
    padding:0;
    margin:0;
    overflow:hidden;
    background-color:#DDD;
}
#siteContainer #indholdContainer{
    margin:5px 0 0 5px;
    padding:7px;
    width:400px;
    height:500px;
    background-color:#FFF;
    overflow:auto;
    float:left;
}
#rightContainer{
    width:120px;
    height:514px;
    margin:5px 0 0 5px;
    padding:0;
    background-color:#FFF;
    float:left;
}
#siteContainer{
    width:600px;
    height:100%;
    margin:0 0 0 -300px;
    padding:0;
    position:absolute;
    top:0;
    left:50%;
    background-color:#CCC;
}
</style>
</head>
<body>
    <div id="siteContainer">
        <div id="indholdContainer"></div>
        <div id="rightContainer"></div>
    </div>
</body>
</html>
Avatar billede roenving Novice
07. november 2005 - 15:08 #6
Prøv at sætte en fuld doctype på !-)

F.eks.

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

...
Avatar billede or.han Nybegynder
07. november 2005 - 15:12 #7
Tænkte nok du ville sige det, men det løste ikke problemet. Jeg havde også doctype på det rigtige dokument men glemte bare at sætte det på nye jeg lavede til jer.
Avatar billede olebole Juniormester
07. november 2005 - 15:35 #8
Nu forstår jeg, hvad du mente med, at det rykker sig mod højre  ;o)

Det er en sær renderings-fejl, hvor IE åbenbart ganger venstre-margin med to, inden den asign'es ... eller noget i den retning  :o|
Avatar billede or.han Nybegynder
07. november 2005 - 15:54 #9
Har du en løsning på det?
Avatar billede olebole Juniormester
07. november 2005 - 16:04 #10
Ja, du kan f.eks. bruge en kombination af relativ og absolut positionering:

<!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>Untitled Document</title>
<style type="text/css">
html,body {
    height:100%;
    width:100%;
    padding:0;
    margin:0;
    overflow:hidden;
    background-color:#DDD;
}
#indholdContainer{
    position: absolute;
    left: 5px;
    padding:7px;
    width:400px;
    height:500px;
    background-color:#FFF;
    overflow:auto;
}
#rightContainer{
    position: absolute;
    left: 424px;
    width:120px;
    height:514px;
    padding:0;
    background-color:#FFF;
}
#siteContainer{
    width:600px;
    height:100%;
    margin:0 auto;
    padding:0;
    position: relative;
    top:0;
    background-color:#CCC;
}
</style>
</head>
<body>
    <div id="siteContainer">
        <div id="indholdContainer">Venstre</div>
        <div id="rightContainer">Højre</div>
    </div>
</body>
</html>
Avatar billede or.han Nybegynder
07. november 2005 - 16:07 #11
Det er da irriterende at det ikke virker. Men ja okay din metode bruger jeg nok bare så...
Avatar billede or.han Nybegynder
07. november 2005 - 16:15 #12
Jeg venter lige med at give point... Kunne være at nogle kan tilføje noget...
Avatar billede or.han Nybegynder
08. november 2005 - 14:38 #13
Ja bare læg et svar olebole...
Avatar billede olebole Juniormester
09. november 2005 - 09:01 #14
oki ... det er i hvert fald en meget brugt metode - og temmelig overskuelig  ;o)
Avatar billede stich Nybegynder
10. november 2005 - 23:33 #15
Der er et kendt fix på IEs double margin bug:
display:inline;
En property der ifl. specifikationen ikke bør gøre noget som helst på et floated element, og den er derfor heller ikke 'skadelig' for andre browsere.
Avatar billede olebole Juniormester
11. november 2005 - 00:12 #16
Tak stich ... jeg floater selv yderst sjældent og er derfor ikke inde i alle dens 'hacks'  :)
Avatar billede stich Nybegynder
11. november 2005 - 00:18 #17
:-) Floating er ellers dæjli'! Og med One True Layout (http://positioniseverything.net/articles/onetruelayout/anyorder) ser det endda ud til der er kommet en "ordentlig" løsning til column-layout, takket være dem!
Avatar billede or.han Nybegynder
11. november 2005 - 16:42 #18
okey tak for det stich. Husker det til en anden gang...
Avatar billede olebole Juniormester
11. november 2005 - 17:23 #19
ehhhh .... W3C har da leveret et fortrinligt element til søjleopdeling i mange år  :)

Tabellen er stadig et glimrende element til den slags. En søjleopdeling med en tabel kræver ikke flere resourcer end, hvis den er udført med f.eks. div.
Gør man sig endvidere den ulejlighed at tale med blinde og/eller svagtseende, vil man erfare, at det ingen negativ indflydelse har på aflæsning af dokumentet med de klienter, de gør brug af.

Den slags 'detaljer', er det dog nok lidt blåøjet at forvente, kan få en rettroende til at afsværge sin religion  ;o)
Avatar billede stich Nybegynder
11. november 2005 - 19:07 #20
Jeg synes netop accessability er et glimrende argument for *ikke* at bruge en tabel. Med CSS kan man meget nemmere tilpasse rækkefølgen af elementerne i koden, som man gerne vil have den.

Hvis man får folk til fx at læse de 30 indlæg på http://diveintoaccessibility.org, _håber_ jeg nu alligevel godt, man få folk (...selvom jeg forventer det var mig du referede til som religiøs...) til at lægge mere vægt på den del af webudvikling...
Avatar billede or.han Nybegynder
11. november 2005 - 21:19 #21
olebole>>
Hvad bruger af program(mer) når du laver JavaScript, CSS o.l.? Er bare nysgerrig... Og du arbejder vist for FramFab læste jeg, så har du ikke nogle referencer du kan vise??
Avatar billede or.han Nybegynder
11. november 2005 - 21:19 #22
Hvad bruger du*
Avatar billede olebole Juniormester
11. november 2005 - 22:06 #23
stich >> Har du nogensinde talt med folk, der har praktiske erfaringer med - eller har du selv taget dig tid til at teste - klienter, der påståes at skulle have problemer med tabeller?
Har du nogensinde hørt om f.eks. en blind, der har problemer med brugen af én tabel til søjleopdeling ... eller er livet et helt igennem akademisk fænomen i din verden?

Mellem to dybe grøfter ligger ofte en farbar vej  :)

or.han >> Det er længe siden, jeg arbejdede for Framfab. Jeg skriver i en helt almindelig editor - Homesite.
Hvilket sprog og værktøj, man anvender, er ikke synderlig vigtigt, når man programmerer. Programmering er i høj grad en mental proces.
Du kan sammenligne det med at lære et tale/skriftsprog. Når først man som barn har fundet ud af, hvad sproglig kommunikation er for en størrelse, er det ikke vanskeligt at lære nye sprog ... og det er ligegyldigt, om man skriver på en nusset lap papir, en PC eller håndlavet bøttepapir  :)
Avatar billede stich Nybegynder
12. november 2005 - 01:08 #24
"eller er livet et helt igennem akademisk fænomen i din verden?"
Med sådan en kommentar, går jeg ihf. ud fra du ikke har nogen akademisk baggrund.
Men jeg har langt mere tiltro til den akademiske tilgang, ja, selvom jeg i længere tid har været praktiker. For måneder tilbage lærte jeg en blind lidt at kende, og jeg kender flere der har problemet med synet (min far er fx rød/grøn farveblind), så jeg har flere gange fået bekræftning i, at 'best practices' rent faktisk fungerer efter hensigten.

For mig er spørgsmålet fx ikke hvorvidt noget går an (fx at 'én tabel gør ingen skade'). Det er misbrug, og det bør derfor ikke gøres. Ligesom et hack kan gå an - men hvis man lader det blive, kommer det før eller siden tilbage og bider en i halen.
Jeg har set mange tilfælde hvor underlige problemer opstår pga. misbrug, og har såmænd selv haft problemer pga. det før i tiden. Og jeg vil egentlig mene en kæmpe del af dagens problemer mht. markup og rendering bunder i, at praktikere har misbrugt og brudt standarderne (og ja, jeg mener der er en tæt kobling mellem standarder og det akademiske).

Når det er sagt, så er de akademiske løsninger og metoder da heller ikke altid fuldendte. Men i dette tilfælde ser jeg ingen grund til ikke at følge standarderne.
Avatar billede or.han Nybegynder
12. november 2005 - 14:37 #25
Jeg er stødt på endnu et problem og I kan nok svare på det:
Hvordan kan jeg gøre en divs højde afhængig browserstørrelsen? Altså jeg har nogle faste elementer (m. fast størrelse) og nederst er der en div til indholdet. Denne div skal hele tiden ende ved bunden af browseren. Hvordan kan det gøres?
Avatar billede or.han Nybegynder
12. november 2005 - 14:37 #26
I skal nok få point hvis I ønsker dette.
Avatar billede olebole Juniormester
12. november 2005 - 17:59 #27
Jamen, stich ... du bekræfter jo blot, at dit paradigme er bygget på tro og religion. Heller ikke min baggrund har du nogen anelse om ... og heller ikke på dette punkt evner du at gætte dig frem  :D
Fordi man har en akademisk baggrund, kan man da sagtens være skeptisk overfor folk, der helt konsekvent ser bort fra virkelige fænomener og i stedet begraver sig i fejlbefængt, teoretiseren.
Når jeg bruger ordet 'akademisk' i forbindelse med din person, må du endelig ikke misforstå mig. Du fremstår derimod som negationen til en akademiker uanset, hvad din baggrund måtte være.
Du virker absolut ikke som en, der har lært 'akademisk metode' - og i hvert fald ikke som en, der har forstået begrebet. Det kræver evne og vilje til at erkende virkelighedens kompleksitet ... ikke ligefrem noget, der virker som din stærkeste side  :)

Knap 10% af Ekspertens brugeres fædre er rød/grøn-farveblinde, men - som du formodentlig ved - er det ikke den slags synshandicap, jeg taler om  :)
Nu, da du engang har mødt en blind, kan du så ikke dele din viden om, hvilke problemer, denne person helt specifikt har med sin klient og brugen af en enkelt tabel ... og hvad det specifikt er for en klient (navn/version) - for der er da åbenbart noget jeg skal lære  ;o)

'Brug' er brug. For at et 'brug' skal blive til et 'misbrug', skal 'brugen' være skadelig. Hjulet er som bekendt skabt til brug i vandingssystemer ... dér kan du virkelig tale om 'misbrug', hvis din definition skal holde vand!
Vågn dog op og se dig omkring - tag en pille, så du slipper for din frygt for at noget skal komme og nappe dig i numsen. Med dagens udbud af medicin er jeg sikker på, tilstanden kan behandles  *LoooL*

Jeg er ikke i tvivl om, du mener dig i stand til at kunne reducere langt de fleste problemer til én årsag, men som jeg ser det, skyldes problemerne omkring webkodning et langt større kompleks af årsager. Et mindst ligeså stort problem er, at hverken IE eller FF holder sig til standarderne.

Således bygger Mozilla videre på en elendig DOM-motor, der ikke validerer en kæft, når en DOM-operation udføres - med det resultat at alle mulige ulovligheder accepteres og standarderne langtfra overholdes.

Ovenikøbet er Mozilla - kemisk renset for al logik - ved at implementere 'innerHTML' property'en i deres XHTML-DOM! Alene navnet viser, at denne property intet har at gøre i XHTML (som jo er et subset af XML).
Desuden havde innerHTML intet at gøre i HTML-DOM'en - og det har den heller ikke i XML-DOM. Hvilken standard er det nu lige, der nogensinde har defineret 'innerHTML'?
Dernæst er Gecko's 'innerHTML' ekstremt buggy - og aflæser _ikke_, hvad der reelt og aktuelt står i dokumentets HTML-repræsentation af DOM'en.
Ikke desto mindre finder 'genierne' åbenbart, at FF's X(HT)ML-DOM absolut skal inficeres af en proprietær, ikke-standardiseret property, de ikke engang kan få til at virke i HTML-DOM'en.
Det er lige netop den slags adfærd, man kunne have håbet på, ville være historie med indførelsen af XHTML i et ægte XML-miljø. Men ak ... niveauet af dumhed synes desværre konstant  :o|

Hvis du ikke kan få øje på grunde til at afvige fra standarderne, kan det undre, du ligger så ubetinget på maven for FF. Det kunne være herligt, om du kunne få 'dine venner' hos Moz til at gøre overholde standarderne ... og så skulle du måske overveje at skære lidt højden på altret  ;o)

Selvom det er hamrende irriterende, MS ikke ser sig i stand til at kunne færdiggøre en god nok XHTML-motor til IE7's deadline - kan man jo håbe, det på sigt resulterer i en mindre buggy version end det Mozilla kan præstere.
Avatar billede stich Nybegynder
12. november 2005 - 18:27 #28
Mudderkastning - lækkert.
"Man skal ikke diskutere med en idiot; først trækker han dig ned på sit niveau, og slår dig derefter med sin erfaring." :o) LooOooL
Avatar billede or.han Nybegynder
12. november 2005 - 18:31 #29
Kunne I svare på mit spørgsmål??
Jeg er stødt på endnu et problem og I kan nok svare på det:
Hvordan kan jeg gøre en divs højde afhængig browserstørrelsen? Altså jeg har nogle faste elementer (m. fast størrelse) og nederst er der en div til indholdet. Denne div skal hele tiden ende ved bunden af browseren og det vil altså sige at højden på denne div er det resterende antal pixels. Hvordan kan det gøres med CSS? Ellers må jeg jo bare gøre det med javascript, men det vil jeg helst undgå, da det ikke er muligt at aflæse højden før siden er indlæst...
Avatar billede olebole Juniormester
12. november 2005 - 19:05 #30
or.han >> Du kan gøre noget à la dette:

<style type="text/css">
body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}
.wrapper {
    position: relative;
    width: 550px;
    height: 100%;
    margin: 0 auto;
}
.banner, .container {
    position: absolute;
    width: 100%;
    height: 100px;
}
.banner {
    background: yellow;
    z-index: 2;
}
.container {
    z-index: 1;
}
.dummy {
    height: 100px;
    visibility: hidden;
}
.textCont {
    font: 12px verdana, arial, sans-serif;
    padding: 10px;
}
</style>

<div class="wrapper">
    <div class="banner">Et Banner</div>
    <div class="container">
        <div class="dummy">&nbsp;</div>
       
        <div class="textCont">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
        Ut et mauris nec felis feugiat varius.
        Suspendisse sapien. Donec lobortis.
        Nullam nonummy nunc quis neque.
        </div>
    </div>
</div>
Avatar billede olebole Juniormester
12. november 2005 - 19:12 #31
stich >> Guderne skal vide, jeg langt fra anser dig for den skarpeste kniv i skuffen, men det ville nok ikke være korrekt ligefrem at betegne dig som 'idiot'.
Til gengæld er det er ikke så rart, du ikke forholder dig til det substantielle, så vi kunne holde debatten på et højere niveau.
Erfaring synes ikke at være den egenskab, du er hårdest belastet af - så uanset, hvormeget du tæsker løs, rammer du ikke mærkbart.

Du bør således ikke føle dig tynget af skidt samvittighed. Jeg har været ude for langt større udfordringer  :)
Avatar billede or.han Nybegynder
12. november 2005 - 19:17 #32
olebole>> Hvad er det som det html/css gør??
Avatar billede or.han Nybegynder
12. november 2005 - 19:21 #33
Jeg synes ikke at den gør det jeg vil have. Jeg ser bare to bokse oven på hinanden...
Avatar billede or.han Nybegynder
12. november 2005 - 19:28 #34
Eller jo den gør den så. Tak tak
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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