Richtige CSS-Formatierung?

T

tommy_jussy

Estudis del Sol
Hallo,

Ich wollte mal nachfragen wie die richtige und saubere CSS-Formatierung ist, damit es auf allen Browsern gängig ist?

Beispiele wären gut wie der unterschied zwischen dem IE und dem Firefox ist.

Da meine Seite im IE zerhaun aussieht ;)

Mfg

Mein CSS:
PHP: 
#content {
height:100%;
margin:0 auto;
padding:10px 0 0;
width:900px
}

#counter {
color:#FFF;
font-family:verdana,helvetica,arial,sans-serif;
font-size:12px;
padding:10px 15px 50px 5px
}

#newsletter {
color:#FFF;
font-family:verdana,helvetica,arial,sans-serif;
font-size:12px;
padding:10px 0 10px 2px
}

#wrapper {
background-image:url(../images/background.jpg);
background-repeat:no-repeat;
display:block;
height:100%;
margin:0 auto;
overflow:visible;
padding:0;
visibility:visible;
width:100%
}

#version {
    background: url("../images/version.png") no-repeat scroll right top transparent;
    height: 122px;
    overflow: hidden;
    position: absolute;
    right: 0;
    text-indent: -99999px;
    top: 0;
    width: 119px;
    z-index: 50;
}

* {
margin:0;
padding:0
}

* html .clearfix {
height:1%
}

.box {
font:normal 12px/12px arial, helvetica, sans-serif;
margin:5px 0px;
min-width:100px;
padding:20px 0px 20px 50px
}

.clearfix {
display:block
}

.clearfix:after {
clear:both;
content:".";
display:block;
font-size:0;
height:0;
visibility:hidden
}

.construction {
background-image:url(../images/construction.png);
background-color:#ffeac8;
background-position:10px center;
background-repeat:no-repeat;
border:1px solid #d38e4a
}

.glossymenu {
border-bottom-width:0;
margin:0;
padding:0;
width:152px
}

.glossymenu a.menuitem {
background-image:url(../images/button_bg.png);
background-repeat:repeat-y;
color:#fff;
display:block;
font-family:verdana,helvetica,arial,sans-serif;
font-size:12px;
font-weight:700;
height:100%;
padding:4px 0 4px 30px;
position:relative;
text-decoration:none;
width:auto
}

.glossymenu a.menuitem .statusicon {
display:block;
border:none;
position:absolute;
right:4px;
top:5px
}

.glossymenu a.menuitem:hover {
background-image:url(../images/button.png)
}

.glossymenu a.menuitem:focus,.glossymenu a.menuitem:active,.glossymenu div.submenu a:focus,.glossymenu div.submenu a:active {
background-image:url(../images/button.png);
background-repeat:repeat-x;
color:#FFF
}

.glossymenu div.submenu {
background-image:url(../images/button_bg.png);
background-repeat:repeat-y
}

.glossymenu div.submenu ul {
list-style-type:none;
margin:0;
padding:0
}

.glossymenu div.submenu ul li a {
color:#fff;
display:block;
font-family:verdana,helvetica,arial,sans-serif;
font-size:10px;
padding:5px 0 5px 35px;
text-decoration:none
}

.glossymenu div.submenu ul li a:hover {
background-image:url(../images/button.png)
}

.hidden_element {
display:none
}

.information {
/* background */
 background-image: url(../images/info.png);
 background-color: #d0e4f4;
 background-position: 10px center;
 background-repeat: no-repeat;
/* shadows and highlights */
 -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15),
0 2px 1px rgba(255, 255, 255, 0.5) inset,
0 -2px 2px #bbd9f1 inset;  
 -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15),
0 2px 1px rgba(255, 255, 255, 0.5) inset,
0 -2px 2px #bbd9f1 inset;  
 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15),
0 2px 1px rgba(255, 255, 255, 0.5) inset,
0 -2px 2px #bbd9f1 inset;
/* border */
 border: 1px solid #4d8fcb;
}

.inhalt {
background-image:url(../images/estudios_del_sol_hp_23.png);
background-repeat:repeat-y;
font-family:verdana,helvetica,arial,sans-serif;
font-size:12px;
height:100%;
padding:10px 10px 30px 10px;
width:692px
}

.red {
color:red
}

