[CSS] Style:Height & Netscape

[Verwijderd]

hey,

Driftig bezig met het vernieuwen van een online database.
De oude site stuikelde over de tabellen en was mega traag door bestanden van meer dan 12K groot .

Dus dacht ik eens met CSS aan de gang te gaan, en het werkt ( bijna ) allemaal naar behoren echter ........

Er is een onderdeel waarbij de database bekeken kan worden.
Mijn idee was om de velden waar de tekst kleiner is dan 2/3 regels allemaal even groot te houden met een naast liggende profile foto.

Werkt leuk tot dat de tekst wel groter wordt, en deze dood leuk de DIV over donderd

In de div heb ik het volgende gedaan

code:

<div class="classnaam" style="height:200px"> 
' door ASP wordt de informatie toegevoegd 
</DIV>

Netscape houd dus de gegeven hoogte aan en het vak stretched niet mee , het gevolg is hier te zien
Hoe kan ik zo iets ranzigs wat in IE en Opera wel werkt ook in NS laten werken

Netscape probleem

Dingen als Height:100% werken natuurlijk niet, en werken met andere percentages ook niet, omdat je niet weer op welke resolutie gekeken wordt.

Is dit soord dingen mogelijk in NS , of ..............
Heb wel in de search gezocht, vindt allerlij style: hoogte problemen , maar niet eenoplossing wat voor mij meer licht in de duisternis geeft


: EDIT : gebruik Netscape 7.2 om de resultaten te bekijken

[ Voor 14% gewijzigd door Verwijderd op 21-07-2004 20:35 ]

[Verwijderd]

als jij zegt dat ie 200px moet worden, wordt ie ook 200 px, eigenlijk heel logisch (ook volgens w3c)

probeer eens overflow: visible; toe te voegen of werk met min-height

[zubauza]

code:

min-height: 200px;

werkt alleen nog niet in IE

een 1x1 transparant GIF plaatje uitrekken en als spacer gebruiken werkt in elke browser maar is niet zon goede oplossing

[JayVee]

Eigelijk zou je min-height moeten gebruiken hiervoor. Dat wordt echter niet door IE ondersteund.

Wat je kan doen: plaats het plaatje en de tekst in een container div. Geef het plaatje float: left. Voor het einde van de container div plaats je een div met clear: both.

Wat gebeurt er nu (als het werkt als ik denk):
De laatste div met clear: both gaat zo laag zitten tot er niet meer links of rechts een floating element staat. Dus komt hij onder het plaatje te staan. Zo zorg je ervoor dat de container div altijd minstens zo hoog is als het plaatje.

[ Voor 9% gewijzigd door JayVee op 21-07-2004 20:49 ]

[zubauza]

JayVee schreef op 21 juli 2004 @ 20:46:Voor het einde van de container div plaats je een div met clear: both.

er is maar 1 floating div, dus "clear: left" is genoeg lijkt me

[Verwijderd]

vind dit eigenlijk een ranzige oplossing (werkt wel, maar float is hier niet voor bedoelt en je zit weer met een extra spacer), je kan dan beter iets doen als

div {
height: 200px; /*voor ie */
}
parent>div {
height: auto;
min-height: 200px;
} /*voor de rest */

[T-MOB]

Volgens mij is het makkelijkst min-height en een ie hack:

code:

min-height: 200px;
_height: 200px; /* Underscore-hack voor IE */

[Verwijderd]

Bedankt voor de oplossingen , ik ga ze zeker proberen , beide,

Ik was niet op de hoogte van min-height
weer wat geleerd .... en de laaste oplossing , met dat extra stukje , moet hopelijk de truuk zijn ,

THANx


EDIT :

Inderdaad voor Netscape werkt de Min-height fantasties, echter IE blijft inderdaad zoals aan gegeven er een beetje moeite mee hebben, echter scheeld dit met de huidige oplossing een IE hack een a 2 px .
gaat verder sleutelen

[ Voor 39% gewijzigd door Verwijderd op 21-07-2004 21:18 ]

[JayVee]

