XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   "Geboxte" Seite und G-Chrome (http://xhtmlforum.de/showthread.php?t=55285)

TeeKayy 10.01.2009 10:43

"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!

paracelsus 10.01.2009 11: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 10.01.2009 12: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 10.01.2009 12:36

Ah Okay!

Thema hat sich erledigt!

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

Jetzt läufts =)


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:22 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023