[html/css] Oneven brede tabel met twee exact gelijke columns

[Geert.H]

Ik heb een relatief (op het eerst gezicht) simpel probleem waar ik lastig uitkom.

Ik heb een tabel. Die heeft maximale breedte van 600px. Deze is responsive, en kan dus ook 599px zijn. Nu bestaat die tabel uit twee kolommen die een breedte 50% hebben. Wat er nu gebeurt bij een breedte van 599px is dat de linker kolom 300px is en de rechter kolom 299px.

Dat mag niet. Ik wil dat beide kolommen exact dezelfde breedte hebben. Dan liever nog beiden 299px breed en dat de gehele tabel 1px minder breed is. Dat kan wel.

Een simpele testcase staat hier:
http://inpointbox.nl/test.html

Wat aanvullende informatie:
Dit is een probleem wat optreed in een e-mail template. Dus JS oplossingen kunnen helaas niet worden gebruikt.

Het is een probleem, omdat er afbeeldingen in worden geladen die exact op elkaar aansluiten. Doordat er een pixel breedte verschil is, ontstaat er een hoogte verschil, waardoor de volgende afbeeldingen niet meer op elkaar aansluiten.

Ik heb geen idee waar op te zoeken / wat te proberen.

[MueR]

Browsers doen niet aan halve pixels voor elementen.

[Yoram]

Misschien kan je 1 grote achtergrond afbeelding maken en daar overheen je table plaatsen..

[ Voor 79% gewijzigd door Yoram op 10-06-2016 16:29 . Reden: Niet gelezen... ]

[Geert.H]

@MueR: No shit sherlock. Dat weet ik ook. Wat een browser alleen doet is de halve pixel van de ene kolom bij de andere optellen. Ik wil dat die ze óf beiden naar beneden afrond, of beiden omhoog. Maar niet oneven verdeeld.

@Yoram: goede vraag! Ik heb mijn hoofd al gebroken over een andere oplossing. Maar ik weet die (helaas) nog niet. Een voorbeeld uit de praktijk is deze nieuwsbrief: http://us12.campaign-arch...d=4b517be015&e=82ad9c5b8d

Een deel van deze afbeeldingen bestaat uit twee kolommen. Waarbij, als je je scherm minder breed maakt afbeeldingen ziet verspringen.

Zoals je zelf ook al aangeeft "vroeger" en tabellen... Helaas zijn e-mail programma's zo enorm verouderd dat we alles in tabellen moeten doen, omdat het anders niet werkt.

edit:
omdat je je vraag hebt vervangen door een opmerking is mijn bovenstaande reactie wat raar maar helaas werken e-mailprogramma's niet met achtergrond afbeeldingen waar je weer elementen overheen kan positioneren.

edit 2:
Ik sta open voor alternatieve manieren om dit voor elkaar te krijgen. Maar binnen alle eisen die er liggen, is dit (Tot nu toe) de beste oplossing

[ Voor 19% gewijzigd door Geert.H op 10-06-2016 16:37 ]

[Ventieldopje]

Tsja, dan moet je voor alle oneven breedtes wat gaan verzinnen, lijkt mij niet echt handig. Je kan in email clients ook geen javascript gebruiken en media queries zijn vaak ook een drama. Ben benieuwd of en hoe je dit op gaat lossen

[Yoram]

Ik had ondertussen mijn reactie veranderd omdat ik de laatste zin van je post niet had gelezen. En idd html in e-mail is drama!

Je zou eventueel alsnog een complete background kunnen pakken met daaroverheen een table, met transparante links. En is het niet zo dat als je 'em' gebruikt inplaats van 'px', dat je daarmee precies formaten kan vaststellen?

[Marc3l]

Misschien een dom antwoord maar kan je er niet 1 afbeelding van maken en die in 1 cel plaatsen?

@Yoram backgrounds werken niet in alle clients.

[Zephrex]

Ik zou wss % hebben gebruikt in plaats van harde pixels. Of pixels voor desktop versie en 50/50% voor mobile?

