waarom doet deze nix in explorer

[phobia]

Ik ben bezig me te verdiepen in het css verhaal.
Nu heb ik een stuk css gevonden/gemaakt, maar nu eb ik een crossbrowser probleem.

In mozilla ziet het er goed uit, maar ik IE is alles wit, tekst achtergrond alleen een border.
De pagina die ik hiervoor gebruik komt in een Iframe en ik heb het bestand opgeslagen als een php

Dit is mijn CSS code:

	.tekstst {
	 width: 100px;
	 line-height: 100%;
	 color: white;
	 text-decoration: none;
	 font-size: 12px;
	 font-family: helvetica, arial;
	 font-weight: bold;
	 display: block;
	 text-align: right;
	 padding: 2px 20px 2px 10px;
	 position: relative;

	 /* BACKGROUND GRADIENTS */
	 background: #014464;
	 background: -moz-linear-gradient(top, #0D658E, #0C577A 50%, #014D71 51%, #003E5C);
	 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0E658E), color-stop(.5, #0C577A), color-stop(.5, #014D71), to(#003E5C)); 


	 /* BORDER RADIUS */
	 -moz-border-radius: 10px;
	 -webkit-border-radius: 10px;
	 border-radius: 10px;

	 border: 1px solid #368DBE;
	 border-top: 1px solid #c3d6df;


	 /* TEXT SHADOW */

	 text-shadow: 1px 1px 1px black;

	 /* BOX SHADOW */
	 -moz-box-shadow: 0 1px 3px black;
	 -webkit-box-shadow: 0 1px 3px black;
	 box-shadow: 0 1px 3px black;
	
	}

	.tekst {

	 width: 100%;
	 line-height: 100%;
	 color: white;
	 text-decoration: none;
	 font-size: 12px;
	 font-family: helvetica, arial;
	 font-weight: bold;
	 display: block;
	 text-align: left;
	 padding: 0px 10px 0px 15px;
	 position: relative;

	 /* BACKGROUND GRADIENTS */
	 background: #014464;
	 background: -moz-linear-gradient(top, #0D658E, #0C577A 50%, #014D71 51%, #003E5C);
	 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0E658E), color-stop(.5, #0C577A), color-stop(.5, #014D71), to(#003E5C)); 


	 /* BORDER RADIUS */
	 -moz-border-radius: 10px;
	 -webkit-border-radius: 10px;
	 border-radius: 10px;

	 border: 1px solid #368DBE;
	 border-top: 1px solid #c3d6df;


	 /* TEXT SHADOW */

	 text-shadow: 1px 1px 1px black;

	 /* BOX SHADOW */
	 -moz-box-shadow: 0 1px 3px black;
	 -webkit-box-shadow: 0 1px 3px black;
	 box-shadow: 0 1px 3px black;
	
	}
	
	/* styling buttons */
	.button {
	 width: 100px;
	 line-height: 100%;
	 color: white;
	 text-decoration: none;
	 font-size: 12px;
	 font-family: helvetica, arial;
	 font-weight: bold;
	 display: block;
	 text-align: center;
	 position: relative;

	 /* BACKGROUND GRADIENTS */
	 background: #014464;
	 background: -moz-linear-gradient(top, #0D658E, #0C577A 50%, #014D71 51%, #003E5C);
	 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0E658E), color-stop(.5, #0C577A), color-stop(.5, #014D71), to(#003E5C)); 


	 /* BORDER RADIUS */
	 -moz-border-radius: 10px;
	 -webkit-border-radius: 10px;
	 border-radius: 10px;

	 border: 1px solid #368DBE;
	 border-top: 1px solid #c3d6df;


	 /* TEXT SHADOW */

	 text-shadow: 1px 1px 1px black;

	 /* BOX SHADOW */
	 -moz-box-shadow: 0 1px 3px black;
	 -webkit-box-shadow: 0 1px 3px black;
	 box-shadow: 0 1px 3px black;
	}
	
	/* WHILE HOVERED */
	.button:hover {
		background: #014464;
	 	background: -moz-linear-gradient(top, #0c5f85, #0b5273 50%, #024869 51%, #003853);
	 	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0c5f85), color-stop(.5, #0b5273), color-stop(.51, #024869), to(#003853));
	}
	
	/* WHILE BEING CLICKED */
	.button:active {
		-moz-box-shadow: 0 2px 6px black;
		-webkit-box-shadow: 0 2px 6px black;

de site is te zien op www.morphius.nl/frans en dan de knop contact.

 

[PatrickMiah]

Volgens mij kan IE het gradiënt effect niet verwerken.
Misschien kun je beter met afbeeldingen en div's werken.

 

[phobia]

Volgens mij zit daar niet echt het probleem, want bij de navbar op de home page. wordt voor mozilla ook een gradiant gebruikt en in IE wordt wel e navbar gemaakt en getoond.

zie het verschil in mozilla en IE

In IE is de opmaakt dan niet zo mooi, maar het werk wel