in IE soms plaatjes weg

[BasieP]

beste mensen,

ik heb al heel wat websites gemaakt in mijn leven, maar kom zeer zelden random browser functionaliteit tegen.
echter vandaag wel.

ik ben bezig met deze site:
http://jseegers.nl/ (niet mijn layout)
en zag dat in IE6 de 3 plaatjes rechts onder het logo soms onzichtbaar zijn.
vaak gaat het bij het klikken op links wel goed (dmv menu oid)
echter, als je de url net intikt in de 'browser' dan gaat het vaak fout.

heeft iemand enig idee waarom IE dit zou doen? en vooral hoe ik het moet voorkomen?

[Fatamorgana]

Ik heb even snel wat getest en wat ik zo zie is dat als ik de div met id 'left' of 'right' weghaal dat het dan wel lijkt te werken. Als ik in de lege divs 'left' en 'right' iets zet, bv: <div id="left">a</div><div id="right">b</div> dan is er erg weinig ruimte voor de plaatjes over.

Misschien dat er ergens iets met de sizes niet goed staat? Of het is gewoon een bug dat het met gebruik van achtergrondplaatjes fout gaat in IE.

[Blaise]

Dit soort dingen kom ik wel vaker tegen in IE, vooral bij floats en absoluut positioneren. Verplaats die plaatjes naar <div id="right"> of <div id="content">, en haal de absolute positionering eruit.

Er valt overigens nog wel het een en ander op te merken aan de markup en opmaak die je gebruikt.

Ik kan nog wel volgens waarom je de plaatjes allemaal als achtergrond instelt (het is opmaak, geen content), maar je geeft die plaatjes zowel een class als id en je combineert inline CSS met je externe stijlblad. Dat kan gewoon met 1 class per plaatje en alles extern.

Onderaan in de markup bungelt ergens het logo als achtergrond van een div, met een absolute positionering. Daar kan je gewoon een <h1><img alt="naam site"></h1> van maken, of <h1>naam site</h1>, met de tekst verborgen en een logo als achtergrondafvbeelding.

Het massale gebruik van position:absolute in die site wordt nog lastig. Wat nou als een pagina meer inhoud heeft? Dan heb je een probleem want dan hangen allemaal elementen midden in de tekst.

[BasieP]

Fatamorgana schreef op donderdag 25 januari 2007 @ 20:04:
Ik heb even snel wat getest en wat ik zo zie is dat als ik de div met id 'left' of 'right' weghaal dat het dan wel lijkt te werken. Als ik in de lege divs 'left' en 'right' iets zet, bv: <div id="left">a</div><div id="right">b</div> dan is er erg weinig ruimte voor de plaatjes over.

Misschien dat er ergens iets met de sizes niet goed staat? Of het is gewoon een bug dat het met gebruik van achtergrondplaatjes fout gaat in IE.

dankje, ik ga even expirimenteren met die twee divjes.
misschien wordt alles nu wel absoluut

Blaise schreef op donderdag 25 januari 2007 @ 20:14:
Dit soort dingen kom ik wel vaker tegen in IE, vooral bij floats en absoluut positioneren. Verplaats die plaatjes naar <div id="right"> of <div id="content">, en haal de absolute positionering eruit.

ik heb juist een deel absolute positionering moeten invoegen omdat IE er een zooitje van maakte..
ik had het zonder absolute zooi goed in FF, maar toen zag het er niet uit in IE.

Er valt overigens nog wel het een en ander op te merken aan de markup en opmaak die je gebruikt.

Ik kan nog wel volgens waarom je de plaatjes allemaal als achtergrond instelt (het is opmaak, geen content), maar je geeft die plaatjes zowel een class als id en je combineert inline CSS met je externe stijlblad. Dat kan gewoon met 1 class per plaatje en alles extern.

de plaatjes worden random gemaakt. vandaar dat ik inline style gebruik om de locatie (gegenereerd door php) laat invoegen. Voor zover ik weet kan php nog geen .css files uitpoepen zonder apache config files modificatie (wat niet lukt op huurservers)