[ Voor 0% gewijzigd door Zephrex op 10-06-2016 19:46 . Reden: typfoutje ]

[Verwijderd]

Ik zie in je voorbeeld geen dingen verspringen, maar misschien kijk ik naar het verkeerde.

Anyway - renderen van HTML in email clients is nog vele malen minder betrouwbaar dan in browsers. vergelijkbaar met printen van een HTML-pagina en proberen het er altijd hetzelfde uit te laten zien. Het medium is er domweg niet geschikt voor.

Ik heb het niet geprobeerd, maar werkt float in emails? Dan zou je misschien de linkerhelft 100% breed kunnen maken en de rechterhelft daarbinnen 50% met float: right.

[DJMaze]

Geert.H schreef op vrijdag 10 juni 2016 @ 15:57:
Nu bestaat die tabel uit twee kolommen die een breedte 50% hebben.
...
Wat aanvullende informatie:
Dit is een probleem wat optreed in een e-mail template.

Heb jij al gegoogled wat er uberhaupt kan in e-mail?
Zo ja, dan heb je toch je antwoord?

[MueR]

Geert.H schreef op vrijdag 10 juni 2016 @ 16:33:
@MueR: No shit sherlock. Dat weet ik ook. Wat een browser alleen doet is de halve pixel van de ene kolom bij de andere optellen. Ik wil dat die ze óf beiden naar beneden afrond, of beiden omhoog. Maar niet oneven verdeeld.

Dan zou je dus ondertussen ook moeten weten dat je dit alleen met JS geregeld krijgt, want CSS wil dit niet doen.

[q-enf0rcer.1]

Klinkt alsof je ~300 mediaqueries moet gaan schrijven om alle oneven breedtes op te kunnen vangen

Wellicht is er ook nog iets mogelijk met CSS3 calc(), maar ik zie zo snel niets.

Zou je een foto kunnen uploaden van de exacte situatie? Dan kan ik beter beoordelen of er toch nog iets anders mogelijk is.

[ Voor 25% gewijzigd door q-enf0rcer.1 op 16-08-2016 12:41 ]

[DJMaze]

q-enf0rcer.1 schreef op dinsdag 16 augustus 2016 @ 12:40:
Klinkt alsof je ~300 mediaqueries moet gaan schrijven om alle oneven breedtes op te kunnen vangen

Wellicht is er ook nog iets mogelijk met CSS3 calc(), maar ik zie zo snel niets..

Sinds wanneer werkt dat in e-mail?

[q-enf0rcer.1]

DJMaze schreef op dinsdag 16 augustus 2016 @ 12:45:
[...]

Sinds wanneer werkt dat in e-mail?

Dat verschilt helaas per mail client. Er zullen er genoeg zijn die media queries nooit zullen ondersteunen. Net als op het web kun je simpelweg niet 100% garanderen dat alles er exact zo uitziet zoals je wilt in alle clients, zodra je complexere zaken gaat toepassen. Zolang de mail wel nog leesbaar is hoeft het echter niet perse een probleem te zijn. Wat de TS hier vraagt is een vorm van fine tuning, maar geen absolute noodzaak.

[Geert.H]

@Q-enf0rcer.1

Dat is inderdaad de oplossing die we uiteindelijk hebben gehanteerd; voor de uitzondering hebben wij media-queries toegevoegd. Dat betekent wel dat in gmail de oplossing niet werkt, omdat gmail geen media-queries ondersteunt. Dit is uiteraard een halve oplossing, maar wel de oplossing die het uiteindelijk het beste van de slechtse was.

Ik denk overigens dat de vraag van DJmaze ging over het gebruik van calc() en niet ove media-queries. Maar ik denk dat calc al helemaal niet wordt ondersteund door programma's als outlook e.d.

[robin66075]

Volgens mij is de oplossing heel simpel (of ik moet iets over het hoofd zien).

Geef de kolommen geen vaste breedte en zet de table-layout van de table op fixed. Ik kan dit nu niet testen maar ik denk dat dit moet werken.

