"Geboxte" Seite und G-Chrome

TeeKayy · #1 (**permalink**) 10.01.2009, 09:43

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!

paracelsus · #2 (**permalink**) 10.01.2009, 10:01

Ich kann das auf die schnelle auch nicht beantworten.
Schliesse mal Dein <link> Tags richtig " />" vieleicht ist dann schon mal gut.
Da gibt es einige Ungereimtheiten im CSS:

Code:

#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;
}

Das iszt mir nur auf die schnelle aufgefallen. Grundlage zur Browserkompatibilität ist erstmal konsistente Validität im Code. Räum mal auf

TeeKayy · #3 (**permalink**) 10.01.2009, 11:24

Hi paracelsus,

danke für deine Antwort!

Habe den Code jetzt Validiert und mit CSSTidy aufgeräumt.

Code:

/* CSSTidy 1.3: Sat, 10 Jan 2009 06:12:14 -0500 */
#content {
background-color:#FFF;
clear:both;
display:inline;
float:left;
height:80%;
margin-bottom:5px;
margin-top:10px;
min-height:500px;
overflow:visible;
padding:10px;
position:relative;
text-align:justify;
width:550px;
}

#footbar {
background-color:silver;
background-image:url(../media/titlebarimage2.png);
background-repeat:repeat-x;
border:1px solid #000;
color:#000;
font-size:small;
margin:-10px;
padding-left:5px;
padding-right:5px;
text-align:center;
vertical-align:bottom;
}

#footer {
background-color:#5477a0;
background-image:url(../media/titlebarimage.png);
border:1pt solid #000;
clear:both;
color:#FFF;
margin-bottom:10px;
margin-top:10px;
text-align:center;
}

#header {
background-image:url(../media/boxedware_logo-800-150--1.png);
background-repeat:no-repeat;
border-left:1pt solid #000;
border-right:1pt solid #000;
border-top:1pt solid #000;
height:150px;
margin-top:10px;
text-align:center;
width:798px;
}

#leftbox {
background-color:#FFF;
border:1pt solid #000;
float:right;
height:80%;
margin-bottom:5px;
margin-top:20px;
min-height:500px;
padding:10px;
top:335px;
width:200px;
}

#leftbox p {
font-size:small;
}

#navi {
background-color:#5677a0;
background-image:url(../media/titlebarimage.png);
border:1pt solid #000;
border-top:0;
color:#FFF;
margin-bottom:5px;
overflow:visible;
padding:3px;
text-align:center;
text-decoration:none;
}

#navi a {
background-color:#5677a0;
background-image:url(../media/titlebarimage.png);
color:#FFF;
padding:3px 4px;
text-align:justify;
text-decoration:none;
}

#navi a:focus,#navi a:active {
background-color:#4C4C4C;
color:#FFF;
text-align:justify;
}

#navi a:hover {
background-color:#FFF;
background-image:url(../media/titlebarimage2.png);
border-bottom:1px solid;
color:#000;
text-align:justify;
}

#navi a:link,#navi a:visited {
text-align:justify;
}

#news {
border:1px solid #000;
clear:both;
display:block;
margin-bottom:30px;
margin-left:10px;
margin-right:10px;
overflow:visible;
padding:10px;
text-align:justify;
}

#titlebar {
background-color:#5677a0;
background-image:url(../media/titlebarimage.png);
background-repeat:repeat-x;
border:1pt solid #000;
color:#FFF;
font-weight:700;
margin:-10px -10px 10px;
padding-left:10px;
text-align:left;
}

#wrapper {
background-color:#FFF;
display:block;
font-family:"Trebuchet MS",Verdana,Helvetica,Arial,Sans-Serif;
margin:25px auto 0;
overflow:visible;
padding:10px;
width:800px;
}

body {
background-color:#5677a0;
background-image:url(../media/bgstripe.png);
background-repeat:repeat-x;
height:101%;
}

h1 {
padding-left:20px;
}

Ich hab echt keinen Plan wieso das Style-Sheet nicht mim Chrome bzw Iron läuft...

TeeKayy · #4 (**permalink**) 10.01.2009, 11:36

Ah Okay!

Thema hat sich erledigt!

Habe die beiden files (PHP und CSS) Validiert und die Fehler behoben.

Jetzt läufts =)

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Wordpress Seite Passwort-Schützen?	sepp88	Serveradministration und serverseitige Scripte	5	01.11.2009 12:56
Seite wird auf anderem Computer falsch dargestellt	Patrick Egli	CSS	3	01.11.2009 10:40
Shtml auf jeder Seite einbinden - counter	iVx	Serveradministration und serverseitige Scripte	1	13.09.2007 17:31
Fixer Header (CSS Frame) und Sprung zu Anker auf dieser Seite	Chico_wau	CSS	2	14.05.2007 18:08