css-Fehler?

Lars_oha

Moin moin,

Ich hab da ein kleines Darstellungsproblem mit FireFox. Im IE alles richtig aber im FF ist der Content bei der category.php und single.php unterhalb der Sidebar gerutscht.

Ich weiss momentan echt nicht weiter. Ist es jetzt ein css-problem oder hab ich die Sidebar an der falschen Stelle includet? Für ersteres spricht eigentlich das bei der page.php und index.php alles richtig angezeigt wird.

Ich setz mal nen snipped des Codes hier rein. Vielleicht liegt es ja doch daran.

index.php

PHP

<?php include('header.php'); ?>
 <div id="container" class="clearfix">
  <?php include('sidebar.php'); ?>
  <div id="topcontentdouble"></div>
   <div id="content">
     <div class="contentright">
      <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
       <div class="post">
        <div class="title" id="post-<?php the_ID(); ?>">
         <a href="<?php the_permalink() ?>" rel="bookmark">
          <?php the_title(); ?>
         </a>
        </div>
.
.
.
.
.

Alles anzeigen

category.php

PHP

<?php include "header.php"; ?>
 <div id="container">
  <?php include('sidebar.php'); ?>
  <div id="topcontent"></div>
  <div id="singlecontent">
   <div class="clearer"> </div>
   <div class="singlepost">
    <?php if (have_posts()) : ?>
     <h2 class="searchresult">Kategorie</h2>
     <?php $post = $posts[0]; // Hack. Set $post so that the_date() works. ?>
     <div class="searchdetails">
      Archiv der Kategorie '<?php echo single_cat_title(); ?>' 
     </div>

Alles anzeigen

Die Sidebar ist bei beiden an der selben stelle, aber trotzdem ist der Content verrutscht. Hat jemand ne Idee?

Edit:

Link zur Seite: WiB-Badenhausen » Badenhausen

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

marX

Platzprobleme vermute ich. Wie so oft in diesem Fall... ("Content / Sidebar verrutscht" liefert bestimmt tausende Forentreffen :-D)

Verringere in der style.css mal die Breite von #sidebar und/oder #content um ein paar Pixel/Prozent.

Edit: Ist wohl doch etwas komplizierter hier, durch diverse clear-divs. Z.B. muss das 1. clear-div in #singlecontent entfernt werden, da sonst der Content immer unterhalb der Sidebar ist.
Ist #singlecontent vielleicht für ein Template ohne Sidebar in diesem Theme gedacht gewesen?

Lars_oha

Blöd gefragt, wo in der css? durch die steig ich nicht durch.... bei #sidebar von 150 auf 100px bleibts das gleiche.

Code

/* <<<<<<<<<<<<<<<<<<<<<<<<<< Structural Layout >>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
body {
 background: url(images/bg.gif) repeat top;
 margin:  0;
 padding: 0;
 text-align: center; /* IE hack Part 1 */ 
}
 
/*---------------------------- Site Navigation -------------------------------*/
#hnav {
 width: 750px;
 margin: 8px auto;
 height: 23px;
 background: /*#d9d7da*/ url(images/navgradient.jpg) repeat-x top;
 border-bottom: 1px solid #ccced2;
 border-left: 1px solid #f5f6f7;
 border-right: 1px solid #ccced2;
}
 
#header {
 float: left;
 width: 235px;
 margin: 0px;
 padding: 0px;
 text-align: left;
 height: 20px;
}
 
#hmenu {
 margin: 2px 5px 0 0;
 text-transform:lowercase;
 text-align: right;
 float: right;
 width: 440px;
}
 
#masthead {
 background: url(images/masthead.jpg);
 width: 750px;
 height: 135px;
 margin: 0 auto;
 padding: 0;
 border-top: 1px solid #b8e4e7;
 border-right: 1px solid #86c9cf;
 border-bottom: 2px solid #00527f;
 border-left: 1px solid #86c9cf;
}
#masthead2 {
 width: 750px;
 height: 135px;
 margin: 0 auto;
 padding: 0;
 border-top: 1px solid #b8e4e7;
 border-right: 1px solid #86c9cf;
 border-bottom: 2px solid #00527f;
 border-left: 1px solid #86c9cf;
}
 
/*------------------------------- Main Body ----------------------------------*/
#container {
 width: 750px;
 margin: 10px auto;