[Geert.H]

Hoi Robin66075,

Nee dat werkt niet, zie ook mijn testcase: http://inpointbox.nl/test.html

Het probleem treed juist op bij 50% brede kolommen die zich moeten verdelen over oneven breedte.

[DJMaze]

q-enf0rcer.1 schreef op dinsdag 16 augustus 2016 @ 13:10:
Net als op het web kun je simpelweg niet 100% garanderen dat alles er exact zo uitziet zoals je wilt in alle clients, zodra je complexere zaken gaat toepassen.

Niet alleen complexere zaken. Gewoon een font-family is al genoeg.
De developer doet er goed aan om eens verder te kijken dan Arial, Verdana, etc. door de website te openen op een GNU/Linux, OSX en Android systeem

Vaak als ik een html pagina bekijk klopt hij niet omdat men vaste breedtes heeft aangehouden voor een bepaald lettertype.
Nou probeer dan maar eens te oncijferen wat er staat als 2 van die blokken over elkaar vallen of dwars door de border of door overflow:hidden compleet verdwijnt.

[ Voor 23% gewijzigd door DJMaze op 19-08-2016 12:38 ]

[DynaSpan]

Kun je niet een extra rij toevoegen tussen de 2 verticale afbeeldingen van 0px hoog zodat de afbeeldingen die erna komen wel nog goed gepositioneerd zijn bovenaan?

[BarôZZa]

Image maps worden als het goed is tegenwoordig door praktisch alle (web)clients ondersteund.

http://www.w3schools.com/tags/tag_area.asp

Een vrij old skool techniekje waarbij je één afbeelding hebt en delen klikbaar maakt.

Voor de rest is het meestal maar een slecht idee van designers/marketing die zich vervelen. Productfoto's moet je niet vervuilen met achtergrondjes en dergelijke. Ziet er rommelig, onduidelijk en goedkoop uit. In dat voorbeeldmailtje ook. De helft van de producten verdwijnt half in de achtergrond. Zoals het helemaal bovenaan is opgelost (twee plaatjes naast elkaar) is het veel eleganter.

Moet ook zeggen dat mijn hersenen zeggen dat het één plaatje is en het daardoor niet meteen duidelijk is dat die producten individueel aanklikbaar zijn. Als het visueel losse elementen zijn is dat een stuk duidelijker. Als gebruiker ben je op het web niet echt gewend aan plaatjes waarvan verschillende delen naar verschillende urls verwijzen.

[ Voor 6% gewijzigd door BarôZZa op 20-08-2016 01:20 ]

[Verwijderd]

BarôZZa schreef op zaterdag 20 augustus 2016 @ 01:18:
Image maps worden als het goed is tegenwoordig door praktisch alle (web)clients ondersteund.

Jammer alleen dat heel veel mensen hun mail niet in een browser lezen, dus helaas is dat dan niet echt een oplossing. Outlook bijvoorbeeld ondersteunt het niet, en die wordt best zo hier en daar gebruikt.

[BarôZZa]

Ah MS heeft het eruit gesloopt zie ik.Altijd leuk als er een artikel bovenaan komt waarin staat dat het door Outlook wordt ondersteund als je op Google zoekt naar: image map support client

[DJMaze]

Verwijderd schreef op zaterdag 20 augustus 2016 @ 02:34:
Outlook bijvoorbeeld ondersteunt het niet, en die wordt best zo hier en daar gebruikt.

Klopt, want Outlook is eigenlijk Word en Word HTML is niet echt HTML.
Kijk maar eens naar de broncode van een Outlook e-mail. De horror!

[merauder]

Persoonlijk zou ik het plaatje over de breedte pakken en klikbaar maken, en daaronder dan een paragraph met de producten naast elkaar en die op het midden mikken + 300px. Komt het op mobiel mooi onder elkaar, en op andere platformen naast elkaar.

[g4wx3]

je voorbeeld gaat niet werken, want dat moet zijn style="max-width:600;"
Verder zijn hier al goede oplossingen gegeven