HTML in Chrome vs IE

[Verwijderd]

Hi mede-tweakers,

Ik ben een beginnende webdesigner, ben op het moment bezig met een website in HTML / CSS
Ik loop tegen twee dingen aan:

- Ik heb twee kolommen gemaakt op een webpagina, de tekst staat daar dus naast elkaar.
Nu werkt dat in Chrome perfect, maar in IE valt 1 woord weg uit de 2e kolom, die wordt op de volgende regel geplaatst. Hierdoor staan de 2 regels niet meer recht naast elkaar.

- Ik heb een rand schaduw om mijn webpagina heen staan (class = shadow). Deze werkt in Chrome wel, maar in IE niet..

Misschien is dit voor jullie gesneden koek, maar ik begin net
Graag jullie hulp,
David

[NMe]

En nu moeten we raden wat je precies gedaan hebt?

Post eens wat relevante (dus niet alle!) code, want dit is koffiedik kijken.

[Notna]

zonder daadwerkelijk te zien wat je gedaan hebt weet ik wel dat je voor drop shadow in IE een stuk meer eromheen moet coden dan voor Chrome/FF/Opera. Ervanuit gaan dat dingen overal werken is natuurlijk van de zotte. Vaak moet je aparte stylesheets erop nahouden om iig IE te voorzien van het nodige

Zie ook bijv.:

http://css-tricks.com/snippets/css/css-box-shadow/

[ Voor 10% gewijzigd door Notna op 25-03-2014 12:45 ]

[html]

En daarnaast is een IE versie ook wel handig. Iedere versie heeft haar eigen "problemen".

[Afvalzak]

De class="shadow" verwijst natuurlijk naar je stylesheet, wat staat daar in bij de shadow class?

[Verwijderd]

De code van de stylesheet voor shadow:
.shadow {
-moz-box-shadow: 0 0 30px 5px #999;
-webkit-box-shadow: 0 0 30px 5px #999;
}

heel simpel stukje code eigenlijk..

voor de 2 kolommen:
<TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0">
<TR>
<TD WIDTH="400" VALIGN="top"><div id="Kopje">ANGLO-AMERIKAANS:</div><br>
Wie de baas is, mag het zeggen <br>
Mensbeeld: individualisme <br>
Doelstelling als vertrekpunt (soll) <br>
Organisatie is geldmachine<br>
Zelf willen schitteren <br>
Regelgedreven <br>
Regels zijn regels <br>
Functiesplitsing als norm (specialisatie)<br>
Coördinatie van bovenaf <br>
Staf(aan)gestuurd <br>
Voorspelbaarheid als norm (standaardisering)<br>
Weten is meten <br><br></TD>
<TD WIDTH="15"></TD>
<TD WIDTH="270" VALIGN="top"><div id="Kopje">RIJNLANDS:</div></BR>
Wie het weet mag het zeggen<br>
Mensbeeld: solidariteit<br>
Hier en nu als vertrekpunt (jst)<br>
Organisatie is werkgemeenschap<br>
Samen schitteren; teamplay<br>
Principegedreven<br>
Contextgevoelig<br>
Vakmanschap als basis (allround)<br>
Coördinatie vanaf de werkvloer<br>
Primair proces staat centraal<br>
Emergente strategie als norm (maatwerk)<br>
Meten=weten</TD>
</TR>
</TABLE>

hier valt maatwerk in de tweede kolom bij emergente strategie als norm op de volgende regel.

[TERW_DAN]

Logisch dat het in IE niet werkt, je geeft immers een style op voor mozilla en webkit, en dat zal IE negeren.

Verder zou ik geen tabellen gebruiken voor de opmaak zoals je nu doet, dat kan prima in CSS.

verder kun je de [code=html][/code]-tags gebruiken om je code tussen te posten hier op het forum, dan heb je namelijk gelijk tag-highlighting

HTML:

<TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0">
<TR>
<TD WIDTH="400" VALIGN="top"><div id="Kopje">ANGLO-AMERIKAANS:</div><br>
Wie de baas is, mag het zeggen <br>
Mensbeeld: individualisme <br>
Doelstelling als vertrekpunt (soll) <br>
Organisatie is geldmachine<br>
Zelf willen schitteren <br>
Regelgedreven <br>
Regels zijn regels <br>
Functiesplitsing als norm (specialisatie)<br>
Coördinatie van bovenaf <br>
Staf(aan)gestuurd <br>
Voorspelbaarheid als norm (standaardisering)<br>
Weten is meten <br><br></TD>
<TD WIDTH="15"></TD>
<TD WIDTH="270" VALIGN="top"><div id="Kopje">RIJNLANDS:</div></BR>
Wie het weet mag het zeggen<br>
Mensbeeld: solidariteit<br>
Hier en nu als vertrekpunt (jst)<br>
Organisatie is werkgemeenschap<br>
Samen schitteren; teamplay<br>
Principegedreven<br>
Contextgevoelig<br>
Vakmanschap als basis (allround)<br>
Coördinatie vanaf de werkvloer<br>
Primair proces staat centraal<br>
Emergente strategie als norm (maatwerk)<br>
Meten=weten</TD>
</TR>
</TABLE>

[NMe]

TERW_DAN schreef op dinsdag 25 maart 2014 @ 12:53:
Logisch dat het in IE niet werkt, je geeft immers een style op voor mozilla en webkit, en dat zal IE negeren.

Niet te vergeten dat box-shadow al een hele tijd niet meer prefixed hoeft te worden... http://caniuse.com/css-boxshadow

[Notna]

Verwijderd schreef op dinsdag 25 maart 2014 @ 12:50:
De code van de stylesheet voor shadow:
.shadow {
-moz-box-shadow: 0 0 30px 5px #999;
-webkit-box-shadow: 0 0 30px 5px #999;
}

heel simpel stukje code eigenlijk..

voor de 2 kolommen:
<TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0">
<TR>
<TD WIDTH="400" VALIGN="top"><div id="Kopje">ANGLO-AMERIKAANS:</div><br>
Wie de baas is, mag het zeggen <br>
Mensbeeld: individualisme <br>
Doelstelling als vertrekpunt (soll) <br>
Organisatie is geldmachine<br>
Zelf willen schitteren <br>
Regelgedreven <br>
Regels zijn regels <br>
Functiesplitsing als norm (specialisatie)<br>
Coördinatie van bovenaf <br>
Staf(aan)gestuurd <br>
Voorspelbaarheid als norm (standaardisering)<br>
Weten is meten <br><br></TD>
<TD WIDTH="15"></TD>
<TD WIDTH="270" VALIGN="top"><div id="Kopje">RIJNLANDS:</div></BR>
Wie het weet mag het zeggen<br>
Mensbeeld: solidariteit<br>
Hier en nu als vertrekpunt (jst)<br>
Organisatie is werkgemeenschap<br>
Samen schitteren; teamplay<br>
Principegedreven<br>
Contextgevoelig<br>
Vakmanschap als basis (allround)<br>
Coördinatie vanaf de werkvloer<br>
Primair proces staat centraal<br>
Emergente strategie als norm (maatwerk)<br>
Meten=weten</TD>
</TR>
</TABLE>

hier valt maatwerk in de tweede kolom bij emergente strategie als norm op de volgende regel.

Punt 1: http://www.w3schools.com/cssref/css3_pr_box-shadow.asp (Let wel: hiermee sluit je alles onder IE 9 uit. Als je IE 8 ook wilt ondersteunen: http://css-tricks.com/snippets/css/css-box-shadow/ )
Punt 2: http://www.w3schools.com/cssref/pr_tab_table-layout.asp

Moet te doen zijn

[ Voor 4% gewijzigd door Notna op 25-03-2014 12:58 ]

[TERW_DAN]

@NMe Dat is een goeie, had ik eigenlijk nog niet eens aan gedacht. Je moet wel heel antiek spul draaien wil dag nog nodig zijn

[Verwijderd]

NMe schreef op dinsdag 25 maart 2014 @ 12:55:
[...]

Niet te vergeten dat box-shadow al een hele tijd niet meer prefixed hoeft te worden... http://caniuse.com/css-boxshadow

volgens die tabel zou box shadow dus gewoon moeten werken in IE?
want dat doet ie dus niet

