Inhammetje..

[Verwijderd]

Hey

Ik ben weer bezig met mijn website.
Nu stuit ik op hetvolgende "probleem".


De plekken die ik heb gemarkeerd krijg ik een inhammetje. In FF heb ik dit niet , maar in IE wel.
Heb gezocht op google met "inhammetje/streepje td achtergrond/background", maar vond geen oplossing.

Dit is mijn code :

code:

echo "<table width='100%' border='0' cellspacing='0' cellpadding='0'>";
echo "<tr class=\"balk\"><td width=\"55\"></td><td>Gebruikersnaam</td><td width=\"170\">Status</td><td width=\"60\"></td></tr>";

Class balk :

code:

.balk {
    height:18px;
    background-image:url("../images/balk.jpg");
}

Weet iemand hoe ik dat inhammetje wegkrijg?

Bvd!

[TERW_DAN]

Maak eens geen gebruik van tabellen, die dingen zijn nooit lekker om mee te werken.

Post eens een link ipv een plaatje. Op dat plaatje kan ik niet zien wat er mis is.

[André]

Zit waarschijnlijk een border tussen, check dat maar eens

[Bosmonster]

Lijkt alsof de TD de background-image overerft van de TR.

Probeer dit eens toe te voegen als IE-fix:

code:

tr.balk td {
   background-image: none;
}

Niet zo heel gek overigens dat je geen resultaten kreeg op 'inhammetje'

[ Voor 18% gewijzigd door Bosmonster op 24-04-2008 22:34 ]

[Verwijderd]

@Terw_Dan ,
Lijkt me niet echt makkelijk met div's aangezien dit een soort opsomming wordt.

@André,
ik heb de tabel border="0" gegeven, maar nog steeds hetzelfde

@Bosmonster,
Ik heb het geprobeerd, maar als ik het erbij zet, gaat de achtergrond helemaal weg!

[Borizz]

Verwijderd schreef op donderdag 24 april 2008 @ 22:54:
@Bosmonster,
Ik heb het geprobeerd, maar als ik het erbij zet, gaat de achtergrond helemaal weg!

Jep een van de interessante dingen van IE zullen we maar zeggen, wat er gebeurd is dat de achtergrond van de TR inderdaad wordt overgenomen door alle TD's in de TR. De oplossing is of een andere achtergrond gebruiken voor de TD's (behalve de eerste omdat je daar het hoekje wel wit wilt hebben waarschijnlijk). Of de achtergrond een stukje naar links schuiven in de TD, zodat het witte hoekje erafvalt:

Cascading Stylesheet:

.balk td {
    background-position: -1px 0;
}

[Verwijderd]

@Borizz,
Ik wil toch liever dat ronde hoekje houden.
Aan de rechterkant zit er ook eigenlijk een rond hoekje, maar die valt ook in IE weg.
Dus ik dacht als ik die "inhammetjes" wegkrijg dat ook weer correct wordt weergegeven en zonder die inhammetjes.

[HawVer]

Klopt het dat de afbeelding offline is? Kun je misschien de html online zetten, zodat we even wat kunnen uitproberen?

[Verwijderd]

Oke, ik heb het even online gezet :
http://www.rapmaster.nl/tw/

@HawVer,
Nee, de afbeelding is niet offline.

Bvd

[ Voor 18% gewijzigd door Verwijderd op 25-04-2008 18:56 ]

[Borizz]

Verwijderd schreef op donderdag 24 april 2008 @ 23:45:
@Borizz,
Ik wil toch liever dat ronde hoekje houden.
Aan de rechterkant zit er ook eigenlijk een rond hoekje, maar die valt ook in IE weg.
Dus ik dacht als ik die "inhammetjes" wegkrijg dat ook weer correct wordt weergegeven en zonder die inhammetjes.

Lees mijn post nog eens zou ik zeggen, daar staat precies uitgelegd wat er aan de hand is en hoe je het op kan lossen, dat kan je dus ook toepassen (met andere waardes natuurlijk) als je aan de rechterkant het hoekje wilt houden.

Je zult dus met de positie van de afbeelding in elke td moeten spelen. En je moet daarbij weten wat de eerste TD is en wat de laatste TD is om de positie daarin goed te zetten..

[Verwijderd]

Thanx voor je reactie, maar dit wordt dus een IE-only-stylesheet, heb ik liever niet, weer dat gezeur.
In 1 stylesheet lekker makkelijk
Dus ik wil liever toch weten wat het probleem is het liefst zonder een IE-ONLY-STYLESHEET het probleem oplossen.
Dus als iemand weet wat het probleem is...

[Bosmonster]

Verwijderd schreef op zaterdag 26 april 2008 @ 20:06:
Thanx voor je reactie, maar dit wordt dus een IE-only-stylesheet, heb ik liever niet, weer dat gezeur.
In 1 stylesheet lekker makkelijk
Dus ik wil liever toch weten wat het probleem is het liefst zonder een IE-ONLY-STYLESHEET het probleem oplossen.
Dus als iemand weet wat het probleem is...

Wat het probleem is is je nu al een aantal keer uitgelegd. Het is een IE bug. De oplossing is je ook al een aantal maal gegeven.

Of je dat op wilt lossen met een IE-only stylesheet moet je zelf weten. De oplossing voor IE werkt ook prima in andere browsers dus is het in feite niet nodig.

Wat verwacht je nu nog meer van ons

[Verwijderd]

@Bosmonster,
Ik heb de bovengenoemde code geprobeerd, het inhammetje gaat wel weg, maar zoals de poster al noemde, gaat het ronde hoekje ook weg. Dat heb ik liever niet.

code:

.balk td {
    background-position: -1px 0;
}

En wat André noemde, is het ook niet, want de border staat al op 0.

Dus ik zoek een oplossing waarmee ik het ronde hoekje toch kan houden en de inhammetjes wegkrijg

[Borizz]

Je wilt het gewoon niet snappen he? Je hoeft niet letterlijk over te nemen wat we je voorkauwen, maar je kan (of moet in dit geval) daar zelf nog mee variëren om tot het gewenste resultaat te komen.

Zodra je snapt wat er gebeurt, weet je waarschijnlijk ook hoe je het op moet lossen. Ik zal mezelf nogeens quoten, misschien wordt het dan wel duidelijk:

Borizz schreef op donderdag 24 april 2008 @ 23:01:
[...]
wat er gebeurd is dat de achtergrond van de TR inderdaad wordt overgenomen door alle TD's in de TR.

Zoals bosmonster al zegt is de oplossing al meerdere keren aangedragen, het is nu aan jou om de oplossing te implementeren.

[Aloys]

Probeer dit stukje magische css eens

code:

border-collapse: collapse

edit: Ligt het nu aan mij of zijn sommige mensen in dit topic niet aan het lezen, maar toch aan het zeuren?

[ Voor 40% gewijzigd door Aloys op 26-04-2008 22:41 ]

[Verwijderd]

@Aloys,
Bedankt voor je reactie, maar helaas nog steeds hetzelfde resulaat

[paulh]

Haal border="0" eens weg. Dat is de standaard instelling en kan op het moment dat je styles gaat toepassen op je tabel hele rare effecten geven.

[Bosmonster]

Aloys schreef op zaterdag 26 april 2008 @ 22:38:
Probeer dit stukje magische css eens

code:

border-collapse: collapse

edit: Ligt het nu aan mij of zijn sommige mensen in dit topic niet aan het lezen, maar toch aan het zeuren?

Of je leest zelf het topic even door Het heeft niks met borders, paddings of margins te maken.

Het probleem is dat de IE de background-image van de TR overgooit naar de TD's in die TR. Het ronde hoekje wordt dus continu herhaald. Dit is al een aantal maal uitgelegd hierboven.

Oplossing is om de achtergrond per TD te definieren (en dus de linker een rond hoekje te geven en de rechter TD). Iets meer werk, maar dat is xbrowser html'en nu eenmaal meestal. Je kunt dit nog steeds bereiken met 1 plaatje met de methode die Borizz geeft.

Mijn vraag zou eerder zijn of er met xbrowser CSS een manier is om de eerste en laatste TD van een TR aan te roepen.

[ Voor 6% gewijzigd door Bosmonster op 27-04-2008 15:38 ]

[Verwijderd]

@Bosmonster,

Snap het probleem nu pas!
Eerder zei je "Jep een van de interessante dingen van IE zullen we maar zeggen, wat er gebeurd is dat de achtergrond van de TR inderdaad wordt overgenomen door alle TD's in de TR" en niet dat er bij elke TD weer de achtergrond opnieuw begint

Dan wordt idd mijn vraag ook of er in CSS een manier is om de eerste en laatste TD van een TR aan te roepen. OF een manier waarop IE niet steeds in een nieuwe TD de achtergrond opnieuw laat beginnen.

[Borizz]

Dat zei ik trouwens. Maar goed nu je dit snapt is het volgende probleem dat je het toepassen van CSS op je HTML code nog niet helemaal door hebt. Je stelt nu in ieder geval de juiste vraag en het antwoord is ook echt wel te vinden in de meest basic CSS tutorials. Ik probeer je trouwens niet te pesten ofzo door het antwoord niet direct te geven, maar zodra je snapt waar je mee bezig bent heb je volgende 'problemen' ook veel sneller opgelost, dus het is beter dat je het zelf opzoekt..

[Verwijderd]

@Borizz,

Ja idd.
Ik ben idd nog niet zo erg lang bezig met css, maar ben nog aan het leren.
Maar in de tutorials die ik tot nu toe heb gevolgd is nog nooit mijn probleem behandeld, dat de achtergrond in IE steeds in elke TD opnieuw begint.
Ook ben ik niet tegengekomen hoe je bijv. de eerste en laatste TD neemt in CSS.
Dit heb ik ook nog weer op google net gezocht, maar niks gevonden.
Of het bestaat niet?

[Borizz]

Je kan ze toch zelf identificeren, door ze bijvoorbeeld een class (first, last o.i.d.) te geven? Aan die class koppel je je style via CSS. Kijk eens in de CSS tutorial van w3schools.com, de oplossing staat al in het 1e echte hoofdstuk (CSS Syntax).

[Verwijderd]

@Borizz,

Zelf een class geven kan idd wel. Maar als het mogelijk is om de achtergrond in andere TD's te laten doorlopen(in IE ook), dan zou dat wat makkelijker zijn.
Dit scriptje wil ik ook op andere pagina's gebruiken met weer meer/minder kolommen, dus moet ik in de code steeds weer die classes aangeven, terwijl 1x aan de TR een class meegeven veel makkelijker is.

Dus als iemand een oplossing heeft op de achtergrond door te laten lopen in IE en niet steeds opnieuw te laten beginnen, graag.
Anders moet ik het idd wel op de manier doen als jij zegt Borizz.

[Borizz]

Het kan niet dat is nu juist de bug, je zult het dus op moeten lossen op de manier zoals ik heb aangegevn. Eventueel kan je de classes nog dynamisch toewijzen aan de juiste elementen via JavaScript. Maar als dit je onbekend in de oren klinkt zou ik het eerst even zonder javascript proberen.

[Verwijderd]

Verwijderd schreef op donderdag 24 april 2008 @ 22:54:
@Terw_Dan ,
Lijkt me niet echt makkelijk met div's aangezien dit een soort opsomming wordt.

En dat maakt een tabel een logische (lees: semantisch correcte) keuze?

edit: Even je HTML bekeken, en een tabel is hier wél correct. Voornamelijk omdat het géén opsomming is, maar juist tabulaire data. Om toch iets zinnigs toe te voegen: lees eens iets over het gebruik van <th>

[ Voor 27% gewijzigd door Verwijderd op 30-04-2008 00:37 ]

[Hobbles]

