XHTMLforum - CSS Experten Hilfe benötigt!

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - CSS Experten Hilfe benötigt! (http://xhtmlforum.de/showthread.php?t=49062)

CSS Experten Hilfe benötigt!

Hallo zusammen,

arbeite gerade an einem CSS Layout und hab ein paar Abstandsprobleme zwischen den Browsern.

Hab mal 3 (Windows)Screenshots des Layouts angehangen (IE, Opera, Firefox)

Probleme:

IE:
Da sieht es eigentlich schon so aus wie ichs haben möchte. Einziges Problem ist das der untere Rand unter "Logo" und Banner mit 1px zu sehen ist, was aber nicht sein soll.(s. Bild)

Opera:
Der rechte Rand der Hauptbox soll eigentlich nur 2px breit sein. Hier ist er aber wesentlich breiter.(s. Bild)

Firefox:
Ebenfalls das Problem am rechten Rand, und der Hintergrund der Navigation ist auch 1px höher als der Hintergrund bei News (s. Bild)

Hier der HTML Code:

Code:

<body>



<div id="box">

        

        <!--LINKE SPALTE----------------------------------------------------------------------------------!-->

        <div id="links">

        

                <img src="images/logo.gif" alt="Logo" width="167" height="167" border="0">

                

                        <div id="newshead">

                                 

                                <img src="images/newshead.gif" alt="News" width="47" height="20" border="0">

                                

                        </div><!--/newshead!-->

                        

                        <div id="newscont">

                        

                                <img src="images/bild.gif" alt="Bild" width="167" height="167">

                                

                                <h3> Headline</h3>

                                <p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. </p>

                        

                        </div><!--/newscont!-->        

                        

                        <div id="termhead"><img src="images/termine.gif" alt="Termine" width="75" height="20"></div><!--/termhead!-->

                        

                        

                        <div id="termcont">

                        

                                <img src="images/bild.gif" alt="Bild" width="167" height="167">

                                

                                <h3> Headline</h3>

                                <p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. </p>

                        </div><!--/newscont!-->                

                        

  </div><!--/links!-->

        

                <!--RECHTE SPALTE----------------------------------------------------------------------------------!-->

                <div id="rechts">

                

                  <img src="images/banner.gif" alt="Banner" width="559" height="167" border="0">

                        

                  <div id="navi">

                        

                                <img src="images/navigation/label_gold.gif" alt="Label" width="49" height="20" border="0">

                                <img src="images/navigation/label_gold.gif" alt="Label" width="49" height="20" border="0">

                                <img src="images/navigation/label_gold.gif" alt="Label" width="49" height="20" border="0">

                                <img src="images/navigation/label_gold.gif" alt="Label" width="49" height="20" border="0">

                                <img src="images/navigation/label_gold.gif" alt="Label" width="49" height="20" border="0">

                                <img src="images/navigation/label_gold.gif" alt="Label" width="49" height="20" border="0">

                                <img src="images/navigation/label_gold.gif" alt="Label" width="49" height="20" border="0">

                                

                  </div><!--/navi!-->

                  

                  <div id="content">

                                  

                                <div class="spalte">

                                

                                <h3> Headline</h3>

                                <p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. </p>

                                <img src="images/bild.gif" alt="Bild" width="167" height="167">        

                                

                                </div><!--/spalte!-->

                                

                                <div class="spalte">

                                

                                <h3> Headline</h3>

                                <p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. </p>

                                <img src="images/bild.gif" alt="Bild" width="167" height="167">        

                                

                                </div><!--/spalte!-->

                                

                                <div class="spalte">

                                

                                <h3> Headline</h3>

                                <p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. </p>

                                <img src="images/bild.gif" alt="Bild" width="167" height="167">        

                                

                                </div><!--/spalte!-->

                                

                                        <div class="spalte">

                                

                                <h3> Headline</h3>

                                <p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. </p>

                                <img src="images/bild.gif" alt="Bild" width="167" height="167">        

                                

                                </div><!--/spalte!-->

                                

                                        <div class="spalte">

                                

                                <h3> Headline</h3>

                                <p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. </p>

                                <img src="images/bild.gif" alt="Bild" width="167" height="167">        

                                

                                </div><!--/spalte!-->

                                

                                        <div class="spalte">

                                

                                <h3> Headline</h3>

                                <p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. </p>

                                <img src="images/bild.gif" alt="Bild" width="167" height="167">        

                                

                                </div><!--/spalte!-->

                                                  

                  </div><!--/content!-->

                        

  </div><!--/rechts!-->

        

        <div id="footer">

        

                <ul>

                        <li><a href="#">Navifoot</a></li>

                        <li><a href="#">Navifoot</a></li>

                        <li><a href="#">Navifoot</a></li>

                        <li><a href="#">Navifoot</a></li>

                        <li><a href="#">Navifoot</a></li>

                        <li><a href="#">Navifoot</a></li>

                

                </ul>

        

        </div><!--/footer!-->

        

</div><!--/box!-->







</body>

Und der CSS CODE

Code:

/* CSS  */



*{

padding: 0;

margin: 0;

}



body {

font-family:  Geneva, Verdana, Arial, sans-serif;

font-size: 10px;

color: #000000;

line-height: 1.166;        

background-color: #b49057;

background-image: url(images/body_bg.png);

background-repeat: repeat-x;

text-align: center;

}



h3{

font-size: 12px;

padding: 3px;

}



p{

padding: 5px;

}



#box {

margin: 0 auto;

background: #ffffff;

text-align: center;

width: 732px;

border: 1px solid #000000;

padding: 2px;

}





