css error

Goedenacht,

het volgende irritante puntje houd me al een aantal uren wakker..

ik ben bezig met dit voorbeeld

4 artikelen met titel, plaatje, tekst en link naar.....
Op de een of andere manier wordt een aantal karakters van het laatste artikelen gecopieerd: xtje en ik heb werkelijk geen idee waarom!

De error doet zich enkel voor in IE en alleen het laatste artikel geeft deze error

Heeft iemand tips?

thanks
Dennis

quibuz wijzigde dit bericht 22-07-2006 02:30 (6%)

hier geen copieën te zien. (IE6 win98) was m'n FF1.4.

Inderdaad grappige bug: je kan de copie letter per letter selecteren en dan selecteer je idd. ook tergerlijkertijd de tekst in artikel 4.

Dat je maar de helft (xtje) ziet lijkt er verdacht veel op dat ie gecentreerd zit tov linkerrand van nieuwsflitsContainer.

Ik kan het probleem niet reproduceren.. In IE6/w2k zie ik in het linksondersegment het woord 'xje'.

Weet niet of je dit een bug moet noemen... De pagina bevat alleen div'jes en wat images, geen enkel ander element, er staan 20 of 30 div'jes (!), elke div heeft een id, diverse divs hebben dezelfde id, elke div heeft position: relative met een z-index, soms zelfs met een float.. 24 fouten in je 'x'html.. Lijkt me meer een kwestie van een rare layouttechniek door gebrek aan kennis.

Boelie-Boelie wijzigde dit bericht 22-07-2006 03:05 (25%)

Dat is de "Duplicate Characters Bug" in IE. In het artikel http://www.positionisever...lorer/dup-characters.html staat duidelijk beschreven wat het is, waar het door komt, en hoe je het kan oplossen. Waarschijnlijk heeft het in dit geval te maken met de (vele) comments die je in de HTML zet, haal die om te beginnen eens weg

Overigens is je code niet echt top. Ik raad je aan om eens wat over semantiek te lezen, beginnend bij http://home.parse.nl/~michiel/semantiek.html. Je gebruikt een shitload aan divjes terwijl je er maar een paar nodig hebt; hence, je kan het misschien zelfs wel zonder. Gebruik elementen als (ordered)lists voor de nieuwsflitsen, paragrafen voor tekst, headers voor koppen, enzovoort. Daarnaast definieer je meerdere ID's dubbel, dat mag niet. Gebruik -als het écht nodig is- dan spans. Maar probeer het in eerste instantie op te lossen met zo weinig mogelijk id's en spans

Even een voorbeeldje geknutseld, zie http://crew.tweakers.net/Zoefff/web/nieuwsflitsen.htm.
HTML:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

<h1>Nieuwsflitsen</h1> <ol>     <li>         <h2>Titel 1</h2>         <p>             <img src="rss.png" alt="">             Lorem ipsum dolor sit amet, consectetuer adipiscing elit.         </p>         <a href="#" rel="next"><span>next</span></a>     </li>     <li>         <h2>Titel 2</h2>         <p>             <img src="rss.png" alt="">             Lorem ipsum dolor sit amet, consectetuer adipiscing elit.         </p>         <a href="#" rel="next"><span>next</span></a>     </li>     <li>         <h2>Titel 3</h2>         <p>             <img src="rss.png" alt="">             Lorem ipsum dolor sit amet, consectetuer adipiscing elit.         </p>         <a href="#" rel="next"><span>next</span></a>     </li>     <li>         <h2>Titel 4</h2>         <p>             <img src="rss.png" alt="">             Lorem ipsum dolor sit amet, consectetuer adipiscing elit.         </p>         <a href="#" rel="next"><span>next</span></a>     </li> </ol>

Cascading Stylesheet:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55