.werbung_unten {
background-image:url(../images/estudios_del_sol_hp_33.png);
background-repeat:repeat-y;
font-family:verdana,helvetica,arial,sans-serif;
font-size:10px;
padding:0 0 0 50px;
text-align:center;
width:701px
}

a:active {
color:#34940c;
font-weight:700;
text-decoration:none
}

a:focus,a:hover {
color:#55c327;
font-weight:700;
text-decoration:none
}

a:link,a:visited {
color:#34940c;
font-weight:700;
text-decoration:underline
}

html,body {
background-image:url(../images/background2.jpg);
background-repeat:repeat-y;
font-family:verdana,helvetica,arial,sans-serif;
font-size:10px;
height:100%;
margin:0;
width:100%
}

strong {
margin-right:10px
}

.warning {
/* background */
 background-image: url(../images/warning.png);
 background-color: #ffeaa8;
 background-position: 10px center;
 background-repeat: no-repeat;
/* shadows and highlights */
 -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15),
0 2px 1px rgba(255, 255, 255, 0.8) inset,
0 -2px 2px #ffe285 inset;  
 -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15),
0 2px 1px rgba(255, 255, 255, 0.8) inset,
0 -2px 2px #ffe285 inset;  
 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15),
0 2px 1px rgba(255, 255, 255, 0.8) inset,
0 -2px 2px #ffe285 inset;
/* border */
 border: 1px solid #f9b416;
}

.img {display:block; text-align:bottom;}
 
Hi,

schön wäre es, wenn du noch einen Link zu deiner Seite spendieren würdest. Dann könnte man sich die Sache evtl. anschauen...
 
Hi,
hast du schon mal auf dem w3 validator angesehen?
http://validator.w3.org/check?uri=h...(detect+automatically)&doctype=Inline&group=0
Im CSS sollten auch immer Semikolon, auch wenn es der letzte Parameter ist.
Auf anhieb scheint glaube dein doctype falsch zu sein.
Sonderzeichen sollten man durch Zeichencode ersetzen. & z.B.
In schließenden Tags keine weiteren Angaben. "</td valign="top">"
Der Link tag a sollte kein boder Parameter haben.

Gruß
 
Zuletzt bearbeitet:
habe die meisten fehler im validator behoben außer die mit dem roten X da ich nicht weiß wie ich diese behebe.

welhen doctype sollte es dann sein?
 
Hmmm versteh es irgendwie nicht... das mit dem Border ist weg.

Hier mal der Abschnitt:

PHP: 
<tr>
            <td colspan="6">
              <script language="javascript" type="text/javascript">
                  <!--
                    if (AC_FL_RunContent == 0) {
                        alert("This page requires AC_RunActiveContent.js.");
                    }
                    else {
                        AC_FL_RunContent('codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0', 
                                                'width', '575px', 
                                                'height', '113px', 
                                                'src', 'slider', 
                                                'quality', 'high', 
                                                'pluginspage', 'http://www.macromedia.com/go/getflashplayer',  
                                                'play', 'true', 
                                                'loop', 'false', 
                                                'scale', 'noscale', 
                                                'wmode', 'opaque',
                                                'devicefont', 'false', 
                                                'id', 'slider', 
                                                'bgcolor', '#ffffff', 
                                                'name', 'slider', 
                                                'menu', 'false', 
                                                'allowFullScreen', 'false', 
                                                'allowScriptAccess', 'sameDomain', 
                                                'movie', 'slider', 
                                                'z-index', '-1', 
                                                'salign', ''); //end AC code
                    }
                                        //-->
              </script> 
			  <noscript>
              <p>
                <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="575" height="113" id="s" align="middle">
                  <param name="allowScriptAccess" value="sameDomain">
                  <param name="allowFullScreen" value="false">
                  <param name="movie" value="slider.swf">
                  <param name="menu" value="false">
                  <param name="quality" value="high">
                  <param name="bgcolor" value="#ffffff">
                  <embed src="slider.swf" menu="false" quality="high" bgcolor="white" width="575" height="113" name="tet" align="middle" allowscriptaccess="sameDomain" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
                </object>
              </p></noscript>
            </td>
            <td>
              <img class="img" src="images/Abstandhalter.gif" width="1" height="113" alt="">
            </td>
          </tr>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück