[XHTML - CSS] Firefox >< IE

[imp4ct]

Hallo,

Ik zit met een klein probleempje wat mijn site betreft. In Mozilla Firefox ziet de site er goed uit, zoals hij hoort te zijn. Ga ik in IE (6.x), dat is hij gewoon niet om aan te zien.
Kan iemand mij vertellen hoe ik dit kan aanpassen zonder dat ik mijn layout helemaal moet gaan veranderen ??

De XHTML & CSS zijn W3C gecontroleerd en zijn geslaagd in de controle. Waarschijnlijk niet veel van belang maar jah. Dus als iemand eens een kijkje wilt nemen om te zien wat ik in IE hieraan kan doen.

Alsvast bedankt !!

URL : http://www.dhost.info/zionWEB

[ Voor 4% gewijzigd door imp4ct op 21-09-2004 11:36 ]

[Johnny]

Het enige verschil wat ik zie in MSIE is de ruimte boven de list, dat is waarschijnlijk vorooorzaakt doordat je de margin en padding niet op nul hebt gezet.

Verschillende browsers gebruiken namelijk verschillende "default" styles. De een gebruikt margin, de ander padding, als je die wilt verandern zul je ze dus allebei moeten resetten.

[imp4ct]

Johnny schreef op 21 september 2004 @ 11:39:
Het enige verschil wat ik zie in MSIE is de ruimte boven de list, dat is waarschijnlijk vorooorzaakt doordat je de margin en padding niet op nul hebt gezet.

Verschillende browsers gebruiken namelijk verschillende "default" styles. De een gebruikt margin, de ander padding, als je die wilt verandern zul je ze dus allebei moeten resetten.

Dus als ik in mijn CSS file overal waar "kan" padding & margin 0 zet, dan zou het dus moeten werken ? Even uitproberen! Thx !!

*update*
Heb het juist getest, blijk niet echt te werken.
Hier is de link van m'n css file
http://www.dhost.info/zionWEB/css/zionweb.css

[ Voor 23% gewijzigd door imp4ct op 21-09-2004 11:59 ]

[Michali]

Het ligt aan die spacer die je constant gebruikt. De minimale hoogt van een block element in IE is 20px; je geeft het 3px (wat in mozilla wel werkt), maar IE maakt er toch 20px van. Probeer eens overflow: hidden; in je spacer stijl te zetten.

[BtM909]

Michali schreef op 21 september 2004 @ 11:55:
Het ligt aan die spacer die je constant gebruikt. De minimale hoogt van een block element in IE is 20px; je geeft het 3px (wat in mozilla wel werkt), maar IE maakt er toch 20px van. Probeer eens overflow: hidden; in je spacer stijl te zetten.

Ik vraag me sowieso af waarom die spacer div wordt gebruikt?

[imp4ct]

Michali schreef op 21 september 2004 @ 11:55:
Het ligt aan die spacer die je constant gebruikt. De minimale hoogt van een block element in IE is 20px; je geeft het 3px (wat in mozilla wel werkt), maar IE maakt er toch 20px van. Probeer eens overflow: hidden; in je spacer stijl te zetten.

Dat werkt !! Thx !! Echt geweldig .
Heb nog een klein probleempje, als je over m'n knoppen gaat in Firefox dan worden ze grijs, doe je dit in IE, dan worden ze *niks* , weet je daar misschien ook een oplossing voor ?

PS : wat vinden jullie eigenlijk van m'n site ? Goede & slechte kritiek is altijd welkom want ik wil ZEKER bijleren, nog eens bedankt Michali !!

[Michali]

Hij kan idd worden weggelaten, maar ik leg even uit wat er precies fout gaat. Dan leer je ervan namelijk. Het is idd beter om bijvoorbeeld een bottom en/of top margin op te geven bij de elementen om die spacer heen. Dat is precies de reden waarom je een margin kunt opgeven.

[BtM909]

I_M_P_A_C_T schreef op 21 september 2004 @ 12:01:
[...]


Dat werkt !! Thx !! Echt geweldig .
Heb nog een klein probleempje, als je over m'n knoppen gaat in Firefox dan worden ze grijs, doe je dit in IE, dan worden ze *niks* , weet je daar misschien ook een oplossing voor ?

IE ondersteunt alleen maar een :hover op a-elementen. Je zou die hover eventueel kunnen verplaatsen naar je a-element. Of je maakt gebruik van Clay's HTC extensie.

PS : wat vinden jullie eigenlijk van m'n site ? Goede & slechte kritiek is altijd welkom want ik wil ZEKER bijleren, nog eens bedankt Michali !!

Meld je site aan bij: http://www.sitechecks.nl

[ Voor 6% gewijzigd door BtM909 op 21-09-2004 12:05 ]

[imp4ct]

BtM909 schreef op 21 september 2004 @ 12:00:
[...]