/* Linke Spalte */



#links {

display: inline;

width: 167px;

background: #FF0000;

float: left;

border-bottom: 2px solid white;

text-align: left;

}



#newshead {

width: 167px;

background: #9a6511;

float: left;

border-top: 2px solid white;

}



#newshead img{

margin-left: 3px;

}



#newscont {

width: 167px;

background: #00CC00;

float: left;

border-top: 2px solid white;

}



#termhead {

width: 167px;

background: #000000;

float: left;

border-top: 2px solid white;

}



#termhead img{

margin-left: 3px;

}



#termcont {

width: 167px;

background: #999999;

float: left;

border-top: 2px solid white;

}



/* Rechte Spalte */



#rechts {

width: 559px;

background: #ffffff;

float: left;

border-left: 2px solid white;

border-bottom: 2px solid white;

text-align: left;

}



#navi {

width: 559px;

background: #000000;

border-top: 2px solid white;

}



#navi img {

margin-left: 20px;

}



#content {

width: 559px;

background: #ffffff;

border-top: 2px solid white;

padding-top: 10px;

padding-bottom: 10px;

}



.spalte {

display: inline;

width: 167px;

background: #cccccc;

float: left;

margin-top: 10px;

padding-bottom: 10px;

margin-left: 15px;

}





/* Footer */



#footer {

clear: both;

width: 728px;

background: #000000;

color: #ffffff;

}



#footer ul{

margin: 0;

padding: 11px;

white-space: nowrap;

}



#footer li{

display: inline;

padding-left: 15px;

}



#footer a {

color: #99630d;

font-size: 11px;

letter-spacing: 1px;

}



#footer a:hover {

color: #99630d;

font-size: 11px;

text-decoration: none;

}

Code:

<body>



