[css] floating block - Softwareontwikkeling

zondag 23 oktober 2005 12:15

Acties:

Software Engineer

Topicstarter

Ik heb een floating block met een vaste width en een ingestelde padding, border en margin zijn 0. Onder IE wordt het block gerenderd zoals ik verwacht maar onder FireFox wordt hij anders gerenderd. Als ik naar de specificaties kijk doet FireFox het goed, maar dat weet ik niet zeker. Is er een eenvoudige oplossing, behalve de margin instellen en geen padding, om dit op te lossen?

Daarnaast probeer ik mijn menu een vaste hoogte te geven en de tekst in het midden uit te lijnen, maar de tekst wordt stug bovenin het block gerenderd. Ik heb al diverse verschillende instellingen geprobeerd, maar ik kom er niet uit.

De site waar het om gaat: http://home.wanadoo.nl/salandur/dansmarathon/
De bijbehorende CSS: http://home.wanadoo.nl/salandur/dansmarathon/site.css

Assumptions are the mother of all fuck ups | iRacing Profiel

zondag 23 oktober 2005 12:28

Acties:

crisp

Devver

Pixelated

Je gebruikt geen DTD dus rendered IE in quirksmode met bijbehorend boxmodel. Firefox rendered volgens het W3C boxmodel waarbij breedte = width + padding + border
Kortom: je div.slogan wordt te breed.

Intentionally left blank

zondag 23 oktober 2005 12:47

Acties:

Salandur

Software Engineer

Topicstarter

crisp schreef op zondag 23 oktober 2005 @ 12:28:
Je gebruikt geen DTD dus rendered IE in quirksmode met bijbehorend boxmodel. Firefox rendered volgens het W3C boxmodel waarbij breedte = width + padding + border
Kortom: je div.slogan wordt te breed.

O ja, het is idd wel handig om er een DTD bij te plaatsen. Maakt het nog uit welke? Want met

HTML:

1	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

doen ze het nog steeds verschillend.

Assumptions are the mother of all fuck ups | iRacing Profiel

zondag 23 oktober 2005 12:49

Acties:

crisp

Devver

Pixelated

De volledige DTD voor HTML 4.01 Transitional is deze:

HTML:

1 2	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Intentionally left blank

zondag 23 oktober 2005 12:49

Acties:

Verwijderd

Zelfs met de Strict DTD (die crisp bedoelt) gaan Internet Explorer 5.5 en eerder nog steeds niet doen wat je wilt. Het best kun je altijd vermijden om én een padding, én een height/width aan elementen toe te kennen. Dan doen alle browsers die serieus te nemen zijn nagenoeg hetzelfde.

zondag 23 oktober 2005 13:20

Acties:

crisp

Devver

Pixelated

Mwa, voor IE5.x kan je altijd nog dmv conditional comments een extra stylesheet includen voor de probleemgevallen. Soms ontkom je er niet aan om width/height en padding/border op hetzelfde element te gebruiken en extra markup toevoegen om dat te omzeilen is ook niet alles...

Overigens heeft Strict/Transitional niet te maken met quirksmode/standards compliant mode rendering in IE6.

[ Voor 18% gewijzigd door crisp op 23-10-2005 13:22 ]

Intentionally left blank

zondag 23 oktober 2005 13:35

Acties:

Verwijderd

True. Maar nog altijd geldt: voorkomen is beter dan genezen. Als je echt niet hoeft, voorkom dan het gebruik van een padding en een afmeting op hetzelfde element. Die conditional comments vallen voor mij in de categorie "hack". De minst lelijke wellicht, maar toch vind ik dat je die pas moet gaan gebruiken als alle andere "normale" oplossingen niet voldoen.

En dat van die DTD's, daar heb je gelijk in natuurlijk. Zolang je maar de complete DTD erboven zet, met SYSTEM gedeelte erbij, en dat zie je bij de meeste Transitional declaraties niet terug.

[ Voor 10% gewijzigd door Verwijderd op 23-10-2005 13:35 ]

zondag 23 oktober 2005 13:49

Acties:

Salandur

Software Engineer

Topicstarter

crisp schreef op zondag 23 oktober 2005 @ 12:49:
De volledige DTD voor HTML 4.01 Transitional is deze:
HTML:
1
2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

Nu zijn ze idd allebei hetzelfde. tnxs.