Ik vraag me sowieso af waarom die spacer div wordt gebruikt?

Wel persoonlijk, omdat ik niet beter weet. Ik heb het zo'n beetje geleerd, klinkt newbisch maar tot nu toe heeft alles zo goed gewerkt. Maar als je andere of beter dingen weet, laat maar weten hoor , altijd leuk van tips te krijgen van mensen die er veel meer verstand van hebben dan ik.

[imp4ct]

BtM909 schreef op 21 september 2004 @ 12:03:

Meld je site aan bij: http://www.sitechecks.nl

Done .

[Michali]

I_M_P_A_C_T schreef op 21 september 2004 @ 12:01:
[...]
Heb nog een klein probleempje, als je over m'n knoppen gaat in Firefox dan worden ze grijs, doe je dit in IE, dan worden ze *niks* , weet je daar misschien ook een oplossing voor ?

Dat komt omdat IE de :hover selector alleen ondersteund voor a elementen

Ik zou het zo opbouwen:

code:

table#layout {
 background-color: #E0E0E0;
}

table#layout td a
{
 background-color: #A19B72;
 margin: 0px;
 padding: 0px;
 width: 117px;
 vertical-align: middle;
 font-family: Verdana;
 font-size: 10px;
 font-weight: bold;
 letter-spacing: 2px;
 text-align: center;
 border: 1pt solid #000000;
 text-decoration: none;
 color: #000000;
 display: block;
}

table#layout td a:hover
{
 background-color: #848484;
}

code:

<table id="layout">
    <tr>
      <td><a href="http://www.dhost.info/zionWEB/index.htm">NEWS</a></td>
      <td><a href="http://www.dhost.info/zionWEB/information.htm">INFO</a></td>
      <td><a href="http://www.dhost.info/zionWEB/forum">N-FORUM</a></td>
      <td><a href="http://www.dhost.info/zionWEB/zionweb/downloads.htm">DOWNLOADS</a></td>
      <td><a href="http://www.dhost.info/zionWEB/zionweb/links.htm">LINKS</a></td>
    </tr>
  </table>

edit:
Te laat

[ Voor 25% gewijzigd door Michali op 21-09-2004 12:09 ]

[BtM909]

I_M_P_A_C_T schreef op 21 september 2004 @ 12:03:
[...]


Wel persoonlijk, omdat ik niet beter weet. Ik heb het zo'n beetje geleerd, klinkt newbisch maar tot nu toe heeft alles zo goed gewerkt. Maar als je andere of beter dingen weet, laat maar weten hoor , altijd leuk van tips te krijgen van mensen die er veel meer verstand van hebben dan ik.

Probeer zo veel mogelijk HTML elementen te gebruiken waarvoor ze bedoeld zijn.

