Probleme mit Boxen / CSS

[renel]

Hallo an alle :)

Ich bin in CSS realtiv neu und habe versucht mein in Photoshop erstelltes Design mittels CSS in Wordpress einzubinden. Läuft soweit auch ganz gut(www.soundcheckfm.de), wenn man den Firefox oder Safari Browser verwendet.

Verwendet man den IE oder Opera, werden die drei unteren Boxen nicht nach unten verlängert und es ensteht durcheinander.

Ich hoffe, dass mir jemand mit meienm Problem helfen kann.

Habe hier: http://browsershots.org/http://www.soundcheckfm.de/ Brwoser Shots gemacht, auf denen man das Problem erkennen kann.

Hier der CSS Code

/* CSS Document */
<!--
a:link {color:#31002D; text-decoration:none;
}
a:visited {color:#31002D; text-decoration:none;
}
a:active {color:#31002D; text-decoration:none;}
a:hover {color:#D46AC6; text-decoration:none;}
img{border-width:0;}

small {

font-size:12px;

}
h2{
 font-size:24px;
 color: #31002D;
 padding:0px;
 vertical-align:top;
}
.entry{
 text-align: justify;
}

body {
 background-color: #31002D;
 margin-left:0px;
 margin-right:0px;
 margin-top:0px;
 margin-bottom:0px

}
.boxobenlinks{
 float:left;
 border:0px;
 height:123px;
 width:65px;

padding:0;
 background:url(images/Untitled-1_01.gif)
}
.boxobenmitte{
 border:0px;
 height:123px;
 width:830px;
 padding:0;
 background:url(images/Untitled-1_02.gif);
 clear: none;
 float: left;
}
.boxobenrechts{
 position:absolute;
 top:0px;
 left:895px;
 border:0px;
 height:123px;
 width:105px;
 padding:0;
 background:url(images/Untitled-1_03.gif);
 clear: none;
 float: left;
}

.boxuntenlinks{
 position:absolute;
 top:123px;
 left:0px;
 border:0px;
 width:65px;
 clear: both;
 float: none;
 background-image: url(images/Untitled-1_18.gif);
 background-repeat: repeat;
 min-height:100%;

}
.boxsidebar{
 border:0px;
 min-height:100%;
 width:250px;
 background-color:#FFFFFF;
 clear: left;
 float: right;
 position:absolute;
 top:123px;
 left:65px;

}
.boxcontent{
 border:0px;
 min-height:100%;
 width:580px;
 background-color:#FFFFFF;
 clear: left;
 float: right;
 position:absolute;
 top:123px;
 left:315px;
 font-family: "Lucida Grande";
 font-size: 12px;
 vertical-align:top;
 padding:0px;

}

.boxuntenrechts{
 position:absolute;
 top:123px;
 left:895px;
 border:0px;
 min-height:100%;
 width:105px;
 padding:0;
  background-image:url(images/Untitled-1_06.gif)
 clear: none;
 float: left;
 background-image: url(images/Untitled-1_06.gif);
 background-repeat: repeat;
}

#sidebar{font-family: "Lucida Grande";
 font-size: 12px;
 vertical-align:top;
 text-align:left;

}

-->

/* CSS Document */
<!--
a:link {color:#31002D; text-decoration:none;
}
a:visited {color:#31002D; text-decoration:none;
}
a:active {color:#31002D; text-decoration:none;}
a:hover {color:#D46AC6; text-decoration:none;}
img{border-width:0;}

small {

font-size:12px;

}
h2{
 font-size:24px;
 color: #31002D;
 padding:0px;
 vertical-align:top;
}
.entry{
 text-align: justify;
}

body {
 background-color: #31002D;
 margin-left:0px;
 margin-right:0px;
 margin-top:0px;
 margin-bottom:0px

}
.boxobenlinks{
 float:left;
 border:0px;
 height:123px;
 width:65px;

padding:0;
 background:url(images/Untitled-1_01.gif)
}
.boxobenmitte{
 border:0px;
 height:123px;
 width:830px;
 padding:0;
 background:url(images/Untitled-1_02.gif);
 clear: none;
 float: left;
}
.boxobenrechts{
 position:absolute;
 top:0px;
 left:895px;
 border:0px;
 height:123px;
 width:105px;
 padding:0;
 background:url(images/Untitled-1_03.gif);
 clear: none;
 float: left;
}

.boxuntenlinks{
 position:absolute;
 top:123px;
 left:0px;
 border:0px;
 width:65px;
 clear: both;
 float: none;
 background-image: url(images/Untitled-1_18.gif);
 background-repeat: repeat;
 min-height:100%;

}
.boxsidebar{
 border:0px;
 min-height:100%;
 width:250px;
 background-color:#FFFFFF;
 clear: left;
 float: right;
 position:absolute;
 top:123px;
 left:65px;

}
.boxcontent{
 border:0px;
 min-height:100%;
 width:580px;
 background-color:#FFFFFF;
 clear: left;
 float: right;
 position:absolute;
 top:123px;
 left:315px;
 font-family: "Lucida Grande";
 font-size: 12px;
 vertical-align:top;
 padding:0px;

}

.boxuntenrechts{
 position:absolute;
 top:123px;
 left:895px;
 border:0px;
 min-height:100%;
 width:105px;
 padding:0;
  background-image:url(images/Untitled-1_06.gif)
 clear: none;
 float: left;
 background-image: url(images/Untitled-1_06.gif);
 background-repeat: repeat;
}

#sidebar{font-family: "Lucida Grande";
 font-size: 12px;
 vertical-align:top;
 text-align:left;

}

-->

[Engin]

Hi renel,

Ich hoffe, dass mir jemand mit meienm Problem helfen kann.

Schwierig. :)

  
</body>  
</html>  
  
 </div>  
 <div class="boxuntenrechts">&nbsp;</div>  
 <div class="boxuntenlinks">&nbsp;</div>

Fällt dir was auf?

Als ersten Schritt solltest du dein Dokument Validieren, da erledigen sich viele Darstellungsfehler von selbst.

Bei deinem CSS könntest du auch eine der angaben

.boxuntenrechts {  
background-image : url(images/Untitled-1_06.gif);  
background-image : url(images/Untitled-1_06.gif);

streichen, einmal sollte reichen.

Wenn du das alles hast, liest du dich noch ein wenig in die Browserweichen ein,
das brauchst du dann, um das Boxmodel für die IE berücksichtigen zu können.

Grüße,
Engin
 GYRO

[Struppi]

Ich bin in CSS realtiv neu und habe versucht mein in Photoshop erstelltes Design mittels CSS in Wordpress einzubinden.

Die vorgehensweise ist nur bedingt geeignet. Photoshop ist ein Grafikprogramm das ganz andere Fähigkeiten als HTML/CSS hat. Das Hauptproblem bzw. die meisten Schwierigkeiten dürften die vielen absolut positionierten Bereiche sein, dies solltest du soweit es geht vermeiden.

Verwendet man den IE oder Opera, werden die drei unteren Boxen nicht nach unten verlängert und es ensteht durcheinander.

Eben. Lass die Bereiche "fliessen" und sich am Inhalt anpassen, ich seh für dein Layout keine Notwendigkeit irgendetwas absolut zu positionieren.

Hier der CSS Code

/* CSS Document */
<!--

In ein CSS Dokument gehört kein HTML Code auch keine Kommentare, du solltest die Werkzeuge die existieren benutzen. z.b. den HMTL Validator (50 Fehler) und den CSS Validator (1 Fehler)

Struppi.