[CSS] Firefox probleem met border-bottom

[Verwijderd]

De volgende code moet een file overzichtje geven met links de bestandsomschrijving en rechts de bytesize. En daaronder... een streepje. Hoe moeilijk kan het zijn?

code:

<p style="width:139px; border-bottom:1px RED solid;">
    <a href="logo.gif" target="_blank" style="text-decoration:none;">
        <span style="clear:left; float:left;">Print</span>
        <span style="float:right;">3 kb</span>
    </a>
</p>

IE en Opera tonen het zoals gewenst, echter Firefox 1.0 en andere Gecko's verdommen het. Hoe kan dat... zo gecomipili.. moeilijk is die code niet.

if(answer.equals('tables')){ return "geen oplossing"; }

[Verwijderd]

Hoe ziet het er dan wel uit in ff??? misschien dat ondertaande css helpt maar das eeb glazenbol actie...

Cascading Stylesheet:

p
{
   height: auto;
}
a
{
   display:block;
   width:100%;
}

[ Voor 10% gewijzigd door Verwijderd op 23-11-2004 15:42 ]

[Verwijderd]

Oh dat is ook handig te vermelden: Firefox toont de lijn boven het geheel.

[Rataplan]

code:

<p style="width:139px; border-bottom:1px solid red;">

[Verwijderd]

Rataplan schreef op dinsdag 23 november 2004 @ 15:46:

code:

<p style="width:139px; border-bottom:1px solid red;">

Een paragraaf van 139px met daaronder een rode streep?

[Rataplan]

Verwijderd schreef op dinsdag 23 november 2004 @ 15:47:
Een paragraaf van 139px met daaronder een rode streep?

Ik begreep dat border-bottom het probleem was - en aangezien je de parameters afaik niet in de juiste volgorde hebt staan zou ik "solid" en "red" even van plaats laten verwisselen. Anders begrijp ik je niet goed

[Tsunami]

Ja, hetzelfde wat jij hebt gedaan alleen je moet die red en solid omdraaien

Refreshen is ook een kunst

[ Voor 18% gewijzigd door Tsunami op 23-11-2004 15:51 ]

[André]

Doordat de floats buiten je flow vallen zal die border-bottom daar ook geen rekening mee houden, beter is het om die floats weg te halen.

Eventueel hou je de floats en geef je de <p> een line-height mee.

[ Voor 21% gewijzigd door André op 23-11-2004 15:53 ]

[Verwijderd]

Dirty oplossing: &nbsp; toevoegen na de laatste <span>...

[ Voor 8% gewijzigd door Verwijderd op 23-11-2004 15:57 ]

[Verwijderd]

André schreef op dinsdag 23 november 2004 @ 15:51:
Doordat de floats buiten je flow vallen zal die border-bottom daar ook geen rekening mee houden, beter is het om die floats weg te halen.

Eventueel hou je de floats en geef je de <p> een line-height mee.

Die floats zij idd. het probleem, maar ik heb ze nodig om eenvoudig links EN rechts uit te lijnen. Als ik geen float gebruik en line-height:0px dan staat de streep niet onder de text, maar door de text...


"solid red" of "red solid" ook dat maakt Firefox niets uit. Lekker refreshen.

[André]

Zet die line-height dan ook hoger dan 0px

[Verwijderd]

André schreef op dinsdag 23 november 2004 @ 16:02:
Zet die line-height dan ook hoger dan 0px

No offence: wat denk je dat er dan gaat gebeuren?

[André]

Verwijderd schreef op dinsdag 23 november 2004 @ 16:06:
[...]


No offence: wat denk je dat er dan gaat gebeuren?

Dan gaat de border er onder staan omdat de inhoudsloze <p> (de floats vallen buiten de <p>) dan wel een hoogte krijgt.

[Verwijderd]

André schreef op dinsdag 23 november 2004 @ 16:11:
[...]

Dan gaat de border er onder staan omdat de inhoudsloze <p> (de floats vallen buiten de <p>) dan wel een hoogte krijgt.

In praktijk betekend dat:

code:

<p style="width:139px; border-bottom:1px solid red; line-height:5px;">
    <a href="/imgs_de/press/archive/downloads/gifs/p+c_logo.gif" target="_blank" style="text-decoration:none;">
        <div style="text-align:left; width:100%;">Print</div>
        <div style="text-align:right; width:100%;">3 kb</div>
    </a>
</p>

Waarbij de 5 variabel is, maar op geen enkele manier een goed resultaat opleverd in Firefox. Hoe had jij het in gedachten?


jereonr: de &nbsp toevoegen werkt idd, maar is wel dirty. thnx

[Verwijderd]

Gebruik dan de Unicode equivalent van & n b s p ; namelijk ALT + 0160 ( ). Die ziet niemand