[css] divje met height 1 pixel - Softwareontwikkeling

woensdag 30 april 2003 14:45

Acties:

Verwijderd

Topicstarter

ff kijken of er op koninginnedag reacties komen.

Ik zit normaal meer aan de andere kant van de schuur, maar heb nu een klein opmaakt probleempje. Zoals iedereen ben ik nu bezig mijn sites om te bouwen naar xhtml 1.0. Nu wil ik een horizontale ruler maken van 1 pixel hoog. In Mozilla wordt deze gewoon goed getoond, maar in Internet Explorer wordt de div 2 pixels hoog. Zoals op dit plaatje te zien is:

Afbeeldingslocatie: http://www.webtrax.nl/tmp/2px.gif

Afbeeldingslocatie: http://www.webtrax.nl/tmp/2px.gif

Het gaat dus om de grijs/wit gestreepte streep aan de onderkant.

Heb de doctype bovenaan de pagina gezet als:

HTML:

1 2	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

En in de style sheet de divs als volgt gedefinieerd:

Cascading Stylesheet:

div {
        padding     : 0px;
        margin      : 0px;
        font-size       : 0px;
        float       : left;
}
    
div#dashed {
        background  : url('images/gwruler.gif');
        width       : 760px;
        height      : 1px;
}

Het aanroepen gebeurt als volgt:

HTML:

1	<div id="dashed"></div>

Hoe kan ik ervoor zorgen dat die div gewoon 1 pixel hoog wordt?
^{Heb er niks over kunnen googlen, want dan blijf ik bij borders uitkomen.}

[ Voor 10% gewijzigd door Verwijderd op 30-04-2003 16:07 ]

woensdag 30 april 2003 14:47

Acties:

dominic

will code for food

Waarom geen HR met dashed border van 1px hoog?

Download my music on SoundCloud

woensdag 30 april 2003 14:49

Acties:

mark117

je kan iets proberen met een plaatje van 1x1 (transparant) er neer te zetten om af te dwingen dat die 1px hoog moet zijn

volgens mij moet dat dan wel en in tabel staan

woensdag 30 april 2003 14:50

Acties:

Verwijderd

Topicstarter

dominic schreef op 30 April 2003 @ 14:47:
Waarom geen HR met dashed border van 1px hoog?

Omdat ie er wel op lijkt, maar het niet precies is. Streepjes zijn bijvoorbeeld breder.

woensdag 30 april 2003 14:56

Acties:

Verwijderd

Met Dreamweaver en ik geloof ook met Photoshop kan je een transparant plaatje (spacer.gif) aanmaken die je voor dat soort dingen kan gebruiken.
Dan doe je dus:

code:

1	<div id="dashed">[img]"spacer.gif"[/img]</div>

Je kan die spacer.gif natuurlijk ook gewoon met andere software maken, gewoon een 1x1 px transparant plaatje maken.
Als het goed is werkt dit, succes ermee.

[ Voor 13% gewijzigd door Verwijderd op 30-04-2003 14:57 ]

woensdag 30 april 2003 15:00

Acties:

Rickets

Finger and a shift

Geef die #dashed een line-height van 1 pixel mee

Cascading Stylesheet:

1	line-height: 1px;

Verwijderd schreef op 30 April 2003 @ 14:56:
Met Dreamweaver en ik geloof ook met Photoshop kan je een transparant plaatje (spacer.gif) aanmaken die je voor dat soort dingen kan gebruiken.
Dan doe je dus:
code:
1
...
Je kan die spacer.gif natuurlijk ook gewoon met andere software maken, gewoon een 1x1 px transparant plaatje maken.
Als het goed is werkt dit, succes ermee.

Dat zijn dus weer Netscape 4 praktijken, die je probeert te voorkomen als je je site XHTML-valid probeert te krijgen. Het werkt, ok, maar netjes is anders

[ Voor 92% gewijzigd door Rickets op 30-04-2003 15:02 ]

If some cunt can fuck something up, that cunt will pick the worst possible time to fucking fuck it up, because that cunt’s a cunt.

woensdag 30 april 2003 16:24

Acties:

Verwijderd

Topicstarter

Met een spacer werken wil ik niet, heb het voor de zekerheid wel ff geprobeerd, maar hield ook niks uit. Ook line-height op 1 of 0 zetten werkt niet. line-height is de afstand tussen de regels, maar er zit geen content in de div.

woensdag 30 april 2003 16:31

Acties:

Rickets

Finger and a shift

Verwijderd schreef op 30 april 2003 @ 16:24:
Met een spacer werken wil ik niet, heb het voor de zekerheid wel ff geprobeerd, maar hield ook niks uit. Ook line-height op 1 of 0 zetten werkt niet. line-height is de afstand tussen de regels, maar er zit geen content in de div.

Zet de line-height eens op 1 px en zorg ervoor dat er wat in je div staat

HTML:

1	<div id="dashed"> </div>

[ Voor 5% gewijzigd door Rickets op 30-04-2003 16:31 ]

If some cunt can fuck something up, that cunt will pick the worst possible time to fucking fuck it up, because that cunt’s a cunt.

woensdag 30 april 2003 16:39

Acties:

GrimaceODespair

eens een tettenman, altijd ...

Volgens mij is dit een befaamde IE-bug die DIV's off-by-1-pixel positioneert. Welke IE gebruik je? Wat gebeurt er als je de div 0 hoog maakt?

Wij onderbreken deze thread voor reclame:
http://kalders.be

woensdag 30 april 2003 16:45

Acties:

Rickets