Ik gebruik dan toch liever de clear methode dan hacks voor IE (en ja, clear: left is genoeg). Straks fixen ze de bug waardoor de hack mogelijk is maar het probleem dat met de hack omzeild wordt niet... Dat is al eerder gebeurt!

Maar goed, dat is een kwestie van smaak denk ik.

RCA, post wel ff je oplossing als het werkt. Ben benieuwd.

[Verwijderd]

T-MOB schreef op 21 juli 2004 @ 21:01:
Volgens mij is het makkelijkst min-height en een ie hack:

code:

min-height: 200px;
_height: 200px; /* Underscore-hack voor IE */

Hellaas op deze manier , gaan ze bakkalije met zijn 2tjes , de min-height wordt niet meer gelezen door netscape

de min-height , werkt prima voor netscape , en inderdaad flipt ie daar op en krimt in tot het minimale .

_height:

of met extra comendo parent, gebeurt er niets,
ze lijken elkaar dan op te heffen , of ik moet iets heel raars gedaan hebben
Of IE hier is de grootste bug die er is
Maar geef het niet op , zal eens de div herschrijven

/me vind het vaag iedereen heeft het over _height, en toch wil dat niet ** baalt **


Ik weet niet of het mogelijk is , maar anders iets proberen met een browser check, en de div hier op in laten spelen.

Ik weet niet og float voor mij wel een goed idee is, het plaatje en de divs worden alleen hier gescheiden door een tabel met een rij en 2 col. ,

overflow . geeft zo als ik eigenlijk al verwacht had een scrollbar , en op zo een klein stuikje is dat ook geen succes ....

het FLOAt gedeelte , inderdaad zoals je verwacht had gaan ze onder elkaar zitten , en dat is nu net niet de bedoeling, de foto moet links van de tekst blijven zitten.

[ Voor 19% gewijzigd door Verwijderd op 21-07-2004 22:11 ]

[Johnny]

_height: zou alleen in MSIE moeten werken.

Welke versie van Netscape gebruik je?

Anders zou je zoiets kunnen doen:

code:

<div>
<div style="height:100px;position:relative;"></div>
Je inhoud
</div>

Dit zorgt ervoor dat de <div> altijd minstens 200 pixels hoog is en je inhoud gewoon over de binnenste <div> wordt geplaatst.

[Verwijderd]

gebruik Netscape 7.2

en ik las dat IE op die _ moet reageren , maar dan werkt die min-height ook niet meer

[JayVee]

Verwijderd schreef op 21 juli 2004 @ 21:51:
[...]
Ik weet niet og float voor mij wel een goed idee is, het plaatje en de divs worden alleen hier gescheiden door een tabel met een rij en 2 col. ,

het FLOAt gedeelte , inderdaad zoals je verwacht had gaan ze onder elkaar zitten , en dat is nu net niet de bedoeling, de foto moet links van de tekst blijven zitten.

Ik had toevallig nog een voorbeeld van het clear:both trucje rond liggen. Dat gaat 100% zeker werken (alleen moet je dan geen table gebruiken uiteraard).

offtopic:
Let niet op te tekst, lorem ipsum bladibla vond ik saai!

[zubauza]

JayVee schreef op 21 juli 2004 @ 22:39:
Ik had toevallig nog een voorbeeld van het clear:both trucje rond liggen.

leuk voobeeld, maar t heeft volgens mij weinig met dit topic te maken...

RCA wil dat een div minstens even lang is als de andere en als je bij jouw voorbeeld de inhoud van de middelste div weghaalt, schuift je footer gewoon achter de floating divs

Johnny schreef op 21 juli 2004 @ 22:17:

code:

<div>
<div style="height:100px;position:relative;"></div>
Je inhoud
</div>

Dit zorgt ervoor dat de <div> altijd minstens 200 pixels hoog is en je inhoud gewoon over de binnenste <div> wordt geplaatst.

1. position: relative opgeven is alleen nuttig in combinatie met bijv. top en left, zie ook http://www.w3schools.com/css/pr_class_position.asp

2. deze code zorgt ervoor dat je inhoud gewoon 100px opschuift en dat had je ook met "padding-top: 100px" kunnen doen