/* background: #f5f6f7;*/
 border-left: 1px solid #d5d7db;
 border-right: 1px solid #d5d7db;
 font-family: Verdana,  Arial, Helvetica, sans-serif;
 font-size: .70em;
 text-align: left; /* IE hack Part 2 */
 border-top: 15px solid #d5d7db;
 border-bottom: 15px solid #d5d7db;
}
 
#topcontentdouble {
 float: right;
 width: 575px;
 height: 0px;
/* background: #f5f6f7 */
 margin: 9px 10px 0 0;
 display: inline;
}
 
#topcontent {
 width: 575px;
/* background: #f5f6f7 */
 margin: 9px auto 0 auto;
 height: 00px;
}
 
#content {
 float: right;
 width: 575px;
/*background: #ffffff;*/
 margin:  0 10px 0 0;
 display: inline;
}
 
#bottomcontentdouble {
 display: inline;
 float: right;
 width: 575px;
/* background: #f5f6f7 ; */
 margin: 0 10px 9px 0;
 height: 35px;
}
#singlecontent {
 width: 575px;
/* background: #ffffff; */
 padding-top:0;
 margin:  0 auto;
}
 
.post {
 margin-top: 0px;
 margin-left: 10px;
 margin-right: 20px;
 margin-bottom: 80px;
}
 
.singlepost {
 margin: 0px 10px 80px 10px;
}
 
#bottomcontent {
 width: 575px;
/* background: #f5f6f7 ; */
 margin: 0px auto 0px auto;
 padding-bottom: 9px;
 height: 27px;
}
 
.meta {
 font-size: .9em;
 line-height: 18px;
}
 
.feedback {
 float: right;
 font-size: 1.0em;
 line-height: 35px;
}
 
.author {
 width: 200px;
 float: right;
 text-align: right;
}
 
/*---------------------------- Page Navigation -------------------------------*/
.postnavigation {
 height: 45px;
}
 
.left {
 float: left;
 padding-left: 10px;
}
 
.right {
 float: right;
 padding-right: 10px; 
}
 
.leftdouble {
 float: left;
 padding-left: 10px;
}
 
.rightdouble {
 float: right;
 padding-right: 10px; 
}
 
/* ------------------------------ Sidebars -----------------------------------*/
#sidebar {
 position: relative;
 float: left;
 width: 150px;
 margin: 0 0 0 10px;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 1.0em;
 text-align: left; /* IE hack Part 2 */
 display: inline;
}
 
#sidebar ul {
 position: relative;
}
#sidebar ul li {
 list-style-type: none;
 list-style-image: none;
}
#sidebar ul, #sidebar ul li {
 margin: 0;
 padding: 0;
 
}
#sidebar ul li ul{
/* background: #fff; */
 margin: 0 5px 0 0;
 padding: 10px 5PX 15px 5px;
}
#sidebar h2 {
 background: url(images/navgradient.jpg) repeat-x top;
 height: 16px;
 margin: 10px 5px 0 0px;
 padding:  8px 0 1px 5px;
 color: #8B9198;
 border-bottom: 1px solid #fff;
}
 
/*
The following is the fix
for 3-pixel-jog bug in IE 
*/
/* Hide from IE5-mac. Only IE-win sees this. \*/
 
* html #content {
 /*margin-right: 7px;*/
}
 
* html #sidebar {
 height: 1%;
}
/* End hide from IE5/mac */
 
#sidebar ul li ul li{
 margin: 4px 10px 4px 10px;
 display: block;
 background: url(images/bullet.jpg) no-repeat;
 padding: 0 0 0 18px;
}
 
#sidebar ul li ul li a{
 display: block;
 height:1%; /* IE WIN */
}
 
#sidebar ul li ul li a:hover{
 background: #F0F0F0;
 text-decoration: none;
}
 
#sidebar ul li ul li ul {
 margin: 0;
 padding: 0;
}
 
/* ------------------------------ Comments -----------------------------------*/
#response {
 margin: 0px 110px;
}
 
#commentlist {
 padding: 0px 10px 0px 10px;
 margin-left: 10px;
 margin-right: 10px;
 color: #7b7b7b;
 list-style-type: none; 
 text-align: justify;
}
 
#commentlist li  p{
 padding: 0px;
 margin: 8px 0px 0px 0px;
}
 
.commentname {
 width: 220px;
 float: left;
 font-size: 0.9em;
 margin: 0;
 padding: 0  0 2px 0;
}
 
.commentinfo{
 width: 250px;
 float: right;
 text-align: right;
}
 