verder is er bij mijn weten niks mis met het zetten van zowel een class als een id. De class is een groep ding. dwz, meerdere elementen kunnen van die class zijn (zoals bij mij alle 3 die plaatjes)
de id's identificeren elk van de plaatjes uniek (om de positie te zetten)

Onderaan in de markup bungelt ergens het logo als achtergrond van een div, met een absolute positionering. Daar kan je gewoon een <h1><img alt="naam site"></h1> van maken, of <h1>naam site</h1>, met de tekst verborgen en een logo als achtergrondafvbeelding.

waarbij ik een standaard font moet gebruiken, en niet het 'mooie' font dat ik nu heb.
trouwens heb ik het logo plaatje niet zonder de tekst.. nogmaals de layout is niet van mij.

de reden dat ie onderaan mijn html staat is omdat hij over de rest van de site heen moet vallen. again: IE werkt niet fijn met floating divjes, en z-indexen, dus zodoende moest hij onderaan.

Het massale gebruik van position:absolute in die site wordt nog lastig. Wat nou als een pagina meer inhoud heeft? Dan heb je een probleem want dan hangen allemaal elementen midden in de tekst.

als je iets verder kijkt zie je dat het divje content een overflow auto heeft.

[ Voor 18% gewijzigd door BasieP op 25-01-2007 20:48 ]

[Blaise]

ik heb juist een deel absolute positionering moeten invoegen omdat IE er een zooitje van maakte..
ik had het zonder absolute zooi goed in FF, maar toen zag het er niet uit in IE.

Het klopt dat het met floats lastig is om cross-browser goed te laten werken, maar je site is niet zo ingewikkeld. Een header en 2 kolommen. De opzet kan veel robuuster dan hoe het nu het geval is.

de plaatjes worden random gemaakt. vandaar dat ik inline style gebruik om de locatie (gegenereerd door php) laat invoegen. Voor zover ik weet kan php nog geen .css files uitpoepen zonder apache config files modificatie (wat niet lukt op huurservers)

Dynamische CSS (met PHP) is overigens wel mogelijk, met htaccess. Daarvoor heb je geen toegang nodig tot Apache configs.
In de .htaccess

code:

AddType application/x-httpd-php .css.

In je dynamische CSS bestand:

PHP:

header('Content-type: text/css');

Maar dan maak je het jezelf wel ingewikkeld, dus dan zou ik het zo laten.

verder is er bij mijn weten niks mis met het zetten van zowel een class als een id. De class is een groep ding. dwz, meerdere elementen kunnen van die class zijn (zoals bij mij alle 3 die plaatjes)
de id's identificeren elk van de plaatjes uniek (om de positie te zetten)

Er is niks mis mee, maar door de inconsistente manier van CSS toekennen (je gebruikt nu inline CSS, een id EN een class) wordt het onoverzichtelijk, zeker voor een buitenstaander.

waarbij ik een standaard font moet gebruiken, en niet het 'mooie' font dat ik nu heb.
trouwens heb ik het logo plaatje niet zonder de tekst.. nogmaals de layout is niet van mij.

Ik bedoelde niet het logo weergeven als tekst. Wat ik bedoelde is het logo als achtergrondplaatje te gebruiken op een h1, waarvoor je nu een div misbruikt. De tekst kan je verstoppen met een negatieve text-indent of hoge line-height, in combinatie met overflow:hidden. Een andere mogelijkheid is een geneste span met visibility:hidden of display:none. De tekst is dan nog wel zichtbaar voor niet visuele user agents, zoals Google.

de reden dat ie onderaan mijn html staat is omdat hij over de rest van de site heen moet vallen. again: IE werkt niet fijn met floating divjes, en z-indexen, dus zodoende moest hij onderaan.

z-index zou hier prima kunnen werken, maar dan moet je een element wel absoluut of relatief positioneren anders doet z-index niks.

als je iets verder kijkt zie je dat het divje content een overflow auto heeft.

Dat zag ik over het hoofd.

[flipjevandejam]

Iets heel anders, het contrast van de tekst op eigenlijk alle plekken is echt te laag imho. Het menu moet echt feller goud oid hebben, en de kleuren lichtblauw en normaal blauw liggen echt veel te dicht bij elkaar voor mensen (voornamelijk mannen) die ook maar enigszins kleurenblind zijn.