<div id="box">

        

        <!--LINKE SPALTE----------------------------------------------------------------------------------!-->

        <div id="links">

        

                <img src="images/logo.gif" alt="Logo" width="167" height="167" border="0">

                

                        <div id="newshead">

                                 

                                <img src="images/newshead.gif" alt="News" width="47" height="20" border="0">

                                

                        </div><!--/newshead!-->

                        

                        <div id="newscont">

                        

                                <img src="images/bild.gif" alt="Bild" width="167" height="167">

                                

                                <h3> Headline</h3>

                                <p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. </p>

                        

                        </div><!--/newscont!-->        

                        

                        <div id="termhead"><img src="images/termine.gif" alt="Termine" width="75" height="20"></div><!--/termhead!-->

                        

                        

                        <div id="termcont">

                        

                                <img src="images/bild.gif" alt="Bild" width="167" height="167">

                                

                                <h3> Headline</h3>

                                <p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. </p>

                        </div><!--/newscont!-->                

                        

  </div><!--/links!-->

        

                <!--RECHTE SPALTE----------------------------------------------------------------------------------!-->

                <div id="rechts">

                

                  <img src="images/banner.gif" alt="Banner" width="559" height="167" border="0">

                        

                  <div id="navi">

                        

                                <img src="images/navigation/label_gold.gif" alt="Label" width="49" height="20" border="0">

                                <img src="images/navigation/label_gold.gif" alt="Label" width="49" height="20" border="0">

                                <img src="images/navigation/label_gold.gif" alt="Label" width="49" height="20" border="0">

                                <img src="images/navigation/label_gold.gif" alt="Label" width="49" height="20" border="0">

                                <img src="images/navigation/label_gold.gif" alt="Label" width="49" height="20" border="0">

                                <img src="images/navigation/label_gold.gif" alt="Label" width="49" height="20" border="0">

                                <img src="images/navigation/label_gold.gif" alt="Label" width="49" height="20" border="0">

                                

                  </div><!--/navi!-->

                  

                  <div id="content">

                                  

                                <div class="spalte">

                                

                                <h3> Headline</h3>

                                <p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. </p>

                                <img src="images/bild.gif" alt="Bild" width="167" height="167">        

                                

                                </div><!--/spalte!-->

                                

                                <div class="spalte">

                                

                                <h3> Headline</h3>

                                <p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. </p>

                                <img src="images/bild.gif" alt="Bild" width="167" height="167">        

                                

                                </div><!--/spalte!-->

                                

                                <div class="spalte">

                                

                                <h3> Headline</h3>

                                <p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. </p>

                                <img src="images/bild.gif" alt="Bild" width="167" height="167">        

                                

                                </div><!--/spalte!-->

                                

                                        <div class="spalte">

                                

                                <h3> Headline</h3>

                                <p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. </p>

                                <img src="images/bild.gif" alt="Bild" width="167" height="167">        

                                

                                </div><!--/spalte!-->

                                

                                        <div class="spalte">

                                

                                <h3> Headline</h3>

                                <p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. </p>

                                <img src="images/bild.gif" alt="Bild" width="167" height="167">        

                                

                                </div><!--/spalte!-->

                                

                                        <div class="spalte">

                                

                                <h3> Headline</h3>

                                <p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. </p>

                                <img src="images/bild.gif" alt="Bild" width="167" height="167">        

                                

                                </div><!--/spalte!-->

                                                  

                  </div><!--/content!-->

                        

  </div><!--/rechts!-->

        

        <div id="footer">

        

                <ul>

                        <li><a href="#">Navifoot</a></li>

                        <li><a href="#">Navifoot</a></li>

                        <li><a href="#">Navifoot</a></li>

                        <li><a href="#">Navifoot</a></li>

                        <li><a href="#">Navifoot</a></li>

                        <li><a href="#">Navifoot</a></li>

                

                </ul>

        

        </div><!--/footer!-->

        

</div><!--/box!-->







</body>

Und der CSS CODE

Code:

/* CSS  */



*{

padding: 0;

margin: 0;

}



body {

font-family:  Geneva, Verdana, Arial, sans-serif;

font-size: 10px;

color: #000000;

line-height: 1.166;        

background-color: #b49057;

background-image: url(images/body_bg.png);

background-repeat: repeat-x;

text-align: center;

}



h3{

font-size: 12px;

padding: 3px;

}



p{

padding: 5px;

}



#box {

margin: 0 auto;

background: #ffffff;

text-align: center;

width: 732px;

border: 1px solid #000000;

padding: 2px;

}





/* Linke Spalte */



#links {

display: inline;

width: 167px;

background: #FF0000;

float: left;

border-bottom: 2px solid white;

text-align: left;

}



#newshead {

width: 167px;

background: #9a6511;

float: left;

border-top: 2px solid white;

}



#newshead img{

margin-left: 3px;

}



#newscont {

width: 167px;

background: #00CC00;

float: left;

border-top: 2px solid white;

}



#termhead {

width: 167px;

background: #000000;

float: left;

border-top: 2px solid white;

}



#termhead img{

margin-left: 3px;

}



#termcont {

width: 167px;

background: #999999;

float: left;

border-top: 2px solid white;

}



/* Rechte Spalte */



#rechts {

width: 559px;

background: #ffffff;

float: left;

border-left: 2px solid white;

border-bottom: 2px solid white;

text-align: left;

}



#navi {

width: 559px;

background: #000000;

border-top: 2px solid white;

}



#navi img {

margin-left: 20px;

}



#content {

width: 559px;

background: #ffffff;

border-top: 2px solid white;

padding-top: 10px;

padding-bottom: 10px;

}



.spalte {

display: inline;

width: 167px;

background: #cccccc;

float: left;

margin-top: 10px;

padding-bottom: 10px;

margin-left: 15px;

}





/* Footer */



#footer {

clear: both;

width: 728px;

background: #000000;

color: #ffffff;

}



#footer ul{

margin: 0;

padding: 11px;

white-space: nowrap;

}



#footer li{

display: inline;

padding-left: 15px;

}



#footer a {

color: #99630d;

font-size: 11px;

letter-spacing: 1px;

}



#footer a:hover {

color: #99630d;

font-size: 11px;

text-decoration: none;

}

Zitat:

Zitat von klappauge (Beitrag 359254)

Ausversehen zu früh abgeschickt, was noch fehlte:

Ein Danke Schön an jemanden der mir weiterhelfen kann! :)

Thx!

Wenn der IE es als Einzigster richtig anzeigt, dann hast du einen Fehler im Code!

Gib uns bitte deinen kompletten HTML und CSS Code. Sonst können nichts testen.

Zitat:

Zitat von BlackHawk

Gib uns bitte deinen kompletten HTML und CSS Code.

Noch besser wäre ein Online-Beispiel!

Der komplette Code

Hier die komplette Code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Temp</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8559-1">

<link rel=stylesheet type=text/css href=index.css>



<body>



<div id="box">

        

        <!--LINKE SPALTE----------------------------------------------------------------------------------!-->

        <div id="links">

        

                <img src="images/logo.gif" alt="Logo" width="167" height="167" border="0">

                

                        <div id="newshead">

                                 

                                <img src="images/newshead.gif" alt="News" width="47" height="20" border="0">

                                

                        </div><!--/newshead!-->

                        

                        <div id="newscont">

                        

                                <img src="images/bild.gif" alt="Bild" width="167" height="167">

                                

                                <h3> Headline</h3>

                                <p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. </p>

                        

                        </div><!--/newscont!-->        

                        

                        <div id="termhead"><img src="images/termine.gif" alt="Termine" width="75" height="20"></div><!--/termhead!-->

                        

                        

                        <div id="termcont">

                        

                                <img src="images/bild.gif" alt="Bild" width="167" height="167">

                                

                                <h3> Headline</h3>

                                <p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. </p>

                        </div><!--/newscont!-->                

                        

  </div><!--/links!-->

        

                <!--RECHTE SPALTE----------------------------------------------------------------------------------!-->

                <div id="rechts">

                

                  <img src="images/banner.gif" alt="Banner" width="559" height="167" border="0">

                        

                  <div id="navi">

                        

                                <img src="images/navigation/label_gold.gif" alt="Label" width="49" height="20" border="0">

                                <img src="images/navigation/label_gold.gif" alt="Label" width="49" height="20" border="0">

                                <img src="images/navigation/label_gold.gif" alt="Label" width="49" height="20" border="0">

                                <img src="images/navigation/label_gold.gif" alt="Label" width="49" height="20" border="0">

                                <img src="images/navigation/label_gold.gif" alt="Label" width="49" height="20" border="0">

                                <img src="images/navigation/label_gold.gif" alt="Label" width="49" height="20" border="0">

                                <img src="images/navigation/label_gold.gif" alt="Label" width="49" height="20" border="0">

                                

                  </div><!--/navi!-->

                  

                  <div id="content">

                                  

                                <div class="spalte">

                                

                                <h3> Headline</h3>

                                <p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. </p>

                                <img src="images/bild.gif" alt="Bild" width="167" height="167">        

                                

                                </div><!--/spalte!-->

                                

                                <div class="spalte">

                                

                                <h3> Headline</h3>

                                <p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. </p>

                                <img src="images/bild.gif" alt="Bild" width="167" height="167">        

                                

                                </div><!--/spalte!-->

                                

                                <div class="spalte">

                                

                                <h3> Headline</h3>

                                <p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. </p>

                                <img src="images/bild.gif" alt="Bild" width="167" height="167">        

                                

                                </div><!--/spalte!-->

                                

                                        <div class="spalte">

                                

                                <h3> Headline</h3>

                                <p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. </p>

                                <img src="images/bild.gif" alt="Bild" width="167" height="167">        

                                

                                </div><!--/spalte!-->

                                

                                        <div class="spalte">

                                

                                <h3> Headline</h3>

                                <p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. </p>

                                <img src="images/bild.gif" alt="Bild" width="167" height="167">        

                                

                                </div><!--/spalte!-->

                                

                                        <div class="spalte">

                                

                                <h3> Headline</h3>

                                <p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. </p>

                                <img src="images/bild.gif" alt="Bild" width="167" height="167">        

                                

                                </div><!--/spalte!-->

                                                  

                  </div><!--/content!-->

                        

  </div><!--/rechts!-->

        

        <div id="footer">

        

                <ul>

                        <li><a href="#">Navifoot</a></li>

                        <li><a href="#">Navifoot</a></li>

                        <li><a href="#">Navifoot</a></li>

                        <li><a href="#">Navifoot</a></li>

                        <li><a href="#">Navifoot</a></li>

                        <li><a href="#">Navifoot</a></li>

                

                </ul>

        

        </div><!--/footer!-->

        

