Ik ben bezig met een website hiervoor maak ik gebruik van CSS.
Ik heb de pagina nu zo dat er een gradiant over de pagina loopt. Dit werkt in alle browsers alleen heb ik problemen met internet explorer.
Soms werkt de pagina wel en soms niet. Als de pagina niet werkt doet hij het (vaak) na een refresh wel. Ik heb al wat dingen geprobeerd maar ik kom er niet uit.
ps. De gradient is gemaakt van die CSS3PIE.
dit doet hij soms:
en als je dan refreshed doet hij dit:
mijn code:
<?php
if (!empty($_GET['page']))
{
$pagina = $_GET['page'];
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Mont-Fort Traning & Advies</title>
<style type="text/css">
#body {
margin: -8px -8px -8px -8px ;
height:auto !important;
min-height:100%;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#99FFEA), to(#3F33EE));
background: -moz-linear-gradient(#99FFEA, #3F33EE);
-pie-background: linear-gradient(#99FFEA, #3F33EE);
behavior: url(PIE.htc);
}
/* tabbladen */
.animatedtabs{
border-bottom: 1px solid gray;
overflow: auto;
width: 1000px;
height:101px;
font-size: 14px; /*font of menu text*/
overflow:hidden;
background-image:url('media/logotekst.gif');
background-repeat:no-repeat;
background-position:left;
}
.animatedtabs ul{
list-style-type: none;
margin: 0px;
padding: 0px;
}
.animatedtabs li{
float: left;
margin: 0px;
padding: 0px;
}
.animatedtabs a{
float: left;
position: relative;
top: 76px; /* 1) Number of pixels to protrude up for selected tab. Should equal (3) MINUS (2) below */
background: url(media/tab-blue-left.gif) no-repeat left top;
overflow:auto;
margin: 0px;
margin-right: 3px; /*Spacing between each tab*/
padding: 0px 0px 0px 9px;
text-decoration: none;
}
.animatedtabs a span{
float: left;
position: relative;
display: block;
background: url(media/tab-blue-right.gif) no-repeat right top;
overflow:auto;
padding: 5px 14px 3px 5px; /* 2) Padding within each tab. The 3rd value, or 3px, should equal (1) MINUS (3) */
font-weight: bold;
color: black;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
.animatedtabs a span {float:none;}
/* End IE5-Mac hack */
.animatedtabs .selected a{
background-position: 0 -125px;
margin-top:-5px;
top: 76px;
}
.animatedtabs .selected a span{
background-position: 100% -125px;
padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
top: 0px;
}
.animatedtabs a:hover{
background-position: 0% -125px;
margin-top:-5px;
top: 76px;
}
.animatedtabs a:hover span{
background-position: 100% -125px;
padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
top: 0px;
}
/*content */
#maincontainer{
clear:both !important;
width: 770px; /*Width of main container*/
min-height: 100%;
height: auto;
background-color:#FFF;
background-image:url('media/test.jpg');
background-repeat:no-repeat;
background-position:center;
margin: -503px 20px 20px 190px;
padding-top:11px;
padding-left:20px;
padding-right:20px;
-moz-border-radius: 0px 0px 20px 20px;
border-radius: 0px 0px 20px 20px;
-webkit-border-radius: 0px 0px 20px 20px;
behavior: url(PIE.htc);
}
#leftmenu{
margin-top:20px;
width:190px;
background-image:url('media/menuboven.gif');
background-repeat:no-repeat;
}
#leftinnermenu{
padding-top:5px;
margin-left:20px;
font-size:16px;
padding-bottom:46px;
margin-right:40px;
}
#leftmenuonder{
margin-top:20px;
width:190px;
background-image:url('media/menuboven.gif');
background-repeat:no-repeat;
}
#leftinnermenuonder{
margin-left:20px;
font-size:16px;
padding-bottom:35px;
margin-right:40px;
}
html {
height: 100%;
}
body {
min-height:100%;
height:inherit;
}
/* linkjes */
a.nav{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size:13px;
}
a.nav:link, a.nav:visited{
background-color: #20b9eb;
color: #B30700;
text-decoration: none;
}
a.nav:hover, a.nav:active{
background-color: #ee4d1e;
color: #FFFFFF;
text-decoration: underline;
}
h2{
font-size:21px;
}
H4 {
font-size:5px;
}
</style>
<?php
/* controleer welke browser er gebruikt word en past daar de CSS op aan.
beetje omslachtige manier maar werkt wel...
*/
if ( strpos($_SERVER['HTTP_USER_AGENT'], 'Gecko') )
{
if ( strpos($_SERVER['HTTP_USER_AGENT'], 'Firefox') )
{
echo '<style type="text/css">#maincontainer{ margin: -503px 20px 20px 190px; }</style>';
}
if ( strpos($_SERVER['HTTP_USER_AGENT'], 'Safari') )
{
echo '<style type="text/css">#maincontainer{ margin: -501px 20px 20px 190px; }</style>';
}
}
else if ( strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') )
{
if ( strpos($_SERVER['HTTP_USER_AGENT'], 'Opera') )
{
//werkt niet doet niets.
}
else //IE 8
{
echo '<style type="text/css">#maincontainer{ margin: -499px 20px 20px 190px; } </style>';
//IE 7 & 6
if(!strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 8'))
{
echo '<style type="text/css">#maincontainer{ top: -488px; position: relative;}
#body{ margin -10px;} </style>';
}
}
}
//opera
else
{
echo '<style type="text/css">#maincontainer{ margin: -496px 20px 20px 190px;}</style>';
}
?>
</head>
<body>
<div id="body">
<div class="animatedtabs">
<ul>
<li <?php if($pagina =='home'){ echo 'class="selected"'; }?>><a href="index.php?page=home" title="Home"><span>Home</span></a></li>
<li <?php if($pagina =='presenteren'){ echo 'class="selected"'; }?>><a href="index.php?page=presenteren" title="Presenteren"><span>Presenteren</span></a></li>
<li <?php if($pagina =='mc'){ echo 'class="selected"'; }?>><a href="index.php?page=mc" title="Mensgericht coachen"><span>Mensgericht coachen</span></a></li>
<li <?php if($pagina =='ib'){ echo 'class="selected"'; }?>><a href="index.php?page=ib" title="Individuele begeleiding"><span>Individuele begeleiding</span></a></li>
<li <?php if($pagina =='wew'){ echo 'class="selected"'; }?>><a href="index.php?page=wew" title="Wie en waar?"><span>Wie en waar?</span></a></li>
<li <?php if($pagina =='intervieuw'){ echo 'class="selected"'; }?>><a href="index.php?page=intervieuw" title="Intervieuw"><span>Intervieuw</span></a></li>
<li <?php if($pagina =='links'){ echo 'class="selected"'; }?>><a href="index.php?page=links" title="Links"><span>Links</span></a></li>
</ul>
<div align="right"><img src="media/logo.gif" height="101px" alt="Logo" /> </div>
</div>
<div id="leftmenu">
<div id="leftinnermenu">
<center><h2><font color="#000000">Workshops</font></h2></center>
<a href="index.php?page=hartcoherentie" class="nav" title="Hartcoherentie">Hartcoherentie</a><br />
<a href="index.php?page=zelfpresenteren" class="nav" title="(Zelf)bewust presenteren">(Zelf)bewust presenteren</a><br />
<a href="index.php?page=kernkwaliteiten" class="nav" title="Kernkwaliteiten">Kernkwaliteiten</a><br />
<a href="index.php?page=verstand" class="nav" title="Met verstand en hart de stress voorbij">Met verstand en hart de stress voorbij</a>
</div>
</div>
<div id="leftmenuonder">
<div id="leftinnermenuonder">
<br />
<center><h2><font color="#000000">Bewust communiceren</font></h2></center>
<a href="index.php?page=basistraining" class="nav" title="Basistrainig">Basistrainig</a><br />
<a href="index.php?page=vervolgtraining" class="nav" title="Vervolgtraining">Vervolgtraining</a><br />
<a href="index.php?page=venlo" class="nav" title="Venlo">Venlo</a><br />
<a href="index.php?page=roermond" class="nav" title="Roermond">Roermond</a><br />
<a href="index.php?page=maastricht" class="nav" title="Maastricht">Maastricht</a><br />
<br />
</div>
</div>
<div id="maincontainer">
<br style='clear: both' />
<?php
if(!empty($pagina))
{
if(file_exists($pagina.'.php'))
{
require_once ($pagina.'.php');
}
else
{
echo '<script language="JavaScript">alert ("Niet kloten met de URL!")</script>';
}
}
else
{
require_once ('home.php');
}
?>
</div>
<div id="mainonder"><h4> </h4></div>
</div>
</body>
</html>