[Notna]

Verwijderd schreef op dinsdag 25 maart 2014 @ 12:58:
[...]


volgens die tabel zou box shadow dus gewoon moeten werken in IE?
want dat doet ie dus niet

Nee, want dit gaat over CSS3. Niet om de code die jij gebruikt. Lees eens wat omhoog

[Afvalzak]

Verwijderd schreef op dinsdag 25 maart 2014 @ 12:58:
[...]


volgens die tabel zou box shadow dus gewoon moeten werken in IE?
want dat doet ie dus niet

Je moet wel die prefixes weghalen (-moz- en -webkit-)

[royb3]

Mits je het goed gebruikt ja, als je die prefix weg haalt heb je maar 1 van de regels nodig. En hoezo gebruik je hoofdletters in je html tags?

[Verwijderd]

Shadow is ondertussen gelukt in IE, thanks notna!
Hoofdletters zaten al in het stukje code, die heb ik van internet gevist
Oeps, CSS3 even over het hoofd gezien.

Ik ga nu aan de slag met de kolommen, ik laat het resultaat straks wel weten.
Bedankt tot zo ver!

[NMe]

Tsja, die code die je van het internet hebt gevist is archaïsch en heeft niks meer met moderne HTML te maken. Geen van de attributen die je gebruikt horen in je HTML te staan maar moeten in je CSS en tables gebruiken voor layout doen we al zeker 15 jaar niet meer.

[Verwijderd]

@NMe, bedankt voor de tip
Ik heb nu via CSS kolommen gemaakt, het volgende stukje code:

Cascading Stylesheet:

div.column {
        -moz-column-count:2;
        -moz-column-rule:solid 2px #ccc;
        -moz-column-gap:25px;
        -webkit-column-count:2;
        -webkit-column-rule:solid 2px #ccc;
        -webkit-column-gap:25px;
        column-count:2;
        column-rule:solid 1px #ccc;
        column-gap:25px;
}

(ook weer van internet gehaald)
hij werkt, zet de tekst in twee kolommen en er staat zelfs nog een mooi streepje tussen dat ik eerst niet had.
Bedankt allemaal!

[Verwijderd]

een vraagje nog, dat mooie streepje, dat is eigenlijk 1 regel te lang, hoe kort ik die in?

[TERW_DAN]

Welk streepje?

[Verwijderd]

ik heb twee kolommen, daar staat een streepje tussen, op zich wel mooi, mag eventueel ook weg.
Die is nu 1 regel langer dan tot waar ik tekst heb staan.

[thof]

code:

column-rule:solid 1px #ccc;

Lijkt mij dat je die aan moet passen/schrappen.

[NMe]

CSS-columns zijn wel nog niet héél breed ondersteund. Alle moderne browsers doen het weliswaar, maar IE9 nog niet en die is meestal toch net iets te recent.
http://caniuse.com/multicolumn

[Verwijderd]

@thof1, klopt, als ik die weghaal is de streep weg.
@NMe, oke, goed om te weten! Handig al die leuke tabelletjes! Die site ga ik onthouden!
Bedankt allemaal, ik kan weer verder!

[DJMaze]

Verwijderd schreef op dinsdag 25 maart 2014 @ 12:37:
- Ik heb twee kolommen gemaakt op een webpagina, de tekst staat daar dus naast elkaar.
Nu werkt dat in Chrome perfect, maar in IE valt 1 woord weg uit de 2e kolom, die wordt op de volgende regel geplaatst. Hierdoor staan de 2 regels niet meer recht naast elkaar.

Elk scherm is een andere breedte en zelfs elke letter is een andere breedte.
Je werkt met Windows, maar bekijk de site eens op GNU/Linux of OSX. Compleet ander lettertype en dus ook een andere maat.
Nou denk je, ik installeer Windows lettertypes op een ander OS, maar dan nog zijn letters niet de zelfde breedte/hoogte.

"vertical-align:top" is een manier van uitlijnen om in ieder geval de eerste regels in lijn te krijgen.

Succes er mee!

[ Voor 9% gewijzigd door DJMaze op 28-03-2014 22:42 ]