DIV Layer met height 10px kan niet in IE? - Softwareontwikkeling

donderdag 19 juli 2007 16:42

Acties:

! w t R

Topicstarter

Ik wil voor een website design een oranje balk bovenin mijn menu maar het lijkt wel alsof IE geen div layer kan renderen met een height van 10px. Het is net alsof een div kleiner dan 15px niet mogelijk is in IE.

Een test divje is te vinden op http://woutersmeenk.nl/etc/test.html
Het gaat om deze code:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Div layer test</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div style="margin:0;padding:0;position:absolute;top:100px;left:100px;background-color:black;width:100px;height:10px;"></div>
</body>
</html>

Op dit moment heb ik het probleem opgelost door een div te maken met een height van 15px en een margin-bottom van -5px. Vervolgens heb ik de balk oranje gemaakt door een gif te maken van 1x10px en hem een repeat-x mee te geven. Het werkt wel maar ik ben benieuwd of het toch mogelijk is om in IE een div te maken van 10px hoog.

........................................................................................................................................................

donderdag 19 juli 2007 16:46

Acties:

Verwijderd

Natuurlijk kan het wel. Maar ik gok dat je wat inhoud hebt (whitespace?), en dat daarom de minimale hoogte gelijk is aan de line-height. Pas de line-height en/of font-size aan, of speel met de overflow property.

donderdag 19 juli 2007 16:50

Acties:

soulrider

die test toont hier toch correct in IE7...
weet je zeker dat je hem in je "niet werkende"pagina niet onder de rest zet ?

bij opbouw van een pagina met div's speelt soms de volgorde waarin ze vermeld staan wel eens van belang - zekers bij absolute positionering (div's die elkaar overlappen worden in de volgorde neergelegd/opgebouwd dat ze vermeld worden, maw om een kleine div boven een grote div te tonen moet die eerste als laatste vermeld worden.

bij de volgende code ga je ook geen rood-vlakje zien....

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Div layer test</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div style="margin:0;padding:0;position:absolute;top:100px;left:100px;background-color:red;width:100px;height:10px;"></div>
<div style="margin:0;padding:0;position:absolute;top:75px;left:75px;background-color:black;width:150px;height:50px;"></div>
</body>
</html>

terwijl als je die 2 div's omwisseld je idd een rood vlakje op een zwart vlak gaat zien...

dat van de buurman hierboven kan ook de oorzaak zijn, maar ik weet niet hoe de site zelve verder is opgebouwd...

[ Voor 9% gewijzigd door soulrider op 19-07-2007 16:56 ]

donderdag 19 juli 2007 17:21

Acties:

ikbenwouter

! w t R

Topicstarter

Verwijderd schreef op donderdag 19 juli 2007 @ 16:46:
Natuurlijk kan het wel. Maar ik gok dat je wat inhoud hebt (whitespace?), en dat daarom de minimale hoogte gelijk is aan de line-height. Pas de line-height en/of font-size aan, of speel met de overflow property.

De test gaat wel goed in IE7 maar niet in IE6. Ik heb in de test helemaal niks aan inhoud staan dus met het font of de line height zou het toch niks te maken moeten hebben? Overflow is toch alleen voor wel of geen scrollbar in een div, wat heeft dit met mijn div van 10px hoog te maken?

soulrider schreef op donderdag 19 juli 2007 @ 16:50:
bij opbouw van een pagina met div's speelt soms de volgorde waarin ze vermeld staan wel eens van belang - zekers bij absolute positionering (div's die elkaar overlappen worden in de volgorde neergelegd/opgebouwd dat ze vermeld worden, maw om een kleine div boven een grote div te tonen moet die eerste als laatste vermeld worden.

Als je de test bekijkt in IE6 zie je dat het echt een probleem is met IE6 en niet met mijn code of de omliggende divs.

[ Voor 81% gewijzigd door ikbenwouter op 19-07-2007 17:25 ]

........................................................................................................................................................

donderdag 19 juli 2007 17:24

Acties:

Thunk

Probeer er is een 1x1 transparant gifje in te zetten...

donderdag 19 juli 2007 17:24

Acties:

Verwijderd

Dan zullen die 15 pixels wel gewoon uit de lucht komen vallen. Heb je al geprobeerd om de font-size en/of line-height aan te passen?

donderdag 19 juli 2007 17:28

Acties:

ikbenwouter

! w t R

Topicstarter

Verwijderd schreef op donderdag 19 juli 2007 @ 17:24:
Dan zullen die 15 pixels wel gewoon uit de lucht komen vallen. Heb je al geprobeerd om de font-size en/of line-height aan te passen?

Ik dacht zoals ik zei dat het niet zou uitmaken maar het werkt $_/-\o_$ Als ik de font-size op 1px zet bijvoorbeeld is hij gewoon 10px hoog in IE6, bedankt voor de tip.

........................................................................................................................................................

donderdag 19 juli 2007 17:30

Acties:

Boelie-Boelie

height in IE6 en lager betekent dat het element in principe de vastgestelde hoogte heeft, maar het element past zich aan wanneer de inhoud niet binnen die hoogte past. Da's een foutje van IE.

Hoewel zich geen content bevindt in de div, merk ik dat IE blijkbaar een default font-size van 12px hanteert voor de afwezige inhoud. Die tip van Cheatah m.b.t. font-size lijkt te werken. Zou niet op voorhand tips afwijzen zonder te proberen, zeker niet van Cheatah