[Johnny]

zubauza schreef op 22 juli 2004 @ 09:06:
[...]
1. position: relative opgeven is alleen nuttig in combinatie met bijv. top en left, zie ook http://www.w3schools.com/css/pr_class_position.asp

2. deze code zorgt ervoor dat je inhoud gewoon 100px opschuift en dat had je ook met "padding-top: 100px" kunnen doen

Ja, dat was maar even snel uit de losse pols. Zo werkt hij wel goed voor MSIE:

code:

<div>
<div style="height:100px;position:relative;top:0;"></div>
<div style="position:absolute;top:0;">inhoud</div>
</div>

[zubauza]

Johnny schreef op 22 juli 2004 @ 10:57:
Ja, dat was maar even snel uit de losse pols. Zo werkt hij wel goed voor MSIE:

code:

<div>
<div style="height:100px;position:relative;top:0;"></div>
<div style="position:absolute;top:0;">inhoud</div>
</div>

aaah dat is idd een oplossing

alleen begrijp ik nog niet waar die "position: relative" en "top: 0" in de eerste div goed voor zijn, dat zijn gewoon de standaardwaarden

[T-MOB]

Relative is helemaal niet de standaardwaarde, "static" is de standaardwaarde. De relative is nodig omdat absolute positionering plaatsvindt teopzichte van het dichtsbijzijnde parent-element met position op absolute, relative of fixed.

code:

<div style="position: relative;">
 <div style="margin-top: 20px;">
  <div style="position: absolute; top: 0;">
    blaat
  </div>
 </div>
</div>

is dus wezenlijk anders dan:

code:

<div>
 <div style="position: relative; margin-top: 20px;">
  <div style="position: absolute; top: 0;">
   blaat
  </div>
 </div>
</div>

In het laatste gevaal komt "blaat" 20px lager te staan....

[ Voor 16% gewijzigd door T-MOB op 22-07-2004 14:27 . Reden: [code] tag ]

[Verwijderd]

Was gister eventjes offline ,
en toch weer een boel nuttige tips , ondanks alles blijven we natuurlijk proberen
het moet naturrlijk niet zo zijn dat het een typisch geval van OF / OF is .
Ik heb de tips met position nog niet kunnen proberen , dat hoop ik vannavond te doen.

[ Voor 9% gewijzigd door Verwijderd op 24-07-2004 19:59 ]

[Verwijderd]

Zo volgens beide brouwsers moet het nu werken
Vermoedelijk erg omslachtig en misschien niet helemaal volgens de regels gedaan, maar ja *that's me *

Ik zou even laten weten hoe ik het uit eindelijk opgelost had.
Ik heb er een stukje javascript ingezet icm ASP

Javascript kijkt welke browser het is , waar na ASP waarden reserveerd.

Javascript : if browser = netscape {
ASP : <% StyleCSS = "style='min-height:100px;'"%>
}

DIV : <div class="naam" <%=StyleCSS%>> text </DIV>

voor IE bijft het gewoon height, en dus tot zover lijkt het te werken

Nogmaals bedankt voor het meedenken

[ Voor 7% gewijzigd door Verwijderd op 24-07-2004 19:59 ]

[crisp]

browser-sniffing is niet zo handig in dit geval denk ik, want hoe ga je nu om met Konqueror, Safari en al die andere browsers? Gaat het dan nog steeds goed?

[Verwijderd]

mmm ik leer weer nieuwe browser kennen

Ik wist echt niet hoe het anders moet, de meerdere malen voorgestelde IE hack werkte niet

Met Opera werkt het wel, dat is getest.
En met de andere , ik voel alweer een bui hangen denk ik

[zubauza]

Verwijderd schreef op 24 juli 2004 @ 20:21:
Met Opera werkt het wel, dat is getest.
En met de andere , ik voel alweer een bui hangen denk ik

de andere bowsers werken precies hetzelfde als netscape denk ik?

ipv if browser == "netscape"
if browser != "internet explorer"

zoiets?

[P_de_B]

Beetje offtopic maar wel relevant voor de site

@TS: [google=SQL injection]