</div><!--/box!-->







</body>

</html>

Und hier nochmal der CSS Code:

Code:

/* CSS  */



*{

padding: 0;

margin: 0;

}



body {

font-family:  Geneva, Verdana, Arial, sans-serif;

font-size: 10px;

color: #000000;

line-height: 1.166;        

background-color: #b49057;

background-image: url(images/body_bg.png);

background-repeat: repeat-x;

text-align: center;

}



h3{

font-size: 12px;

padding: 3px;

}



p{

padding: 5px;

}



#box {

margin: 0 auto;

background: #ffffff;

text-align: center;

width: 732px;

border: 1px solid #000000;

padding: 2px;

}





/* Linke Spalte */



#links {

display: inline;

width: 167px;

background: #FF0000;

float: left;

border-bottom: 2px solid white;

text-align: left;

}



#newshead {

width: 167px;

background: #9a6511;

float: left;

border-top: 2px solid white;

}



#newshead img{

margin-left: 3px;

}



#newscont {

width: 167px;

background: #00CC00;

float: left;

border-top: 2px solid white;

}



#termhead {

width: 167px;

background: #000000;

float: left;

border-top: 2px solid white;

}



#termhead img{

margin-left: 3px;

}



#termcont {

width: 167px;

background: #999999;

float: left;

border-top: 2px solid white;

}



/* Rechte Spalte */



#rechts {

width: 559px;

background: #ffffff;

float: left;

border-left: 2px solid white;

border-bottom: 2px solid white;

text-align: left;

}



#navi {

width: 559px;

background: #000000;

border-top: 2px solid white;

}



#navi img {

margin-left: 20px;

}



#content {

width: 559px;

background: #ffffff;

border-top: 2px solid white;

padding-top: 10px;

padding-bottom: 10px;

}



.spalte {

display: inline;

width: 167px;

background: #cccccc;

float: left;

margin-top: 10px;

padding-bottom: 10px;

margin-left: 15px;

}





/* Footer */



#footer {

clear: both;

width: 728px;

background: #000000;

color: #ffffff;

}



#footer ul{

margin: 0;

padding: 11px;

white-space: nowrap;

}



#footer li{

display: inline;

padding-left: 15px;

}



#footer a {

color: #99630d;

font-size: 11px;

letter-spacing: 1px;

}



#footer a:hover {

color: #99630d;

font-size: 11px;

text-decoration: none;

}

Danke schon mal für die schnelle Hilfe!!!

Deine Seite ist im "Quirksmodus". DOCTYPE-Switch und seine Auswirkungen

Ein </head> fehlt.

Zu dem machst du es dir an vielen Stellen zu kompliziert. Stell doch deine Navigation eine Liste (<ul>) und gebe den <li>-Elemeten die Grafiken als Hintergrund, dann musst du nicht so basteln.

Kommentare sehen so aus:

Code:

Danke für die Tips!

Hab jetzt den Doc Type auf Strict gesetzt, allerdings hat sich nichts an den Pixeln Problemen geändert, ausser das jetzt bei Firefox die komplette linke Spalte fehlt.

Die Navi wird am Ende aus Roll Over Bildern bestehen. Wollte das mit Java Script machen. Wenn das mit CSS geht wäre natürlich noch besser, aber ich bin noch recht neu im CSS und das übersteigt dann meine Fähigkeiten. :o

Hast du einen korrekten Doctype verwendet oder nur Strict reingeschrieben?

CSS kann auch Navigationen mit "rollover" hinbekommen.

Anbei der neue HTML Code mit dem neuen Strict Code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">

<html>