* {      padding:0;     margin:0; }  html {      } body {     width: 600px;     margin: 0 auto;     border:1px solid #CCCCCC;     font-family: Arial, Geneva, Helvetica, sans-serif;      font-size: 12px; } h1 {     font-size: 18px;     color: white;     padding:10px 5px;     background-color: #0e2b83;  } h2 {     font-size: 14px;     border-bottom: 1px solid #CCCCCC;     margin-bottom: 5px; } ol li {     list-style-type:none;     float:left;     width: 290px;     padding:5px;     position: relative; } ol li img {     float:left;     padding: 0 5px 0 0; } ol li a[rel="next"] {     position: absolute;     right: 5px;     bottom: 5px;     background: url("arrow.gif") no-repeat right top;     height:9px;     width:9px; } ol li a[rel="next"] span {     display: none; }

Let ook op dat ik nog geen ID of class heb gebruikt, dat is hier nog niet eens nodig. Als je meerdere ordered lists gaat toevoegen of de elementen via Javascript of andere manier wilt gaan benaderen, dan kan je natuurlijk wel ID's gaan toevoegen, maar in eerste instantie lijkt het me dan alleen nodig op de ordered list. Alles daarbinnen kan je dan gewoon benaderen via CSS

Jammer is alleen dat IE iets als a[rel="next"] niet snapt, dus daar zullen de linkjes er wat minder uit zien. Kan je wel fixen met Javascript of op een andere manier.

Zoefff wijzigde dit bericht 22-07-2006 10:30 (4%)

Zoefff, tijdje terug las ik een post van iH8 met betrekking tot het gebruiken van * in je .css:

quote:

The other thing is the use of the "star-selector," or * { } in CSS. The star selector selects every single element, which produces an overkill of style-nullifying. Sander pointed out that Mozilla (for one) has a great deal of default styling on form controls, which the star selector nullifies when applying margin:0 and padding:0 to it. As a result, buttons don't behave like buttons anymore, and so forth. I never really noticed that, which only goes to show that I'm no longer used to buttons behaving like buttons. I did some research in this, and as it turned out, most of all the weblogs I frequently comment on have this same problem: buttons not behaving like buttons. In most cases, it was indeed the star selector being the culprit.

Additionally, Mozilla developers have stated that the star selector slows down things. While this is apparently not noticeable for end-users in most cases, it may slow down other aspects that interact with the CSS as well. And don't forget that it's definitely a bit overkill to loop through all elements when you only have to alter a dozen of them, roughly.

http://kurafire.net/log/a...26/starting-css-revisited

Joshua wijzigde dit bericht 22-07-2006 11:18 (71%)

Normaliter gebruik ik het in een eindproduct ook niet hoor, het is tijdens het ontwerpen gewoon verdomd handig omdat je geen margins danwel paddings over het hoofd ziet. Je kan het natuurlijk gewoon weghalen en de elementen die er dan niet goed meer uitzien een padding / margin meegeven

Als ik je voorbeeld pagina in IE resize dan gaat er iets fout:

Blackspot wijzigde dit bericht 22-07-2006 11:37 (3%)

Mja, dan moet je nog even "position:relative;" aan de body toevoegen. Anders snapt 'ie het blijkbaar niet

Zoefff e.a.

thanks voor de tips en het stukje code!

Ik besef dat mijn code nogal messy is. Ik ben dus een van de velen die jaren gewerkt heeft met tabellen en het moeilijk vind om over te stappen naar CSS.. ik krijg het vaak wel werkend maar daar is het dan ook wel mee gezegd! En zoals door jullie opgemerkt... met een shitload aan divs

De semantische techniek moet ik me toch maar eens eigen maken.

Ik begrijp uit het commentaar dat dus ook op de ordered lists id te maken zijn zodat ik meerdere lists heb?

Wat ik me afvraag: wanneer gebruik je dan wel divs en wanneer de semantische techniek?

Je gebruikt altijd de 'semantische techniek', div's zijn daar gewoon een onderdeel van. Semantiek samengevat in een notendop houd in dat je het juiste element voor de juiste data gebruikt. Anders bekeken dus het element dat de data die het omvat, zo goed mogelijk beschrijft.

Heb je een paragraaf tekst, dan zet je die dus in een p (paragraph). Heb je een opsomming van dingen, dan zet je die in een ol of li (resp. ordered- en unordered list). Heb je tabulaire data, dan zet je die in een tabel. Enzovoort. Div's worden vaak gebruikt om een aantal elementen te groeperen in grote blokken. Zie het bijvoorbeeld als 'hoofdstukkken'. Leesvoer: http://www.rikkertkoppes.com/thoughts/about-div/

zoefff,

helemaal goed! thanks!!
Ik ben er wat meer ingedoken en heb het aantal div's drastisch verlaagd voor de gehele site.

Maar nu komt een nieuwe ergernis: er ligt een harde eis dat de site 4.01 moet voldoen! Een belachelijke eis maar helaas!
Bovenstaande techniek werkt prima voor FF, IE (vanaf 5.0x) maar niet voor 4.01.
Ik heb het al proberen te tweaken... maar ik kom er niet uit.
Ligt het misschien aan deze code:

Cascading Stylesheet:

1 2 3 4

*{       padding:0;      margin:0;  }

Heeft iemand enig idee? of toch maar weer die tabellen??

quote:

quibuz schreef op woensdag 02 augustus 2006 @ 23:36:
[...]
Ligt het misschien aan deze code:

Cascading Stylesheet:

1 2 3 4

*{       padding:0;      margin:0;  }

Of het daar aan ligt weet ik niet, maar klakkeloos van alle elementen de padding en margin op 0 zetten is imo bad practice...

Het is dat ik geen blog heb, anders zou ik nu een artikel schrijven 'star-selector considered harmfull'

crisp wijzigde dit bericht 03-08-2006 00:42 (13%)

quote:

crisp schreef op donderdag 03 augustus 2006 @ 00:40:
[...]

Of het daar aan ligt weet ik niet, maar klakkeloos van alle elementen de padding en margin op 0 zetten is imo bad practice...

Het is dat ik geen blog heb, anders zou ik nu een artikel schrijven 'star-selector considered harmfull'

Die opmerking was een aantal posts hierboven al gemaakt door Spike1506.

Hoeveel mensen denk je dat IE 4.01 nog gebruikt ? 2% ofzo ? Testen is ook al zo handig dit moet je in een oude windows installatie doen of onder Vmware.

quote:

Version 4.0 (released in 1997) is used by less than 1%. It has respectable CSS and DOM support, but no XML support.

bron: http://www.w3schools.com/browsers/browsers_explorer.asp

Zonde van je tijd/geld om daar nog eens extra op te letten.

Blackspot wijzigde dit bericht 03-08-2006 01:57 (18%)

Ik weet niet wat voor doelgroep je hebt, maar met een aandeel van minder dan .05% (zie bijv. The Counter of Marketshare Hitslink) is het aantal bezoekers met IE4 nagenoeg 0. (Bij de BBC was dat in okt 2005 overigens 1%).

Maar stel dat je toch IE4-bezoekers hebt, dan wil dat hopelijk niet per se zeggen dat de site er voor hun precies hetzelfde eruit zou moeten zien als mensen met FF 1.5? Dat is ten eerste door de brakke CSS-ondersteuning ondoenlijk en ten tweede weegt de moeite/tijd/geld niet op tot het percentage bezoekers met IE4. Yahoo vindt dat je zulke prehistorische browsers best een nagenoeg opmaakloze site voor kunt schotelen (IE4 staat niet eens meer in hun lijst). Met structurele markup blijft de site goed leesbaar, ook zonder styling. (CSS eruit filteren voor IE4 kan met een trucje.)
Met tabellen ga je weer terug naar de vorige eeuw, alleen maar omdat de site anders voor 1% visueel minder aantrekkelijk (maar even informatief) is? Een procentje dat binnenkort tot 0 is gereduceerd?

Overigens kun je in IE4 testen door gewoon de losse versie te downloaden.

quote:

quibuz schreef op woensdag 02 augustus 2006 @ 23:36:
Maar nu komt een nieuwe ergernis: er ligt een harde eis dat de site 4.01 moet voldoen!

Ehmm.. ik vermoed dat de eis niet is dat hij moet draaien in IE v4.01... maar dat je gebruik moet maken van HTML 4.01

quote:

frickY schreef op donderdag 03 augustus 2006 @ 07:57:
[...]

Ehmm.. ik vermoed dat de eis niet is dat hij moet draaien in IE v4.01... maar dat je gebruik moet maken van HTML 4.01

Hierdoor ging ik er eigenlijk vanuit dat hij het over de browser had:

quote:

Bovenstaande techniek werkt prima voor FF, IE (vanaf 5.0x) maar niet voor 4.01.