IE vs Firefox height probleem - Softwareontwikkeling

donderdag 17 maart 2005 10:38

Acties:

Verwijderd

Topicstarter

Ik ben bezig met een pagina waarin ik css heb verwerkt.
Ik heb even om te testen een blokje gemaakt dat 50 van de top moet afstaan en 50 van de bodem (maakt niet uit hoe groot de pagina is hij moet deze twee dingen aanhouden)

code:

1	<div style="position:absolute; top:50px; bottom:50px; width:300px; background-color:#FF0033;">lalalalal</div>

Even heel simpel neergezet heb ik deze shizzle.
In firefox werkt het perfect, maar onder IE begint hij ntjes bovenaan maar hij houd geen rekening met de onderkant dus hij vormt zich automatisch om de tekst heen, zodra de tekst ophoud stopt het blok.
Iemand een idee hoe ik dit kan oplossen, of een andere manier hoe ik het wel kan laten werken???? (heb al gegoogled op css height, top bottom css, css scalen en nog wat meer dingen maar zijn alelmaal niet de goede omschrijvingen allemaal te algemeen)

Ik zou er heel erg mee geholpen zijn, alvast bedankt

donderdag 17 maart 2005 10:42

Acties:

Rowanov

Kop eens wat anders...

Margin gebruiken in plaats van top en bottom.

edit:
Ik begin nu het vermoeden te krijgen dat je een blok aan het centreren bent. Dat kan je beter op een andere manier oplossen.

[ Voor 62% gewijzigd door Rowanov op 17-03-2005 10:43 ]

donderdag 17 maart 2005 10:51

Acties:

Verwijderd

Topicstarter

Nee de hoogten 50px kan verschillend zijn (is ook verschillend)
En margin heb ik net geprobeerd

code:

1	<div style="position:absolute; height:100%; margin-top:50px; margin-bottom:50px; width:300px; background-color:#FF0033;">

Werkt ook niet, ik had er ook goede hoop voor

Toch bednakt

donderdag 17 maart 2005 10:53

Acties:

RwD

kloonikoon

Wat voor doctype heb je ingesteld overigens?

donderdag 17 maart 2005 10:54

Acties:

Rowanov

Kop eens wat anders...

Heb je een voorbeeld online staan en misschien een nadere uitleg wat je hiermee bereiken wil?
Als je wil dat hij op 50 pixels van de boven en onderkant staat werkt het gewoon wel met margin, alleen moet dan je content lang genoeg zijn om de div uit te rekken.

donderdag 17 maart 2005 10:54

Acties:

Verwijderd

Topicstarter

code:

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

<body>
<div style="position:absolute; height:100%; margin-top:50px; margin-bottom:50px; width:300px; background-color:#FF0033;">

lalalalal</div>
</body>
</html>

Hier hast du alles

donderdag 17 maart 2005 10:56

Acties:

Woudloper

« - _ - »

en als je nu eens een height:100%; toevoegt aan je stukje style code?

donderdag 17 maart 2005 10:58

Acties:

Rowanov

Kop eens wat anders...

En de body en html ook op height 100% zet anders werkt het niet in alle browsers.

Edit; zo dus:

Cascading Stylesheet:

1
2
3

html, body{
    height: 100%
}

[ Voor 32% gewijzigd door Rowanov op 17-03-2005 11:00 ]

donderdag 17 maart 2005 11:09

Acties:

Verwijderd

Topicstarter

Nu 100% in body en in de div style. Nu krijg ik een blok dat ongveeer 70/80 pixels uit het scherm loopt (onderkant), zelfs na het aanpassen van margin-bottom van 50 naar 150 blijft hij even ver weg.

check hier maar:

code:

1	http://www.aconia.nl/testblok.htm

[ Voor 16% gewijzigd door Verwijderd op 17-03-2005 11:10 ]

donderdag 17 maart 2005 11:20

Acties:

Rowanov