.commenttext {
 clear: both;
 padding-top: 0px;
 margin-top: 0px;
 margin-bottom: 70px;
 border-top: 1px solid #e4ebef;
 text-align:left; 
 line-height:16px;
}
 
/* ----------------------------- Comment Form ------------------------------- */
h2#postcomment {
 background: #FFFFFF url(images/comments.gif) no-repeat center top; 
 margin: 40px 0px 0px 0px;
 padding: 0 0 20px 10px;
}
 
#commentform {
 background: #f5f6f7; 
 padding: 1px 20px;
 margin-top: 0px;
 margin-bottom: 0px;
}
 
#commentboxes {
 width: 200px;
 float: left;
 color: #7b7b7b;
 font-size: 0.9em;
}
 
p.instructions {
 margin: 14px 0 0 200px;
 color: #7b7b7b;
 font-size: 0.9em;
 text-align: justify;
 border-left-width: 1px;
 border-left-style: solid;
 border-left-color: #d5d7db;
 padding-left: 15px;
 position: relative;
}
 
#inputbox {
 clear: both;
 color: #7b7b7b;
 font-size: 0.9em;
}
 
#button{
 padding-top: 0.5em;
}
 
#commentsbottom {
 background: #FFFFFF url(images/commentsdown.gif) no-repeat center top; 
 margin: 0;
 padding: 0;
 height: 22px;
}
 
/* --------------------------- 'Sidebar' Structure -------------------------- */
#menu {
 width: 750px;
 height: 45px;
 background: #F0F0F0 url(images/bottomgradient.jpg) repeat-x top;
 border-top: 1px solid #d1d4d9;
 border-right: 1px solid #d5d7db;
 border-bottom: 2px solid #d5d7db;
 border-left: 1px solid #d1d4d9;
}
 
#searchform {
 float: left;
 margin-top: 12px;
 padding-left: 20px;
}
 
#topimage {
 margin: 2px 0 0 0; 
 cursor: pointer;
 width: 60px;
 height: 40px;
 background: url(images/topbutton.gif) no-repeat top;
 float: right;
 padding-right: 9px;
 padding-top: 3px;
}
 
#topimage a{
 display:block;
 height:100%;
 overflow:hidden;
 text-decoration:none;
}

Alles anzeigen

Lars_oha

Teil2

Code

/* ------------------------------- Credits ---------------------------------- */
#footer {
 margin: 10px auto;
 width: 750px;
 font-size: .8em;
}
 
#footer p {
 margin-top: 0;
}
 
.clearer {
 clear: both;
 line-height: 0px;
}
 
/*------------------------------ H Menu Styling ----------------------------- */
#top { 
 display: inline;
 list-style-type: none;
}
 
#hnav ul li{
 display: inline;
}
 
#hnav ul li a {
 color: #919191;
 text-decoration: none;
 padding: 5px 0px 5px 30px;
 font-size: 0.7em;
 font-family: Arial, Verdana, Helvetica, sans-serif;
 font-weight: normal;
}
 
#hnav ul li a:hover {
 color: #bfbfbf;
}
 
/* <<<<<<<<<<<<<<<<<<<<<<<<<<<<< Typography >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
/* ------------------------------- General ---------------------------------- */
a {
 color: #005D93;
 text-decoration: none;
}
 
a:hover {
 color: #990000;
 text-decoration: underline;
}
 
top a {
 border: 0;
 text-decoration: none;
}
 
blockquote {
 background: #f5f6f7;
 padding: 10px 20px;
}
 
code {
 font-family: Arial, Verdana, Helvetica, sans-serif;
 font-size: 1.0em;
}
 
h1 a {
 margin: 0;
 padding: 0;
 text-decoration: none;
 color: #6f6f6f;
}
 
h2 {
 color: #005D93;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 1.1em;
 margin-bottom: 0px;
 margin-top: 40px;
 margin-left: 10px;
}
 
.singlepost h2{
 margin-top: 0px;
}
 
h3 {
 text-align: left;
 color: #005D93;
 margin: 0;
 margin-top: 3px;
 padding: 0;
 font-size: 0.9em;
 line-height: 26px;
 font-weight: normal;
}
 
/* ------------------------------Site Navigation ---------------------------- */
#blogtitle {
 margin: 0;
 padding: 5px;
 font-family: Arial, Helvetica, sans-serif;
 font-weight: normal;
 font-size: 0.7em;
}
 
