[CSS2] FF + Moz ondersteunen width niet voor span? - Softwareontwikkeling

dinsdag 30 maart 2004 11:14

Acties:

hen/hun/die/diens

Topicstarter

Het gaat om de volgende testcase: http://forum-integration.info/nouveau/

In het menu wil ik de eerste drie letters wit op zwart hebben, en de rest zwart op wit. Dat doe ik zo:

HTML:

1 2	<a href="blaat"><span class="left">acc</span><span class="right">ueil</span></a> <a href="blaat"><span class="left">ann</span><span class="right">onces</span></a>

Cascading Stylesheet:

a {
  display: block;
}
span.left {
  width: 50px;
  text-align: right;
}
span.right {
  text-align: left;
}

En ook schijnen in FF die twee spans geen link-eigenschappen meer te hebben. Klikken erop doet niets, en de a:hover en a:active doen het ook niet... En toch is het allemaal validerende XHTML en CSS2. Ik dacht dat Moz en FF zo standards compliant waren?

[ Voor 13% gewijzigd door Mx. Alba op 30-03-2004 11:14 ]

Het is alleen een echte hetze als het uit Hetzerath komt, anders is het gewoon sprankelende ophef.

dinsdag 30 maart 2004 11:15

Acties:

Grijze Vos

Spans mogen geen width meekrijgen volgens de standaard.

* Grijze Vos zoekt et ff voor je op...

Op zoek naar een nieuwe collega, .NET webdev, voornamelijk productontwikkeling. DM voor meer info

dinsdag 30 maart 2004 11:16

Acties:

Verwijderd

Inline elementen kennen geen width, oplossing:

code:

1
2
3

span {
    display:block;
}

dinsdag 30 maart 2004 11:19

Acties:

Grijze Vos

Verwijderd schreef op 30 maart 2004 @ 11:16:
Inline elementen kennen geen width, oplossing:
code:
1
2
3
span {
    display:block;
}

En waarom zou je dan span gebruiken ipv div? Als je span toch gaat laten renderen als een div...

voor de TS:

W3C CSS2 Specs
10.3.1 Inline, non-replaced elements

The 'width' property does not apply. A specified value of 'auto' for 'left', 'right', 'margin-left' or 'margin-right' becomes a computed value of '0'.

Op zoek naar een nieuwe collega, .NET webdev, voornamelijk productontwikkeling. DM voor meer info

dinsdag 30 maart 2004 11:24

Acties:

Verwijderd

Grijze Vos schreef op 30 maart 2004 @ 11:19:
En waarom zou je dan span gebruiken ipv div? Als je span toch gaat laten renderen als een div...

dat weet ik niet, dat moet je aan de Topic starter vragen

dinsdag 30 maart 2004 11:33

Acties:

Mx. Alba

hen/hun/die/diens

Topicstarter

Als een span geen width mag hebben, waarom vind de CSS validator van W3C het dan wel goed?

Mijn reden om spans te gebruiken, en niet divs, is dat divs "verkeerd" gerenderd worden zonder stylesheet. Search engines en andere non-CSS-browsers en -robots zullen het met spans veel beter begrijpen dan met divs...

Het is alleen een echte hetze als het uit Hetzerath komt, anders is het gewoon sprankelende ophef.

dinsdag 30 maart 2004 11:33

Acties:

Grijze Vos

Als je een lettertype als courier kiest, waarbij de letters allemaal even lang zijn, dan is dit wel een oplossing:

HTML:

<HTML>
  <HEAD>
    <TITLE>test</TITLE>
    <STYLE>
      ul {
        margin: 0px;
        padding: 0px;
        list-style-type: none;
        line-height: 100%;
        font-family: courier;
      }
      li a {
        color: black;
        background-color: white;
        text-decoration: none;
      }      
      li a span {
        color: white;
        background-color: black;
      }
    </STYLE>
  </HEAD>
  <BODY>
    <UL>
      <LI><a href="#"><SPAN>BLA</SPAN>AT</a>
      <LI><a href="#"><SPAN>bla</SPAN>at</a>
      <LI><a href="#"><SPAN>gat</SPAN>hering</a>
      <LI><a href="#"><SPAN>WWW</SPAN>WWW</a>
    </UL>  
  </BODY>
</HTML>

zo ff snel opgeklopt....

Op zoek naar een nieuwe collega, .NET webdev, voornamelijk productontwikkeling. DM voor meer info

dinsdag 30 maart 2004 11:33

Acties:

Verwijderd

En waarom zou je dan span gebruiken ipv div? Als je span toch gaat laten renderen als een div...

SPAN en DIV is een grijs gebied. Vooral omdat beide geen semantische waarde hebben. Wellicht wordt het duidelijker met zo'n voorbeeld:

code:

table{
 display:block;
}
h1{
 display:table-cell;
}

In het eerste geval heb ik gewoon een data tabel, correct volgens semantische regels et cetera, maar ik wil hem er totaal anders (_visueel gezien_) uit laten zien, daarom gebruik ik 'display:block'. Ik verander dus alleen het visuele uiterlijk van de tabel, niet de waarde die de tabel aan de inhoud geeft.

Bij het tweede voorbeeld is dat precies zo. Het is gewoon een doodnormale header, maar omdat ik er bepaalde dingen op wil loslaten, zoals 'vertical-align' laat ik de header eruitzien, alsof het een TD is, maar die gebruik ik niet.

dinsdag 30 maart 2004 11:38

Acties:

Rickets

Finger and a shift

Mx. Alba schreef op 30 maart 2004 @ 11:33:
Als een span geen width mag hebben, waarom vind de CSS validator van W3C het dan wel goed?

Je mag een span best een width geven, deze moet alleen niet toegepast worden.

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.

dinsdag 30 maart 2004 11:55

Acties:

Verwijderd

http://www.w3.org/TR/2004...t.html#the-width-property

quote: CSS 2.1
Applies to: all elements but non-replaced inline elements, table rows, and row groups

En inderdaad. SPAN is, standaard, inline en non-replaced (IMG is een voorbeeld van replaced, inline).

dinsdag 30 maart 2004 11:57

Acties:

InZane

Grijze Vos schreef op 30 maart 2004 @ 11:33:
Als je een lettertype als courier kiest, waarbij de letters allemaal even lang zijn, dan is dit wel een oplossing:
HTML:
1
knip
zo ff snel opgeklopt....

Aaargh, die hoofdletters

dinsdag 30 maart 2004 12:03

Acties:

Mx. Alba

hen/hun/die/diens

Topicstarter

Maar ik wil niet Courrier gebruiken... Ik wil Lucida Console gebruiken, die niet op alle systemen aanwezig is, vandaar dat ik ook Lucida Sans Typewriter, OCR A Extended, Biwidth en enkele andere non-Windows-fonts gedefiniëerd heb. Wat ik wil doen, is dus centreren op de grens tussen het derde en het vierde karakter... Kennelijk is dat dus alleen met divs te doen, maar dan worden de links onleesbaar zonder stylesheets

Het is alleen een echte hetze als het uit Hetzerath komt, anders is het gewoon sprankelende ophef.

dinsdag 30 maart 2004 12:08

Acties:

Verwijderd

Ik dacht dat Moz en FF zo standards compliant waren?

Fout ligt dus meestal bij jezelf. Het lijkt me ook handiger om daar in het vervolg vanuit te gaan

Niet compleet getest, maar ik heb het gevoel dat zoiets mogelijk zou kunnen werken:

code:

span{
 display:block;
 float:left;
 width:50px;
}

En anders iets in deze richting (bijvoorbeeld twee keer een SPAN gebruiken, beide 'display:block' en meer 1 floaten).

dinsdag 30 maart 2004 12:22

Acties:

Grijze Vos

InZane schreef op 30 maart 2004 @ 11:57:
[...]

Aaargh, die hoofdletters

Wat is daar het probleem mee? Kwestie van wat je gewend bent...

Op zoek naar een nieuwe collega, .NET webdev, voornamelijk productontwikkeling. DM voor meer info

dinsdag 30 maart 2004 12:24

Acties:

Verwijderd

Grijze Vos schreef op 30 maart 2004 @ 12:22:
Wat is daar het probleem mee? Kwestie van wat je gewend bent...

In XHTML is het niet toegestaan, dus niet alleen een kwestie van wat je gewend bent

quote: http://www.w3.org/TR/xhtml1/#h-4.2
XHTML documents must use lower case for all HTML element and attribute names. This difference is necessary because XML is case-sensitive e.g. <li> and <LI> are different tags.

dinsdag 30 maart 2004 12:28

Acties:

Grijze Vos

Ik heb tot nu toe nog geen xhtml gebruikt. Kzal er iig rekening mee houden als ik dat doe.

Op zoek naar een nieuwe collega, .NET webdev, voornamelijk productontwikkeling. DM voor meer info

dinsdag 30 maart 2004 12:35

Acties:

Mx. Alba

hen/hun/die/diens

Topicstarter

Verwijderd schreef op 30 maart 2004 @ 12:08:
Fout ligt dus meestal bij jezelf. Het lijkt me ook handiger om daar in het vervolg vanuit te gaan

Daar ben ik nu ook achter ja