[MueR]

Als je voor je klant een goed argument wil hebben om de HTML om te gooien naar "met de flow werken", pak eens de Web Developer toolbar voor FireFox, en zet alle styling eens uit (CSS->Disable Styles->All Styles). Ik wordt niet vrolijk als ik met mn lynx browser aankom, of wanneer je stylesheet niet geladen wordt.
Overigens kan je cross browser ook je styling wel goed krijgen met floating elements. Er zijn echt veel CSS hacks bekend. Zoek maar eens wat rond. Een voorbeeld: zet in je stylesheet maar eens een underscore voor een argument, en FireFox negeert hem, maar IE pikt het op.
Voorbeeld:

Cascading Stylesheet:

div#eenDiv {
  padding: 2px; /* Alle browsers */
  _padding: 3px; /* IE */
}

Verder ben ik qua kleurstelling met mijn bovenbuurbosbes. Het contrast is te laag, en de tekst die over de achtergrondafbeelding staat, is bijna onleesbaar.
Oh ja, een email adres in plain text en link op je site? Dat vraagt om spam.

[ Voor 14% gewijzigd door MueR op 26-01-2007 01:59 ]

[judgem]

MueR schreef op vrijdag 26 januari 2007 @ 01:57:
Voorbeeld:

Cascading Stylesheet:

div#eenDiv {
  padding: 2px; /* Alle browsers */
  _padding: 3px; /* IE */
}

Dat is helaas geen valid CSS. Onderstaande doet hetzelfde maar zal wel gevalideerd worden:

Cascading Stylesheet:

div#eenDiv {  /* Alle browsers */
  padding: 2px;
}

* html div#eenDiv { /* IE */
  padding: 3px; 
}

[Kiphaas7]

judgem schreef op vrijdag 26 januari 2007 @ 12:51:
[...]

Dat is helaas geen valid CSS. Onderstaande doet hetzelfde maar zal wel gevalideerd worden:

Cascading Stylesheet:

div#eenDiv {  /* Alle browsers */
  padding: 2px;
}

* html div#eenDiv { /* IE */
  padding: 3px; 
}

Wat niet zal opgepikt worden door IE7...... Kun je beter conditional comments gebruiken.

[ Voor 5% gewijzigd door Kiphaas7 op 26-01-2007 13:01 ]

[Erkens]

judgem schreef op vrijdag 26 januari 2007 @ 12:51:
[...]

Dat is helaas geen valid CSS. Onderstaande doet hetzelfde maar zal wel gevalideerd worden:

Cascading Stylesheet:

div#eenDiv {  /* Alle browsers */
  padding: 2px;
}

* html div#eenDiv { /* IE */
  padding: 3px; 
}

maar ook dat is gewoon fout

Dit is beter

HTML:

<style type="text/css">
    div#eenDiv {
        padding: 2px;
    }
</style>
<!--[if IE]>
<style type="text/css">
    div#eenDiv {
        padding: 3px;
    }
</style>
<![endif]-->

[Verwijderd]

offtopic:
ik vind de blauwe tekst op een blauwe achtergrond haast niet te lezen

[daniëlpunt]

Erkens schreef op vrijdag 26 januari 2007 @ 13:03:
[...]

maar ook dat is gewoon fout

Dit is beter

HTML:

<style type="text/css">
    div#eenDiv {
        padding: 2px;
    }
</style>
<!--[if IE]>
<style type="text/css">
    div#eenDiv {
        padding: 3px;
    }
</style>
<![endif]-->

Ik vind die conditional comments maar niks. Dit soort dingen hoor je niet in je HTML op te lossen, maar in een apart stylesheet.

[Erkens]

super-muffin schreef op vrijdag 26 januari 2007 @ 13:23:
[...]

Ik vind die conditional comments maar niks. Dit soort dingen hoor je niet in je HTML op te lossen, maar in een apart stylesheet.

Normaal gesproken laad je met die confitional comments ook een andere stylesheet.
Maar afaik is dit wel de enige manier waarop je 100% zeker weet dat je met een brakke browser te maken hebt.