Indien het werkelijk een opsomming zou zijn zoals je zegt zou ik eerder aan een list denken (<li>'s). Neem voor formatting doeleinden eens een kijkje op www.alistapart.com

Misschien dat het ook al helpt als je HTML semantisch correct is ondanks dat IE hier vrij los over gaat: http://validator.w3.org/c...Fwww.rapmaster.nl%2Ftw%2F

[ Voor 35% gewijzigd door Hobbles op 30-04-2008 00:44 ]

[Verwijderd]

Hobbles schreef op woensdag 30 april 2008 @ 00:42:
Misschien dat het ook al helpt als je HTML semantisch correct is ondanks dat IE hier vrij los over gaat: http://validator.w3.org/c...Fwww.rapmaster.nl%2Ftw%2F

De validator kan enkel de syntax toetsen, niet de semantiek.

[daboemann]

Wat ik niet helemaal snap is waarom je het plaatje niet gewoon in 3 stukken opdeelt (wat geloof ik de meeste webdesigners doen). Dan heb je een stukje met een inham links, die je dmv een class in de TD laadt. Een stukje (bijvoorbeeld 1px breedt en hem dan herhalen, doen browsers meestal vanzelf, en anders even in de css background-repeat: repeat-x; toevoegen. En dan nog een laatste stukje rechts met een inham rechts die je dan dmv een class alleen in de meest rechtse TD laadt.

Dan heb je het probleem niet meer en werkt in elke browser geloof ik.

[Borizz]

Je kunt beter een enkel plaatje gebruiken, om de volgende redenen:

1. Er hoeft maar 1 HTTP Request gedaan te worden voor het plaatje (tegenover 3 voor 3 plaatjes), dit scheelt omdat browsers standaard maar 2 connecties naar een domein openen.
2. 1 plaatje is kleiner dan 3 plaatjes (ook al is het ene plaatje iets groter dan de 3 afzonderlijk).
3. Je hoeft maar 1 plaatje aan te passen om de achtergrond te veranderen in een andere.

[Verwijderd]

Of je gaat voor best of both worlds: CSS sprites.

[Borizz]

Verwijderd schreef op woensdag 30 april 2008 @ 10:10:
Of je gaat voor best of both worlds: CSS sprites.

Dat is een beetje een loze opmerking zonder uitleg wat het is of voorbeelden o.i.d. daaarnaast is dat precies wat ik aangaf in mijn laatste post.

[ Voor 4% gewijzigd door Borizz op 01-05-2008 10:14 ]

[Verwijderd]

Borizz schreef op donderdag 01 mei 2008 @ 10:14:

Dat is een beetje een loze opmerking zonder uitleg wat het is of voorbeelden o.i.d. daaarnaast is dat precies wat ik aangaf in mijn laatste post.

Ik ging er vanuit dat de geïnteresseerde GoT'ers zelfredzaam genoeg zijn om er binnen 30 seconden achter te komen wat CSS sprites zijn en hoe je ze gebruikt. Het kan wel zijn dat je dat bedoelde overigens, maar je post is wat mij betreft ook anders te interpreteren (en als "de rest" echt niet weet wat CSS sprites zijn, dan interpreteren ze jouw post dus anders).

[Verwijderd]

CSS sprites lijkt mij voor mijn probleem niet echt een goeie oplossing...

Ik heb liever toch een manier om met een plaatje dit probleem op te lossen en dat het in IE ook werkt.
Dus als iemand een oplossing weet, graag.
Anders moet ik het op de manier doen die Borizz eerder noemde.

[Verwijderd]

Iemand?

[Verwijderd]

Verwijderd schreef op zaterdag 17 mei 2008 @ 20:28:
CSS sprites lijkt mij voor mijn probleem niet echt een goeie oplossing...

Ik heb liever toch een manier om met een plaatje dit probleem op te lossen en dat het in IE ook werkt.

Een achtergrondafbeelding is toch precies wat hier van toepassing is? Dat is een plaatje en werkt nog in IE ook.

[Borizz]

Verwijderd schreef op maandag 19 mei 2008 @ 17:17:
Iemand?

Ik zou zeggen, probeer zelf eens wat. Volgens mij zijn er al genoeg oplossingen aangedragen waar je wat mee moet kunnen of waar je verder op kan zoeken. Volgens mij is er ook niets mis met de manier die ik heb genoemd (athans dat heb ik niet begrepen uit je reacties), waarom gebruik je die dan niet i.p.v. naar een andere oplossing zoeken?

Het werkt gewoon niet op de manier zoals jij wilt in IE(6), punt.