Kop eens wat anders...

Daar heb ik niet zo snel een antwoord op, wat ik wel weet is dat het makkelijker en overzichterlijker is om geen inline styles te gebruiken

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html, body{
    height: 100%;
}
.naampje{
    position:absolute; 
    height:100%; 
    margin-top:50px; 
    margin-bottom:150px; 
    width:300px; 
    background-color:#FF0033;
}
</style>
</head>

<body style="height:100%; ">
<div class="naampje">

lalalalal</div>
</body>
</html>

[ Voor 38% gewijzigd door Rowanov op 17-03-2005 11:20 ]

donderdag 17 maart 2005 11:22

Acties:

Verwijderd

Topicstarter

ja das idd wel overzichtelijker, normaal doe ik het in een aparte css sheet zetten maar nu wegens omstandigheden heb ik het even zo gedaan.

Als het zo op geen manier goed wil wekren is het dan eventueel op te lossen doormiddel van een goed geplaatste tabel?

[ Voor 31% gewijzigd door Verwijderd op 17-03-2005 11:24 ]

donderdag 17 maart 2005 11:33

Acties:

RwD

kloonikoon

Verwijderd schreef op donderdag 17 maart 2005 @ 11:22:
ja das idd wel overzichtelijker, normaal doe ik het in een aparte css sheet zetten maar nu wegens omstandigheden heb ik het even zo gedaan.

Als het zo op geen manier goed wil wekren is het dan eventueel op te lossen doormiddel van een goed geplaatste tabel?

Ik vindt in principe van wel, want als je design aangepast moet worden maken die paar aanpassingen in je html ook niet uit. Maar ik probeer het wel te vermijden. Persoonlijk vindt ik het soms niet waard om enkele dagen bezig te zijn met het vinden van een goede css oplossing als je het met een eenvoudige tabel snel gedaan hebt (Zeker als je tijdsdruk hebt). Maar dan zou ik het echt tot het minimum beperken en zoveel mogelijk zinvolle tags gebruiken. Ik heb onder tijdsdruk wel eens een site afgeleverd met een tabel waar het niet had gehoeven, maar de css kreeg ik 3 dagen na de deadline voor mekaar (had toen tijd het op te lossen) en toen hebben we die achteraf alsnog geupdate.

Maar ik weet zeker dat iedereen hier gaat zeggen dat tabellen niet de oplossing zijn voor je probleem

[ Voor 41% gewijzigd door RwD op 17-03-2005 11:41 ]

donderdag 17 maart 2005 11:49

Acties:

T-MOB

Zoals het in je TS staat is de enige methode om het netjes op te lossen met louter CSS. Maar ja, dat ondersteund IE niet. Een aantal oplossingsmogelijkheden:

* Tabelletje misbruiken (zie ^^)
* Met javascript de hoogte fixen voor IE
* IE in quirksmode dwingen, moz-box-sizing en box-sizing op border-box zetten (en dan zoiets doen)

Van deze drie vind ik het tabelletje eerlijk gezegd het minst ranzig

Regeren is vooruitschuiven

donderdag 17 maart 2005 11:51

Acties:

Verwijderd

Topicstarter

Ik heb niet echt tijdsdruk maar ik zoek het ook niet om drie dagen te zoeken naar de goede oplossing in css. Ik ga vanmiddag even wat ander werk doen en morgen vroeg weer verder met dit ontwerp (ontwerp hebben jullie nog niet gezien, maar deze oplossing komt dus ook in een echt site te zitten en niet alleen in een mooi rood vlak;))
Als jullie tot dan nog oplossingen kunnen bedenken ga ik vanavond ff zoeken en dan hoop ik dat ik morgen kan beginnen en de oplossing heb, anders ga ik tabellen gebruiken en dan ben ik verder van huis

Alvast bednakt en als je iets wil weten ik kom vaak ff kijken of iemand al iets heeft gepost.