"Geboxte" Seite und G-Chrome
Hai,
was kann ich machen, um die Browser Kompatibilität meiner Seite zu erhöhen?
Ich hab meine Seite mal mit www.brosershots.org getestet.
In den Ergebnissen werden mit bei manchen Browsern keine oder fehlerhafte screenshots angezeigt.
Beim Testen mit dem Google Chrome auf meinem PC wurde mir lediglich der Hintergrund angezeigt.
Hier der Code der CSS:
Code:
/****************************************************************/
/* CSS-File */
/* */
/* Created by TeeKayy */
/* */
/* Last Changed: 09.01.2009 */
/****************************************************************/
body
{
height: 101%;
background-color:#5677a0;
background-image: url(../media/bgstripe.png);
background-repeat:repeat-x;
}
h1
{
padding-left: 20px;
}
/* Boxed-Design */
#wrapper
{
width: 800px;
margin-top: 100px;
margin: 0 auto;
padding: 10px;
background-color: #FFFFFF;
font-family:"Trebuchet MS",Verdana,Helvetica,Arial,Sans-Serif;
}
#header
{
text-align:center;
margin-top: 10px;
float: bottom;
height:150px;
width: 798px;
background-image: url(../media/boxedware_logo-800-150--1.png);
background-repeat:no-repeat;
border-top: 1pt solid black;
border-left: 1pt solid black;
border-right: 1pt solid black;
}
#navi
{
border:1pt solid black;
border-top:0;
text-align:center;
overflow:visible;
margin-bottom: 5px;
padding: 3px;
float: bottom;
background-color: #5677a0;
color:white;
text-decoration:none;
background-image: url(../media/titlebarimage.png);
}
#navi a{
text-decoration:none;
color:white;
background-color:#5677a0;
text-align:justify;
padding:3px 4px 3px 4px;
background-image: url(../media/titlebarimage.png);
}
#navi a:link{text-align:justify;}
#navi a:hover{
border-bottom:1px solid;
color:black;
text-align:justify;
background-color:white;
background-image: url(../media/titlebarimage2.png);
}
#navi a:visited{text-align:justify;}
#navi a:focus{
color:white;
text-align:justify;
background-color:#4C4C4C;
}
#navi a:active{
color:white;
text-align:justify;
background-color:#4C4C4C;
}
/*Elements of the Content Area*/
#content
{
background-color:#FFFFFF;
width: 550px;
height: 80%;
min-height:500px;
overflow: visible;
text-align: justify;
float: left;
clear: both;
padding: 10px;
margin-top: 10px;
margin-bottom: 5px;
position:relative;
display:block;
overflow:visible;
display:inline;
}
#titlebar
{
border:1pt solid black;
background-image: url(../media/titlebarimage.png);
background-repeat:repeat-x;
color: white;
margin-left: -10px;
margin-right: -10px;
margin-bottom: 10px;
margin-top: -10px;
text-align: left;
padding-left: 10px;
font-weight: bold;
}
#news
{
text-align: justify;
overflow: visible;
clear: both;
margin-bottom: 30px;
border:1px solid black;
margin-left:10px;
margin-right:10px;
padding-top: 0;
padding: 10px;
display:block;
}
#footbar
{
text-align: center;
background-color: silver;
margin: -10px;
padding-left: 5px;
padding-right: 5px;
color: #000;
background-image: url(../media/titlebarimage2.png);
background-repeat:repeat-x;
font-size:small;
vertical-align: bottom;
border:1px solid black;
}
/* The Left Box */
#leftbox
{
float: right;
width: 200px;
height: 80%;
min-height:500px;
top: 335px;
background-color: white;
border:1pt solid black;
padding: 10px;
margin-top: 20px;
margin-bottom: 5px;
}
#leftbox p
{
font-size: small;
}
/* The Footer */
#footer
{
background-color:#5477a0;
border:1pt solid black;
color: white;
margin-bottom: 10px;
margin-top: 10px;
text-align:center;
float: top;
clear: both;
background-image: url(../media/titlebarimage.png);
}
Die Seite selber läuft hier: Boxedware - Web Applications and More!
|