Cogito ergo dubito

donderdag 19 juli 2007 17:30

Acties:

Verwijderd

Vertrouw Internet Explorer gewoon nooit als het gaat om de CSS implementatie. Dit met overflow: hidden; oplossen is eigenlijk wel mooier (als het al werkt).

donderdag 19 juli 2007 17:32

Acties:

ikbenwouter

! w t R

Topicstarter

Boelie-Boelie schreef op donderdag 19 juli 2007 @ 17:30:
Die tip van Cheatah m.b.t. font-size lijkt te werken. Zou niet op voorhand tips afwijzen zonder te proberen, zeker niet van Cheatah

Aangezien hij zich bij die tip afvroeg of ik er inhoud in had zitten dacht ik dat het niet de oplossing was vandaar dat ik misschien wat voorbarig was met het afwijzen ervan

Ik ga nu nog even overflow:hidden proberen. Dit lost het ook op

Boelie-Boelie schreef op donderdag 19 juli 2007 @ 17:30:
height in IE6 en lager betekent dat het element in principe de vastgestelde hoogte heeft, maar het element past zich aan wanneer de inhoud niet binnen die hoogte past. Da's een foutje van IE.

Duidelijke uitleg, nu weet ik ook waarom het gebeurt en daar hou ik van

Dan onthou ik het tenminste.

[ Voor 32% gewijzigd door ikbenwouter op 19-07-2007 17:36 ]

........................................................................................................................................................

donderdag 19 juli 2007 23:45

Acties:

Cartman!

Thunk schreef op donderdag 19 juli 2007 @ 17:24:
Probeer er is een 1x1 transparant gifje in te zetten...

Dit icm. font-size:0; en line-height:0; zorgt ervoor dat je zelfs 1*1px div's kunt maken in IE

vrijdag 20 juli 2007 00:02

Acties:

crisp

Devver

Pixelated

ikbenwouter schreef op donderdag 19 juli 2007 @ 16:42:
Ik wil voor een website design een oranje balk bovenin mijn menu [...]

Mijn eerste gedachte: geef je menu een border-top

Overigens: overflow:hidden werkt ook prima tegen het IE6-probleem en is imo inderdaad netter.

[ Voor 16% gewijzigd door crisp op 20-07-2007 00:03 ]

Intentionally left blank

vrijdag 20 juli 2007 15:58

Acties:

ikbenwouter

! w t R

Topicstarter

Thunk schreef op donderdag 19 juli 2007 @ 17:24:
Probeer er is een 1x1 transparant gifje in te zetten...

Cartman! schreef op donderdag 19 juli 2007 @ 23:45:
Dit icm. font-size:0; en line-height:0; zorgt ervoor dat je zelfs 1*1px div's kunt maken in IE

Waarom zou je er dan nog een gifje in plaatsen?

crisp schreef op vrijdag 20 juli 2007 @ 00:02:
Mijn eerste gedachte: geef je menu een border-top

Dit had ik eerst ook maar ik wilde er een scheef hoekje aan hebben dus die border heb ik veranderd naar 2 divs, 1 met een transparent gifje waar een hoekje af was en 1 met oranje als bg-color.

Overigens: overflow:hidden werkt ook prima tegen het IE6-probleem en is imo inderdaad netter.

Dit gaf Cheatah inderdaad ook aan en werkt prima!

........................................................................................................................................................

vrijdag 20 juli 2007 16:43

Acties:

Cartman!

ikbenwouter schreef op vrijdag 20 juli 2007 @ 15:58:
[...]
Waarom zou je er dan nog een gifje in plaatsen?

IE kan verrot eigenwijs zijn...

vrijdag 20 juli 2007 17:29

Acties:

coubertin119

ikbenwouter schreef op vrijdag 20 juli 2007 @ 15:58:
[...]

Dit had ik eerst ook maar ik wilde er een scheef hoekje aan hebben dus die border heb ik veranderd naar 2 divs, 1 met een transparent gifje waar een hoekje af was en 1 met oranje als bg-color.

Als ik het me goed kan visualiseren, is het volgens mij beter om ofwel:

1 overbodig element te gebruiken, met daarin als background-image dat hoekje, en op dat element een achtergrondkleur in te stellen
de hele background-image met achtergrondkleurconstructie op de container toe te passen, het betreft hier toch een menu, dus je zou (als het design het toelaat) de child-elementen (list-items neem ik aan) width: 100% kunnen geven om het oranje van de container te verbergen, en dan heb je niks lay-outtoestanden in je HTML, maar eerlijk gezegd lijkt me dat nogal een niet erg voor de hand liggende constructie

Het is nergens voor nodig om inhoudsloze elementen te gebruiken om je lay-out te realiseren

.

Skat! Skat! Skat!

vrijdag 20 juli 2007 22:43

Acties:

Xcalibur

Verwijderd schreef op donderdag 19 juli 2007 @ 16:46:
Natuurlijk kan het wel. Maar ik gok dat je wat inhoud hebt (whitespace?), en dat daarom de minimale hoogte gelijk is aan de line-height. Pas de line-height en/of font-size aan, of speel met de overflow property.

Een comment erin zetten werkt ook