#blogtitle a{
 font-weight: bold;
}
 
#blogtitle a:hover{
 color: #bfbfbf;
 font-weight: bold;
 text-decoration: none;
}
 
/* -------------------------------- Main Body ------------------------------- */
.post, .singlepost{
color: #3f3f3f;
 text-align: left;
}
 
.posted {
 color: #555555;
}
 
.title a  {
 text-align: left;
 height: 20px;
 color: #444444;
 display: block;
 text-decoration: none;
 font-size: 1.6em;
 padding-top: 8px;
}
 
.title a:hover {
 color: #005D93;
}
 
.storycontent {
 border-bottom: 1px solid #BBBBBB;
 padding: 0px 0px 5px 0px;
 font: 1.1em Arial, Helvetica, sans-serif;
 line-height: 18px;
}
.singlepost p {
 margin-top: 0;
}
.singlepages p {
 color: #3f3f3f;
 text-align: left;
 margin: 0px 10px 80px 10px;
 line-height: 20px;
 font: 1.2em Arial, Helvetica, sans-serif;
}
 
.storycontent a {
 text-decoration: none;
}
 
.storycontent a:hover {
 text-decoration: underline;
}
 
.storycontent a:visited {
 color: #000000;
}
 
/* ----------------------------- Page Navigation ---------------------------- */
.left a{
 color: #990000;
 font-size: 0.9em;
}
 
.right a{
 font-size: 0.9em;
 color: #990000;
}
 
.leftdouble a{
 color: #990000;
 font-size: 0.9em;
}
 
.rightdouble a{
 font-size: 0.9em;
 color: #990000;
}
 
/* -------------------------------- Comments ------------------------------- */
.commentauthor {
 font-weight: bold;
 font-size: 1.2em;
 padding: 0 0 2px 0;
 margin: 0;
 color: #000000;
}
 
.commentauthor a{
 font-weight: bold;
 margin: 0;
 padding: 0 20px 0 0;
 background: url(images/icon.jpg) no-repeat top right;
}
 
.commentdate {
 font-size: 0.8em;
 text-align: right;
 line-height: 18px;
 padding: 0;
 margin: 0;
}
 
#nocomment, #commentsclosed {
 text-align: center;
 color: #7b7b7b;
 font-size: 1.1em;
}
 
/* ------------------------------ Comments Form ----------------------------- */
#comment  {
 width: 310px;
}
 
#comment, #author, #url, #email, #press{
 background: #e7e9ed;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 1.1em;
 color: #7b7b7b;
 padding: 1px 2px 1px 1px;
}
 
#comment, #author, #url, #email{
 border: 1px solid #d5d7db;
}
 
#comment:hover, #author:hover, #url:hover, #email:hover{
 border: 1px solid #7b7b7b;
}
 
#comment:focus, #author:focus, #url:focus, #email:focus{
 background: #FFFFFF;
 border: 1px solid #000000;
 color: #7b7b7b;
 padding: 1px 2px 1px 1px;
}
 
#commentboxes p {
 margin: 0;
 padding-bottom: 0.9em;
}
 
h2#comments{
 margin-bottom:40px;
}
 
p.feeds {
 float: right;
 margin-top: -1.8em;
 font-size: 0.9em;
}
 
p.feeds a, p.feeds a:hover  {
 text-decoration: none;
}
 
p.feeds a:hover {
 color: #000000;
}
 
#inputbox {
 clear: both;
 color: #7b7b7b;
 font-size: 0.9em;
}
 
#inputbox a {
 color: #7b7b7b;
}
 
#inputbox a:hover {
 color: #FFFFFF;
}
 
p.inputbox {
 margin: 0;
 padding-bottom: 10px;
}
 
p.pages {
 margin: 0;
 padding: 40px 40px;
 padding-top: 0;
 text-align: center;
}
 
p.pages a {
 color: #005D93;
}
 
/* -------------------------------- Credits --------------------------------- */
p.credits {
 padding: 0px 0px;
 text-align: center;
 margin: 10px 0px; 
 color: #9e9e9e;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 0.8em;
}
 
p.wordpress {
 margin: 0;
 padding: 0;
 border-bottom-width: 1px;
 border-bottom-style: solid;
 border-bottom-color: #d5d7db;
}
 
/* --------------- Search/Archives/Categories Results Pages ------------------*/
.searchresult {
 padding: 30px 0 0 0;
 margin:0;
}
 