Kleine tips nav je site:
• Gebruik List elementen (LI) voor je menu, skip de tabel
• Probeer ook Headings te gebruiken (H1 en H2's)
• Af en toe gebruik je een <br /> voor extra space. Haal die weg en zet je marge op je <div>-jes

In dit topic: Fout gebruik van html & css, staan ook wat tips hoe je het niet moet doen

[ Voor 14% gewijzigd door BtM909 op 21-09-2004 12:10 ]

[imp4ct]

Michali schreef op 21 september 2004 @ 12:07:
[...]

Dat komt omdat IE de :hover selector alleen ondersteund voor a elementen

edit:
Te laat

Very nice . Thx !

[imp4ct]

BtM909, kzal eens goed zoeken op't forum. Maar nu werkt alles goed enz. Ik kan hier waarschijnlijk ook wel tips vinden om een soort "nieuws" posting systeem te maken. Want ik heb niet zoveel zin om telkens m'n htm file te moeten vernieuwen en dan weer uploaden. Dat moet maar autotmatisch kunnen ook.

'k Zal daar dan ook eens voor zoeken, in ieder geval alle twee bedankt voor de snelle en juiste hulp !

[imp4ct]

BtM909 schreef op 21 september 2004 @ 12:03:

Meld je site aan bij: http://www.sitechecks.nl

Toch even een vraagje, want ik snap totaal niet hoe ze mijn site nu gaan "beoordelen". Klinkt mss enorm stom maar ik kan er echt niet aan uit . I know +1 newb point

[Michali]

Ik heb nog wel een tip.

Je probeert waarschijnlijk de pagina te centeren door de left margin van de body op ca. 250px te zetten. Dit ziet er in 1024 x 768 wel aardig uit (ook niet helemaal in het midden hier), maar op andere resoluties geeft dat een beetje een vreemd effect.

Je kunt beter voor de body de margin gewoon op 0px zetten en text-align: center; geven. Dan zijn de elementen in IE gecentreerd. Kijk wel uit, want alle tekst wordt dan ook gecentreerd in die elementen, je moet dan dus de text-align voor die elementen weer op left zetten om dit ongedaan te maken. Dit heeft voor Mozilla geen effect omdat die de betekenis van het woord wat letterlijker neemt. Het wordt dus ook echt alleen toegepast op tekst en niet op block level elementen.

Om het ook in mozilla te laten werken moet je bij de elementen die je wilt centereren de left en right margin op auto zetten. Dat kan zo: margin: 0px auto 0px auto; of margin-left: auto; margin-right: auto;. Dan worden de elementen in beide browser gecentreerd.

Succes

[imp4ct]

Echt geweldig gewoon, wat ik hier allemaal te weten kom in 5min. Nu even gaan studeren, want anders komt het er nooit van. 'k Laat hier nog wel iets weten hoe de dingen vorderen. Thx *again* .

[imp4ct]

Ik zit nog met een vraagje, ik heb een HTML + PHP scriptje afgehaald van het internet om mails te kunnen versturen naar mijn email, vanaf mijn site.

Nu wanneer je op versturen klikt werkt alles, de mail komt direct aan, maar de boodschap dat de mail verzonden is die daarna volgt blijft op het scherm. Hoe kan ik die bv. na 3sec webdoen ?

Thx!

url : http://www.dhost.info/zionWEB/contact.htm
Wel niet m'n hele emailbox volspammen eh

PS : het kan zijn dat de site verschrikkelijk traag laad, maar dat komt door de server, voor't moment weet ik niet een snellere en beter te vinden. Als iemand tips hierover heeft, feel free. Ik heb HTML - PHP - MySQL nodig, grote +/- 30MB is al genoeg. No banners wel.

[ Voor 5% gewijzigd door imp4ct op 22-09-2004 10:45 ]

[Michali]

PHP:

<meta http-equiv="refresh" content="3" 
url="http://<?=$_SERVER['HTTP_HOST'] . dirname($_SERVER['PHP_SELF'])?>/index.php"/>

of

JavaScript:

setTimeout("window.location.href='index.php';", 3000);

voor die hosting zou ik toch voor een betaalde gaan. je kunt voor een paar euro per maand al wel leuke pakketen vinden.

Kijk eens op http://www.pcextreme.nl/producten/hosting

edit:
tips van anne

[ Voor 49% gewijzigd door Michali op 22-09-2004 13:59 ]

[Verwijderd]

of:

HTTP gebruiken. Dat attribuut heet niet voor niks 'http-equiv'.

[crisp]

Verwijderd schreef op 22 september 2004 @ 13:53:
of:

HTTP gebruiken. Dat attribuut heet niet voor niks 'http-equiv'.

Er bestaat geen refresh-header in HTTP...

[André]

Dit zijn de enige headers die met HTTP meegestuurd worden:

From
Accept
Accept-Encoding
Accept-Language
User-Agent
Referer
Authorization
Charge-To
If-Modified-Since
Pragma

[crisp]

André schreef op 22 september 2004 @ 14:03:
Dit zijn de enige headers die met HTTP meegestuurd worden:

[...]

nee hoor; er zijn er veel meer die meegestuurd kunnen worden

[ Voor 7% gewijzigd door crisp op 22-09-2004 14:07 ]

[Verwijderd]

Er bestaat geen refresh-header in HTTP...

Dat zou je misschien denken...

[AkaXakA]

Verwijderd schreef op 22 september 2004 @ 14:24:
[...]
Dat zou je misschien denken...

http://www.hixie.ch/tests/evil/mixed/refresh1.http.html

Klopt, maar het staat niets for niets in evil

[crisp]

Verwijderd schreef op 22 september 2004 @ 14:24:
[...]
Dat zou je misschien denken...

ja, er zijn browser die het als een custom-header accepteren; wat ik wil zeggen is dat het geen standaard onderdeel van HTTP is en je dus niet kan verwachten dat alle browsers ermee om kunnen gaan

[Verwijderd]

Hier staat er wel iets over.
http://www.w3.org/Protocols/HTTP/Issues/http-wg.html

[Verwijderd]

crisp, en waarom gaat dat argument nou niet op voor de META element equivalent?

[crisp]

Verwijderd schreef op 22 september 2004 @ 17:05:
Hier staat er wel iets over.
http://www.w3.org/Protocols/HTTP/Issues/http-wg.html

jep:

Status: Not in 1.1, due to unexplored security implications.

Verwijderd schreef op 22 september 2004 @ 17:10:
crisp, en waarom gaat dat argument nou niet op voor de META element equivalent?

Blijkbaar staat/stond het wel in de planning voor HTTP maar heeft het het niet gehaald in 1.1...

[ Voor 35% gewijzigd door crisp op 22-09-2004 17:47 ]

[Verwijderd]

crisp, de META elementen zijn gebaseerd op HTTP. Als het META element werkt, moet technisch gezien ook de HTTP header werken. Zo zit het in elkaar.

[imp4ct]

Kwil nie moeilijk doen maar... plss on-topic ?