Finger and a shift

GrimaceODespair schreef op 30 April 2003 @ 16:39:
Volgens mij is dit een befaamde IE-bug die DIV's off-by-1-pixel positioneert. Welke IE gebruik je? Wat gebeurt er als je de div 0 hoog maakt?

Dan laat Mozilla de div niet zien en IE maakt hem 2 pixels hoog

[ Voor 7% gewijzigd door Rickets op 30-04-2003 16:47 ]

If some cunt can fuck something up, that cunt will pick the worst possible time to fucking fuck it up, because that cunt’s a cunt.

woensdag 30 april 2003 17:12

Acties:

Verwijderd

Topicstarter

Rickets, met die spatie erin en line-height werkt ie...dankjewel
jammer dat het toch weer een kleine work-around moet zijn om het crossbrowser te maken.

donderdag 1 mei 2003 02:45

Acties:

Verwijderd

Ik zeg vast iets heel doms, maar kun je het niet met een <table> (ipv een div) doen met cellspacing, cellpadding en border van 0?
Dan de hoogte 1 maken en als achtergrondplaatje dat strepenplaatje van jou.
Zou toch moeten werken lijkt me...

donderdag 1 mei 2003 03:24

Acties:

ANdrode

Verwijderd schreef op 01 May 2003 @ 02:45:
Ik zeg vast iets heel doms, maar kun je het niet met een <table> (ipv een div) doen met cellspacing, cellpadding en border van 0? ...

kan wel, maar dan is het hele idee van XHTML 1.0 Compliant maken weg..

donderdag 1 mei 2003 03:35

Acties:

Verwijderd

misschien is het wel een dom vraagje maar wat is dash? en is dat alleen te gebruiken met een div?

misschien als ik meer weet van dit dat ik dan een suggestie kan doen.

donderdag 1 mei 2003 08:23

Acties:

Mr_Kite

Alles van waarde is weerloos

wat ook zou kunnen helpen in plaats van die spatie in de div zetten (wat helemaal niet hoeft per se), is alles achterelkaar zetten... Ik weet niet hoe het komt, maar IE schijnt soms enters in je text mee te renderen (.... vraag het me niet!!!). Nu had ik hetzelfde probleem laatst, en per ongeluk kwam ik erachter dat het hielp om alle tags binnen dat veld en eromheen achter elkaar te zetten. Ik kan hier je code niet zien dus ik weet niet 100% zeker of dit ook van jou op toepassing is, maar de symtomen klinken echt hetzelfde. In mijn geval had ik dus een div tag met daarin een plaatje waar gewoon 1 lijn teveel onder kwam

edit:
even voor de duidelijkheid een voorbeeld, mijn tag was dus

HTML:

<div class="kruisjero"></div>
[img]"img/kop_expositie.png"[/img]</div>
[img]"img/vorm.jpg"[/img]
<div id="kaderlonder">
<div class="kruisjelb"></div>

en werd dus:

HTML:

1
2
3

<div class="kruisjero"></div>
[img]"img/kop_expositie.png"[/img]</div>[img]"img/vorm.jpg"[/img]<div id="kaderlonder">
<div class="kruisjelb"></div>

_{voor de duidelijkheid heb ik uiteraard niet alles gepost, het klopt allemaal wel hoor, met starten en sluiten van de div-tags}

[ Voor 34% gewijzigd door Mr_Kite op 01-05-2003 08:39 ]

donderdag 1 mei 2003 11:13

Acties:

Verwijderd

Ik snap niet dat niet iemand al heeft gezegd dat het gewoon een kwestie is van een beetje CSS toevoegen, verder niet...

Cascading Stylesheet:

1
2
3

background-repeat: repeat-x;
/* eventueel er nog bij: */
background-position: left bottom; /* of left top, of wat je nodig hebt */

offtopic:
Overigens snap ik dan weer niet waarom mensen XHTML transitional gaan gebruiken, want dan komt het eigenlijk alleen nog neer op wat syntaxtische wijzigingen. Ok, XHTML 1.0 lijkt redelijk veel op HTML 4.01 qua elementen en attributen, het verschilt haast niks, maar als je dan Transitional gaat gebruiken is nog eens de helft van de winst weg...

donderdag 1 mei 2003 17:53

Acties:

Verwijderd

Topicstarter

Verwijderd schreef op 01 mei 2003 @ 11:13:
Ik snap niet dat niet iemand al heeft gezegd dat het gewoon een kwestie is van een beetje CSS toevoegen, verder niet...
Cascading Stylesheet:
1
2
3
background-repeat: repeat-x;
/* eventueel er nog bij: */
background-position: left bottom; /* of left top, of wat je nodig hebt */
offtopic:
Overigens snap ik dan weer niet waarom mensen XHTML transitional gaan gebruiken, want dan komt het eigenlijk alleen nog neer op wat syntaxtische wijzigingen. Ok, XHTML 1.0 lijkt redelijk veel op HTML 4.01 qua elementen en attributen, het verschilt haast niks, maar als je dan Transitional gaat gebruiken is nog eens de helft van de winst weg...

ff een reactie op de jouwe. Die background-repeat toevoegen heeft weinig nut, de achtergrond tile't uiteraard niet meer vertical, maar de 1e extra pixel blijft wel zichtbaar (eronder), zij het dan in de kleur van de achtergrond en dat is in mijn geval niet goed, omdat de site niet daar ophoudt. Ik gebruikte transitional omdat ik ermee zat te kloten, natuurlijk gebruik je normaal strict. Toch bedankt voor je reactie.