Problem mit der Sidebar

mat

Hallo zusammen,

ich habe ein Theme auf mein Wordpress-BLOG geladen und dieses ein bischen zurecht geschnitten.

Nun sieht es in Firefox genau so aus, wie ich es haben will.
Leider verschiebt der IE meine "Widgets" immer nach rechts, so sind sie direkt über dem Textfeld.

Ich hätte diese natürlich gerne in beiden Browsern am richtigen Ort...

Ich hoffe Ihr könnt mir helfen und besten Dank schonmal ! :)

Hier meine Stylesheet:

CSS

/* 
    Wordpress
*/


body {
    font-family: Tahoma, Arial, Serif;
    margin: 0;
    padding: 0;
    color: #e5e5e5;
    background: #fff url(images/bg_darkfire.gif) repeat-y 50% 0;
    text-align: center;
}


#rap {
    position: relative;
    margin: 0 auto;
    padding: 0;
    text-align: left;
    width: 768px;
}




/* =====| MAIN LINKS |========== */




a, .feedback a, .meta a  {
    color: #ffbf00;
    text-decoration: none;
    border-bottom: 1px dashed;
}


a img {
    border: none;
}


a:visited {
    color: #ffbf00;
}


a:hover, .feedback a:hover, .meta a:hover  {
    color: #ff7f00;
    text-decoration: none;
    border-bottom: 1px solid;
}


/* =====| HEADER |========== */




#header {
    position:relative;
    background: url(images/header_darkfire.gif);
    margin:0;
    padding: 25px 0 0 0;
    border-bottom: 2px solid #ffbf00;


    text-align:center;


    font: 35px Georgia, Arial, Serif;
    letter-spacing: -1px;


    height:65px !important;
    height /**/: 97px; /* for IE5/Win */
}


#header a {
    color: #fff;
    text-decoration: none;
    border:0;
}


#header a:hover {
    color: #ff7f00;
    text-decoration: none;
}




/* =====| MAIN BODY |========== */




#content {
    position:relative;
    text-align: justify;
    top: 10px;
    width:455px;
    margin:0px 0 0 270px;
    height: 100%;
    padding: 0px 0px 50px 0px;
    font: 80% Tahoma, Arial, Serif;
}


acronym, abbr {
    border-bottom: 1px dashed #333;
}


acronym, abbr, span.caps {
    cursor: help;
}


blockquote {
    border-left: 5px solid #b2b2b2;
    margin-left: 1.5em;
    padding-left: 5px;
}
 


cite {
    font-style: normal;
}


h2, code {
    font-family: Tahoma, Arial, Serif;
    margin: 15px 0 2px 0;
    padding-bottom: 5px;
    color: #8bb7cf;
}


h2 {
    font: 120% Tahoma, Arial, Serif;
}


h3 {
    margin: 0;
}


.storytitle {
    font: 170% Georgia, Arial, Serif;
    letter-spacing:-1px;
}


.storycontent, .feedback {
}


.storycontent ul {
    list-style: square;
}


.credit {
    font: 80% Tahoma, Arial, Serif;
    position:relative;
    width:auto;
    top:0px;
    margin:0px;
    text-align: center;
    margin-left:270px;
    padding:0px;
}


.credit a:link {
    color: #ffbf00;
    text-decoration: none;
}


.credit a:hover {
    color: #ff7f00;
}


.feedback {
    text-align: right;
}


.meta {
    color: #999;
    margin: 15px 0 0px 0;


}


.meta ul {
    display: inline;
    margin: 0;
    padding: 0;
}


.meta li {
    display: inline;
    list-style: none;
    padding-left:5px;
    padding-right:5px;
    border-left : 1px solid #999;
}


#commentform {
    background: #4d4d4d;
    padding:10px;
}


#commentform p {
    padding:5px;
    margin:0px;
}




#commentform input, #commentform textarea {
    background: url(images/input_bg_darkfire.gif);
    border: 1px solid #333;
    font: 1em Tahoma, Arial, Serif;
    padding-left: 2px;
}


#commentform textarea {
    width: 90%;
    padding-left: 2px;
}




/* =====| SIDE MENU |========== */




#menu {
    position: absolute;
    height:100%;
    top: 100px;
    margin: 0px 0px 20px 5px;
    padding: 20px;
    width: 250px !important;
    width /**/: 290px; /* for IE5/Win */
}


#menu form {
    margin: 0 0 0 10px;
}


#menu input {
    background: url(images/input_bg_darkfire.gif) #333;
    border: 1px solid #333;
    font: 60% Tahoma, Arial, Serif;
    padding-left: 2px;
}




#menu ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}


#menu ul li {
    font: 140% Tahoma, Arial, Serif;
    margin-bottom: 15px;
    color: #ffffff;
    text-transform: lowercase;
}


#menu ul ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: left;
}


#menu ul ul li {
    letter-spacing: 0;
    margin: 0;
    padding-left: 10px;
    font: 60% Tahoma, Arial, Serif;
}


#menu ul ul li a {
    color: #ffbf00;
    text-decoration: none;
}


#menu ul ul li a:hover {
    color: #ff7f00;
}




/* =====| CALENDAR |========== */




#wp-calendar {
    empty-cells: show;
    font-size: 70%;
    margin: 0px;
    width: 180px;
}


#wp-calendar #next a {
    padding-left: 5px;
    text-align: center;
    border:0;
}


#wp-calendar #prev a {
    padding-right: 5px;
    text-align: center;
    border:0;
}


#wp-calendar a {
    display: block;
    text-decoration: none;
}


#wp-calendar a:hover {
    background: #ffffff;
    color: #ff7f00;
}


#wp-calendar caption {
    color: #fff;
    font: 100% Tahoma, Arial, Serif;
    padding-top:10px;
    text-align: center;
    text-transform: uppercase;
}


#wp-calendar td {
    color: #b2b2b2;
    font: normal 80% Tahoma, Arial, Serif;
    text-align: center;
}


#wp-calendar #today {
    border: 1px solid #ffffff;
}


#wp-calendar th {
    color: #fff;
    text-transform: uppercase;
    font-weight:normal;
    text-align: center;
}

Alles anzeigen

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

mat

Also wenn ich diese Zeilen entferne ist der Inhalt der Sidebar zwar wieder in der Table, allerdings ist er gute 100px zu weit unten...

Zeilen entfernt (rot geschrieben):

CSS

/* =====| SIDE MENU |========== */




#menu {
[COLOR=Red]position: absolute;[/COLOR]
    height:100%;
    top: 100px;
    margin: 0px 0px 20px 5px;
    padding: 20px;
[COLOR=Red]width: 250px !important;
width /**/: 290px;[/COLOR] 


}


#menu form {
    margin: 0 0 0 10px;
}


#menu input {
    background: url(images/input_bg_darkfire.gif) #333;
    border: 1px solid #333;
    font: 60% Tahoma, Arial, Serif;
    padding-left: 2px;
}




#menu ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}


#menu ul li {
    font: 140% Tahoma, Arial, Serif;
    margin-bottom: 15px;
    color: #ffffff;
    text-transform: lowercase;
}


#menu ul ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: left;
}


#menu ul ul li {
    letter-spacing: 0;
    margin: 0;
    padding-left: 10px;
    font: 60% Tahoma, Arial, Serif;
}


#menu ul ul li a {
    color: #ffbf00;
    text-decoration: none;
}


#menu ul ul li a:hover {
    color: #ff7f00;
}

Alles anzeigen

redcat63

Hallo mat,

Dein Code:

Zitat

#menu {
[COLOR=red]position: absolute;[/COLOR]
height:100%;
top: 100px;
margin: 0px 0px 20px 5px;
padding: 20px;
[COLOR=red]width: 250px !important;
width /**/: 290px;[/COLOR]
}

Alles anzeigen

M.E. dürfte die Zeile [COLOR=#ff0000]position: absolute; [/COLOR][COLOR=black]nichts mit Deinem Problem zu tun haben.[/COLOR]

Ändere dafür mal die folgenden Angaben:
margin: 0px 0px 20px 5px;
padding: 20px;

Meine Erfahrung zeigen, dass der IE die left-und right werde merkwürdigerweise verdoppelt.
Teste deswegen mal folgendes, allerdings ohne Gewähr ;-) :

margin: 0px 0px 10px 5px;
padding-left: 10px;
padding-top:20px;
padding-right:10px;