het liefst zou ik de tekst volledig gecentreert hebben in het block, zal eens proberen of vertical-align helpt, maar dat betwijfel ik aangezien hij het bij het menu ook niet goed centreert.

[ Voor 48% gewijzigd door Salandur op 23-10-2005 13:56 ]

Assumptions are the mother of all fuck ups | iRacing Profiel

zondag 23 oktober 2005 13:52

Acties:

crisp

Devver

Pixelated

vertical-align geldt alleen voor textnodes.

Intentionally left blank

zondag 23 oktober 2005 13:58

Acties:

Salandur

Software Engineer

Topicstarter

crisp schreef op zondag 23 oktober 2005 @ 13:52:
vertical-align geldt alleen voor textnodes.

Als ik de tekst binnen zet dan zou hij het wel doen?

edit:
niet dus

[ Voor 10% gewijzigd door Salandur op 23-10-2005 14:07 ]

Assumptions are the mother of all fuck ups | iRacing Profiel

zondag 23 oktober 2005 13:58

Acties:

Mercarra

Nu heb ik deze week, ook hier op tweakers gelezen over verschillende boxmodels. Deze voldoen niet aan de standaard, maar werken prima. Ook vermoed ik dat ze ooit nog wel officieel ingevoerd gaan worden. Is het verstandig deze te gebruiken?

code:

1 2	{box-sizing: border-box; -moz-box-sizing: border-box}

Canon EOS 6D / Samyang 14mm f/2.8 / 17-40mm f/4.0 / 35mm f/1.4 / 50mm f/1.4 / 85mm f/1.8 / 70-200mm f/4 IS mercarra.nl

zondag 23 oktober 2005 14:00

Acties:

Verwijderd

offtopic:
Geduld is met een d

zondag 23 oktober 2005 14:16

Acties:

BasieP

Salandur schreef op zondag 23 oktober 2005 @ 13:58:
[...]

Als ik de tekst binnen zet dan zou hij het wel doen?

edit:
niet dus

is toch niet opeens een block? maar blijft toch ook gewoon text?

trouwens @crisp:
ik heb je ooit eens horen zeggen dat het misschien tijd werd voor een 'css rendert anders in FF dan in IE' topic..
Ik heb atm ook een render probleem, en aangezien dit topic nog niet bestaat, zal ik er 1 maken, of zal ik gewoon een topic voor mijn eigen probleem maken? of zal ik dit topic hijacken?

[ Voor 4% gewijzigd door BasieP op 23-10-2005 14:43 ]

This message was sent on 100% recyclable electrons.

zondag 23 oktober 2005 15:35

Acties:

crisp

Devver

Pixelated

Salandur schreef op zondag 23 oktober 2005 @ 13:58:
[...]

Als ik de tekst binnen
zet dan zou hij het wel doen?

edit:
niet dus

toch wel hoor

Verder zou ik gewoon het W3C boxmodel aanhouden. box-sizing is nog niet echt breed ondersteund.

BasieP: er is al een algemeen render-probleem topic in de maak, maar dat is meer een tips&truuks topic, voor specifieke problemen zou ik gewoon een apart topic aanmaken.

[ Voor 20% gewijzigd door crisp op 23-10-2005 15:36 ]

Intentionally left blank

zondag 23 oktober 2005 17:23

Acties:

Salandur

Software Engineer

Topicstarter

crisp schreef op zondag 23 oktober 2005 @ 15:35:
[...]

toch wel hoor ;)
Verder zou ik gewoon het W3C boxmodel aanhouden. box-sizing is nog niet echt breed ondersteund.

ik bedoelde meer verticaal centreren

Assumptions are the mother of all fuck ups | iRacing Profiel

zondag 23 oktober 2005 17:50

Acties:

crisp

Devver

Pixelated

Salandur schreef op zondag 23 oktober 2005 @ 17:23:
[...]

ik bedoelde meer verticaal centreren

Dat doe je doorgaans door een element boven en onder margin te geven. vertical-align is eigenlijk alleen van toepassing op het table layout-model.

Intentionally left blank

zondag 23 oktober 2005 18:54

Acties:

Salandur

Software Engineer

Topicstarter

crisp schreef op zondag 23 oktober 2005 @ 17:50:
[...]