<head>

<title>Temp</title>

<link rel=stylesheet type=text/css href=index.css>

</head>

<body>



<div id="box">

        

        <!--LINKE SPALTE----------------------------------------------------------------------------------!-->

        <div id="links">

        

                <img src="images/logo.gif" alt="Logo" width="167" height="167" border="0">

                

                        <div id="newshead">

                                 

                                <img src="images/newshead.gif" alt="News" width="47" height="20" border="0">

                                

                        </div><!--/newshead!-->

                        

                        <div id="newscont">

                        

                                <img src="images/bild.gif" alt="Bild" width="167" height="167">

                                

                                <h3> Headline</h3>

                                <p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. </p>

                        

                        </div><!--/newscont!-->        

                        

                        <div id="termhead"><img src="images/termine.gif" alt="Termine" width="75" height="20"></div><!--/termhead!-->

                        

                        

                        <div id="termcont">

                        

                                <img src="images/bild.gif" alt="Bild" width="167" height="167">

                                

                                <h3> Headline</h3>

                                <p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. </p>

                        </div><!--/newscont!-->                

                        

  </div><!--/links!-->

        

                <!--RECHTE SPALTE----------------------------------------------------------------------------------!-->

                <div id="rechts">

                

                  <img src="images/banner.gif" alt="Banner" width="559" height="167" border="0">

                        

                  <div id="navi">

                        

                                <img src="images/navigation/label_gold.gif" alt="Label" width="49" height="20" border="0">

                                <img src="images/navigation/label_gold.gif" alt="Label" width="49" height="20" border="0">

                                <img src="images/navigation/label_gold.gif" alt="Label" width="49" height="20" border="0">

                                <img src="images/navigation/label_gold.gif" alt="Label" width="49" height="20" border="0">

                                <img src="images/navigation/label_gold.gif" alt="Label" width="49" height="20" border="0">

                                <img src="images/navigation/label_gold.gif" alt="Label" width="49" height="20" border="0">

                                <img src="images/navigation/label_gold.gif" alt="Label" width="49" height="20" border="0">

                                

                  </div><!--/navi!-->

                  

                  <div id="content">

                                  

                                <div class="spalte">

                                

                                <h3> Headline</h3>

                                <p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. </p>

                                <img src="images/bild.gif" alt="Bild" width="167" height="167">        

                                

                                </div><!--/spalte!-->

                                

                                <div class="spalte">

                                

                                <h3> Headline</h3>

                                <p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. </p>

                                <img src="images/bild.gif" alt="Bild" width="167" height="167">        

                                

                                </div><!--/spalte!-->

                                

                                <div class="spalte">

                                

                                <h3> Headline</h3>

                                <p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. </p>

                                <img src="images/bild.gif" alt="Bild" width="167" height="167">        

                                

                                </div><!--/spalte!-->

                                

                                        <div class="spalte">

                                

                                <h3> Headline</h3>

                                <p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. </p>

                                <img src="images/bild.gif" alt="Bild" width="167" height="167">        

                                

                                </div><!--/spalte!-->

                                

                                        <div class="spalte">

                                

                                <h3> Headline</h3>

                                <p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. </p>

                                <img src="images/bild.gif" alt="Bild" width="167" height="167">        

                                

                                </div><!--/spalte!-->

                                

                                        <div class="spalte">

                                

                                <h3> Headline</h3>

                                <p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. </p>

                                <img src="images/bild.gif" alt="Bild" width="167" height="167">        

                                

                                </div><!--/spalte!-->

                                                  

                  </div><!--/content!-->

                        

  </div><!--/rechts!-->

        

        <div id="footer">

        

                <ul>

                        <li><a href="#">Navifoot</a></li>

                        <li><a href="#">Navifoot</a></li>

                        <li><a href="#">Navifoot</a></li>

                        <li><a href="#">Navifoot</a></li>

                        <li><a href="#">Navifoot</a></li>

                        <li><a href="#">Navifoot</a></li>

                

                </ul>

        

        </div><!--/footer!-->

        

</div><!--/box!-->







</body>

</html>

Der CSS COde ist der selbe wie vorher, da ich ja leider noch nicht weiss was ich ändern muss.

Gibt es einen Link zu einem Beispiel wie man eine <ul>Navi programmiert, die mit Image-Rollovers arbeitet? Wäre ja super wenn ich auf Java verzichten kann! :)