margin: 0px 0px 20px 5px !important; /* versteht der ie nicht */
padding: 20px !important; /* versteht der ie nicht */

Probiere einfach mal etwas herum.

Und noch ein Tipp:
Teste Deine Seite auch mal im Opera, da kann man dann noch ganz andere tolle Sachen erleben.... ;-)

Viel Glück
Elke

mat

Hoi Elke,

danke für die Tipps. Habe die Seite eben im Opera aufgerufen und es hat alles funktioniert :)

Im Moment funktioniert sie im Firefox und im Opera... Der IE zickt rum...

Ich werde noch bischen daran drehen, bis jetzt leider erfolglos :(

Grüsse,
Matthias

marX

Ist der IE auch im Standards Compliance Mode? In diesem verhält er sich deutlich standardkonformer (ab Version 6).

Gib dazu mal "javascript:alert(document.compatMode)" in die Adressleiste des IE ein.
Erscheint hier "Back Compat", dann solltest du was ändern. Zum Beispiel muss eine korrekte DoCTYPE-Angabe in der 1. Zeile des ausgeleiferten Quellcodes stehen (manche Themes haben am Anfang sowas wie  stehen, das ist Gift für den IE)

mat

Als ich "javascript:alert(document.compatMode)" in die Adressleiste eingegeben habe als ich bei google.ch war, kam "BackCompat".

Gebe ich es auf meiner Seite ein erhalte ich "CSS1Compat" ... :mrgreen:

marX

Was Google für nen DOCTYPE einsetzt ist mir ziemlich egal. :mrgreen:

Schenkst du uns dann mal ne URL zu deinem Blog?

mat

Wochenberichte

das ist die Page :)

danke übrigens für euren einsatz, wirklich nett von euch :)

marX

Zitat von mat

Wochenberichte
das ist die Page :)

Okay. Dann wolln wir mal. :-)
Ich würde als erstes mal explizite top- und left-Vorgaben machen (left fehlt dir teilweise), eventuell müssen die margins angepasst werden.

Falls du damit zu keinem Ergebnis kommst, würde ich mal versuchen, dem #content statt "position:relative" ein "float:right" zu geben. Das #menu dementsprechend position:static (oder die Positionsangabe weglassen).
Generell würde ich eher versuchen, ein floatendes Design zu entwickeln als ein absolut/relativ positioniertes. Ist einfach sauberer und besser skalierbar.

mat

Im Moment habe ich die Änderungen teilweise gemacht. Nun sieht es zwar gleich aus wie beim Firefox, allerdings ist es sehr weit nach unten gerutscht...

Mit dem top: ... und dem high: ... konnte ich nix verändern... Da zeigte sich keine Reaktion :)

marX

high: :confused: Hab ich doch gar nicht geschrieben.

Aber so sieht das doch schon nicht schlecht aus. Lass beim Menü die float- und top-Angaben weg, beim Content position und top weg, dafür "float:right;" hin, dann sollte es passen.

Übrigens, für solche Spielereien eignet sich die FF-Erweiterung Firebug hervorragend. Da kannst du das CSS "live" editieren und siehst die Änderungen sofort. Am Ende kopierst du die Änderungen noch in deine style.css und freust dich. :-D

mat

Moin marX,

also hab die Angaben geändert. Nun wurde leider der ganze Text nach rechts verschoben :) und im IE ist der Kalender immer noch zu weit unten ;)

Hab es mal so gelassen, dass du es dir selbst ansehen kannst ;)

Werde mir dieses Firebug mal saugen, danke ;)

marX

Spiel mal noch ein wenig mit den margin-Angaben der Container #content (vor allem margin rechts) und #menu.
#menu ist ingesamt viel zu breit, das siehst du aber schön mit Firebug (Inspect Element). Gib dem #menu mal eine feste Breite oder passe die margin-Angaben an, dann sollte auch im IE der Kalender wieder nach oben rutschen.

mat

Alles klar, danke dir !

Melde mich dann später ;-)

Have a nice day :-)

mat

Habs geschafft !! :mrgreen:

Danke für die Hilfe, vor allem der Tipp mit dem Firebug war genial !

Vielen Dank nochmal und eine schöne Woche wünsch ich euch !

Liebe Grüsse
Matthias

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Problem mit der Sidebar

Jetzt mitmachen!