Maar toch ben ik op een écht mozillabugje gestuit ook, toen Moz en FF alleen maar een witte pagina lieten zien. Foute clipping, op te lossen door html en body expliciet een width en height mee te geven... Dus zelfs Mozilla is niet heilig

Niet compleet getest, maar ik heb het gevoel dat zoiets mogelijk zou kunnen werken:
code:
1
2
3
4
5
span{
 display:block;
 float:left;
 width:50px;
}
En anders iets in deze richting (bijvoorbeeld twee keer een SPAN gebruiken, beide 'display:block' en meer 1 floaten).

Thx!

Ik ga vanmiddag eens iets in die richting proberen.

Het is alleen een echte hetze als het uit Hetzerath komt, anders is het gewoon sprankelende ophef.

dinsdag 30 maart 2004 12:39

Acties:

Verwijderd

Foute clipping, op te lossen door html en body expliciet een width en height mee te geven... Dus zelfs Mozilla is niet heilig

Ik had het gelezen ja. Was inderdaad een bug rond 1.4/1.6 is inmiddels al gefixed. Komt omdat Mozilla 'overflow' op het BODY element zelf hield en niet overzette naar de 'viewport'. Want het BODY element zelf had geen hoogte (alles was absoluut gepositioneerd) en daarom kon er ook niks overheen ("overflowen").

Is inmiddels gefixed (maar dit geld dus alleen voor text/html documenten).

dinsdag 30 maart 2004 12:50

Acties:

RM-rf

1 2 3 4 5 7 6 8 9

is overigens de propertie display: inline-block; al in Mozilla geimplementeerd?
dat zou dé oplossing zijn voor dit soort problemen...

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen

dinsdag 30 maart 2004 12:53

Acties:

Verwijderd

Nee, gaat ook nog wel een tijdje duren vrees ik (Opera en Safari hebben wel ondersteuning als ik me niet vergis).

dinsdag 30 maart 2004 14:55

Acties:

Mx. Alba

hen/hun/die/diens

Topicstarter

display: block; en float: left; lossen idd het probleem op, thx Anne! Maar nu zit er een pixeltje ruimte tussen de twee spans, terwijl bij beide padding en margin 0 zijn, en border none...

Het is alleen een echte hetze als het uit Hetzerath komt, anders is het gewoon sprankelende ophef.

dinsdag 30 maart 2004 14:59

Acties:

BtM909

Watch out Guys...

Mx. Alba schreef op 30 maart 2004 @ 14:55:
display: block; en float: left; lossen idd het probleem op, thx Anne! Maar nu zit er een pixeltje ruimte tussen de twee spans, terwijl bij beide padding en margin 0 zijn, en border none...

Heb je een voorbeeldje online staan. 't zou wellicht (het ontbreken aan) een
clear: both | left | right issue kunnen zijn

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

dinsdag 30 maart 2004 15:42

Acties:

Mx. Alba

hen/hun/die/diens

Topicstarter

Voorbeeldje: http://forum-integration.info/nouveau/

Het is alleen een echte hetze als het uit Hetzerath komt, anders is het gewoon sprankelende ophef.

dinsdag 30 maart 2004 15:47

Acties:

BtM909

Watch out Guys...

Mx. Alba schreef op 30 maart 2004 @ 14:55:
display: block; en float: left; lossen idd het probleem op, thx Anne! Maar nu zit er een pixeltje ruimte tussen de twee spans, terwijl bij beide padding en margin 0 zijn, en border none...

Waarin test je dit, want IE doet het goed en Mozilla doet helemaal niks

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

dinsdag 30 maart 2004 16:07

Acties:

Mx. Alba

hen/hun/die/diens

Topicstarter

IE5.5 heb ik hier alleen maar, en daarin zie ik het volgende:
Afbeeldingslocatie: http://forum-integration.info/imgs/screenshot.png

Er zit dus een beetje ruimte tussen de span.left en de span.right...

Het is alleen een echte hetze als het uit Hetzerath komt, anders is het gewoon sprankelende ophef.

dinsdag 30 maart 2004 18:42

Acties:

crisp

Devver

Pixelated

Mx. Alba schreef op 30 maart 2004 @ 16:07:
IE5.5 heb ik hier alleen maar, en daarin zie ik het volgende:
[afbeelding]

Er zit dus een beetje ruimte tussen de span.left en de span.right...

da's weer de bekende IE-3pixel-bug...

Intentionally left blank

woensdag 31 maart 2004 11:41

Acties:

Mx. Alba

hen/hun/die/diens

Topicstarter

grmbl... Handig zeg, standaarden, als iedereen ze anders interpreteert

Het is alleen een echte hetze als het uit Hetzerath komt, anders is het gewoon sprankelende ophef.