.searchresult a{
 color: #000000; 
}
 
.searchinfo {
 font-size: .9em;
 line-height: 18px;
 padding: 0 0 2px 0;
 color: #000000;
 margin: 0 ;
}
 
.searchdetails {
 font-size: .9em;
 line-height: 18px;
 padding: 0 0 2px 0;
 color: #000000;
 margin: 0 ;
 border-bottom: 1px solid #BBBBBB;
}
 
/*--------------------------- 'Comment Edit' Buttons ------------------------ */
#ed_toolbar {
 background: #d5d7db; 
 border: 1px solid #d5d7db;
 padding-left: 5px;
}
 
#ed_bold {
 background: url(images/bold.gif) no-repeat top;
 height: 22px;
 width: 22px;
 border: 0px none;
}
 
#ed_italic {
 background: url(images/italic.gif) no-repeat top;
 height: 22px;
 width: 22px;
 border: 0px none;
 margin-left: 5px;
}
 
#ed_link {
 background: url(images/link.gif) no-repeat top;
 height: 22px;
 width: 22px;
 border: 0px none;
 margin-left: 5px;
}
 
#ed_close{
 background: url(images/close.gif) no-repeat top;
 height: 22px;
 width: 22px;
 border: 0px none;
 margin-left: 25px;
}
/* 
This piece of code is for clearing
the floats without structural markup
Don't modify it
*/
.clearfix:after {
 content: "."; 
 display: block; 
 height: 0; 
 clear: both; 
 visibility: hidden;
}
.clearfix {
 display: inline-table;
}
/* Hides from IE-mac \*/
* html .clearfix {
 height: 1%;
}
.clearfix {
 display: block;
}
/* End hide from IE-mac */

Alles anzeigen

Lars_oha

Zitat von marX

Platzprobleme vermute ich. Wie so oft in diesem Fall... ("Content / Sidebar verrutscht" liefert bestimmt tausende Forentreffen :-D)

Verringere in der style.css mal die Breite von #sidebar und/oder #content um ein paar Pixel/Prozent.

Edit: Ist wohl doch etwas komplizierter hier, durch diverse clear-divs. Z.B. muss das 1. clear-div in #singlecontent entfernt werden, da sonst der Content immer unterhalb der Sidebar ist.
Ist #singlecontent vielleicht für ein Template ohne Sidebar in diesem Theme gedacht gewesen?

Japp, auf category und single war vorher keine Sidebar. Sehe grad. wenn man die Suche benutzt zerrupft es auch das Layout. dort war vorher auch keine Sidebar. Der IE schluckt alles so wie es sein sollte, nur FF nicht.

marX

Wie gesagt, nimm erstmal nacheinander die

HTML

<div class="clearer"></div>

raus. Jeder davon bewirkt, das ein float aufgehoben wird. Manche sind nötig, andere nicht (z.B. muss der raus, der direkt auf

HTML

<div id="singlecontent">

folgt).

Tipp: Firebug für den Firefox holen und live testen.
(Übrigens verhält sich der IE hier wohl falsch, was die floats und clears angeht.)

Lars_oha

Danke, damit ist schon mal das problem halbwegs gelöst das der Content unterhalb der Sidebar ist bei category und side.

Jetzt ist der gesamte Content nur noch irgendwie zu weit nach links verschoben. Die eine graue Linie geht in die Sidebar rein wogegen sie beim IE daneben ist.

Liegt das jetzt an dem

Code

#content {
 float: right;

in der css? interpretiert FF das richtig falsch und der IE falsch richtig?

marX

Zitat von Lars_oha
Danke, damit ist schon mal das problem halbwegs gelöst das der Content unterhalb der Sidebar ist bei category und side.

Jetzt ist der gesamte Content nur noch irgendwie zu weit nach links verschoben. Die eine graue Linie geht in die Sidebar rein wogegen sie beim IE daneben ist.

Liegt das jetzt an dem
Code
#content {
 float: right;

Nein. #content taucht ja in der Seite gar nicht auf. Gib dem #singlecontent mal noch etwas margin nach links, mindestens soviel wie die #sidebar breit ist(etwas mehr wäre praktisch) -> style.css, Zeile 166

Lars_oha

Ich danke dir. Das problem ist jetzt wohl behoben. :)

Willkommen! Melden Sie sich an oder registrieren Sie sich.

css-Fehler?

Jetzt mitmachen!