Dat doe je doorgaans door een element boven en onder margin te geven. vertical-align is eigenlijk alleen van toepassing op het table layout-model.

Jammer, dan kan ik dus niet een menu maken met divjes

Assumptions are the mother of all fuck ups | iRacing Profiel

zondag 23 oktober 2005 19:54

Acties:

Verwijderd

Salandur schreef op zondag 23 oktober 2005 @ 12:15:
Daarnaast probeer ik mijn menu een vaste hoogte te geven en de tekst in het midden uit te lijnen, maar de tekst wordt stug bovenin het block gerenderd. Ik heb al diverse verschillende instellingen geprobeerd, maar ik kom er niet uit

Geef de tekst de totale hoogte als line-height dan wordt één regel verticaal binnen die hoogte gecentreerd (zorg wel dat de verticale padding 0 is).

Cascading Stylesheet:

div.menu {
  height:40px;
  line-height:40px;
}

maandag 24 oktober 2005 08:39

Acties:

Salandur

Software Engineer

Topicstarter

Verwijderd schreef op zondag 23 oktober 2005 @ 19:54:
[...]

Geef de tekst de totale hoogte als line-height dan wordt één regel verticaal binnen die hoogte gecentreerd (zorg wel dat de verticale padding 0 is).
Cascading Stylesheet:
1
2
3
4
div.menu {
  height:40px;
  line-height:40px;
}

Voor 1 regel een prima oplossing, maar niet op het moment dat de tekst over 2 regels verspreid wordt, dus ik laat het lekker zo als het nu is.

Assumptions are the mother of all fuck ups | iRacing Profiel

dinsdag 25 oktober 2005 14:37

Acties:

pelleke

Aut viam inveniam aut faciam

crisp schreef op zondag 23 oktober 2005 @ 13:20:
Mwa, voor IE5.x kan je altijd nog dmv conditional comments een extra stylesheet includen voor de probleemgevallen. Soms ontkom je er niet aan om width/height en padding/border op hetzelfde element te gebruiken en extra markup toevoegen om dat te omzeilen is ook niet alles...

Overigens heeft Strict/Transitional niet te maken met quirksmode/standards compliant mode rendering in IE6.

Hmm. Ik blijk dit probleem ook te hebben; DTD erboven gezet, maar nu gaat het goed in FF (w3c), IE6 (zie dtd) maar ie5.x heeft dus kuren. Nu ziet mijn CSS er als volgt uit:

Cascading Stylesheet:

div#navbar {text-align: left;
.....
border: solid #000000 1px;
width: 120px;}

#navbar a:link, #navbar a:visited {color: #990000;
......
border-right: solid #990000 10px;
padding: 3px;
display: block;
width: 104px;
}

#navbar a:hover, #navbar a.highlite {color: #ffeed5;
......
border-right: solid #c86464 10px;
}

De uitwerking ervan is hier te bezichtigen.

Nu gaat dit dus goed in ff en ie6, maar in ie5 ziet dit er ZO uit:
Afbeeldingslocatie: http://img497.imageshack.us/img497/8369/dingsel9xy.png

Afbeeldingslocatie: http://img497.imageshack.us/img497/8369/dingsel9xy.png

Nu vraag ik me af: is dit ding oko nog op een andere manier te CSSen, of moet ik nu javascript erin gaan stouwen voor al mijn ie5 gebruikers?

dinsdag 25 oktober 2005 15:32

Acties:

Verwijderd

Tot het moment dat je een element 100% hoogte wil geven maar ook een padding-top en/of padding-bottom. Dan voldoet het W3 boxmodel niet meer

dinsdag 1 november 2005 13:57

Acties:

pelleke

Aut viam inveniam aut faciam

Mensen, niemand een idee?

dinsdag 1 november 2005 14:02

Acties:

crisp

Devver

Pixelated

IE5 kent het W3C boxmodel niet zoals al eerder gezegd is; voor IE5 zal je dus voor die elementen waar je een width/height tesamen met een padding en/of border gebruikt de dimensies moeten 'corrigeren'.
Imho de beste manier om dit te doen is door een additionele stylesheet voor IE5.x in te laden; dat kan bijvoorbeeld mbv conditional comments (hier op GoT doen we dat ook, dus je kan de source bekijken om te zien hoe).

[ Voor 10% gewijzigd door crisp op 01-11-2005 14:02 ]

Intentionally left blank