Margin/Padding Problem! Template..

joker66

Hallo Wordpresser!

Ich arbeite seit ein paar Tagen ein einer neuen Homepage die ich mit Wordpress realisiere(ursprünglich um zu testen in wie weit man wordpress mittlerweile als alternativen "cms-ersatz" nehmen könnten). Dazu benutze ich ein Template was ich dann dementsprechend verändere und anpasse. Und bisher hat auch alles perfekt funktioniert, und ich finde immer mehr gefallen an wordpress.

Allerdings wie es ja immer ist, habe ich mich jetzt schon Stunden lang mit 2 "kleinen Bugs" aufgehalten und so langsam verzweifel ich wirklich..

Folgende Probleme..wie immer funktioniert natürlich alles perfekt in firefox und sieht auch genau so aus wie es soll. Das heißt wir sind wieder bei dem schönen Thema IE und dessen teils eigenwillige intapretationen :-D

Es geht um folgende Seite: Marriage Week » Die Idee

Und folgenden Code(style.css):

PHP

body {
    background: #333322;
    color: #222;
    font: normal 62.5% sans-serif;
    padding: 2% 0;
}


a {color: #642;}
a:hover {color: #963;}


big {font-size: 1.1em;}


h1,h2,h3 {color: #442; padding: 8px 0 2px;}


h1 {font: normal 2.4em Georgia, sans-serif;}
h1 a {text-decoration: none;}
h1 a:hover {text-decoration: underline;}


h2 {font: normal 1.6em Georgia, sans-serif;}
h3 {font: bold 1.2em Georgia, sans-serif;}
h4 {font: normal 1.2em Georgia, sans-serif;}


blockquote {
    background: url('img/quote.gif') no-repeat;
    display: block;
    font: normal 1.1em Georgia,serif;
    padding-left: 26px
}


form,table {margin-bottom: 1.2em;}
img {border: none;}
label {display: block;}
li {line-height: 1.5em;}
p {padding: 2px 0 10px;}
small,.small {font: normal 0.9em sans-serif;}
ul,ol {padding: 0 2em 1.2em;}


/* structure */
#wrapper {
    background: #CC071E url(img/wrapper.gif) no-repeat left bottom;
    margin: 0 auto;
    width: 762px;
}
#container {
    border-top: 6px solid #CC071E;
    font-size: 1.3em;
    line-height: 1.3em;
    margin: 0 auto; background: #FBF9F4;
    width: 750px;
}


/* header */
.title {
    background: #E2DED5;
}
.title h1 {
    font: normal 2.2em Georgia,"Trebuchet MS",sans-serif;
    padding: 10px 0 10px 18px;
}


.header {
    background: #DAD7C5 url(img/header.jpg) no-repeat left bottom;
    height: 220px;
}


/* navigation */
.navigation {
    background: #EAE7DF url(img/nav.gif) repeat-x; height: 41px;
    border-top: 1px solid #996;
}
.navigation ul {padding: 0; margin: 0;}
.navigation li {float: left; list-style: none;}
.navigation li a {
    background: #FFF url(img/nav.gif) repeat-x;
    border-right: 1px solid #C9C6B3;
    color: #553;
    display: block;
    font: bold 1em Tahoma,sans-serif;
    line-height: 41px;
    padding: 0 14px;
    text-align: center;
    text-decoration: none;
}
.navigation a:hover {
    background-position: left bottom;
    color: #221;
}
.navigation .current_page_item a {color: #331;}


/* main */
.main {background: #FFF url(img/main.gif) repeat-y;}


/* posts */
.post .descr {
    color: #630;
    font-size: 0.9em;
    margin: 2px 0 4px;
}
.post .info{
    border-top: 1px dashed #AAAA9A;
    color: #222;
    font-size: 0.9em;
    font-weight: bold;
    margin: 4px 0 8px;
    padding: 8px 0;
}
.post img {border: 2px solid #CCB; margin: 4px 0 30px 0;}
.post a img {border: 2px solid #CCB;}
.post a:hover img {border-color: #AA9;}


/* bottom */
.bottom {
    background: #E2DED5 url(img/bottom.gif) no-repeat left bottom;
    border-top: 1px solid #AA8;
    color: #444;
    padding: 14px 20px;
}
.bottom .left,.bottom .right {width: 49%;}


/* footer */
.footer {
    background: #CC071E;
    color: #EED;
    padding: 10px;
}
.footer .left {width: 66%;}
.footer .right {
    width: 33%;
    text-align: right;
}
.footer a {
    color: #FFF;
    text-decoration: none;
}
.footer a:hover {
    color: #FFF;
    text-decoration: underline;
}


/* misc */
.content {padding: 18px 20px;}
.right .content {padding: 12px 10px;}
.left {float: left;}
.right {float: right;}
.clear,.clearer {clear: both;} 
.clearer {font-size: 0;}
.col2 .left {width: 64%;}
.col2 .right {width: 33%;}


/* block list */
ul.block, .block ul {
    border-top: 1px dashed #BCBAAC;
    margin: 4px 0;
    padding: 0;
    width: 90%;
}
.block li {
    border-bottom: 1px dashed #BCBAAC;
    list-style: none;
}
.block li a,.block li em {
    color: #553;
    display: block;
}
.block li em {
    font-size: 0.9em;
    font-style: normal;
}
.block li a {
    padding: 4px 3%;
    text-decoration: none;
    width: 94%;
}
.block li a span {font-weight: bold;}
.block li a:hover {
    color: #553;
    background: #D2D0C0;
}


.right .block,.right .block li {border-color: #DCDACC;}
.right .block li a:hover {background: #F2F0EA;}


/* comments */
#commentlist li {
    margin-bottom: 1.5em;
    padding-bottom: 1em;
    border-bottom: 1px solid #700000;
}
#commentform {
    margin: 1em 0;
    width: 280px;
}


textarea.styled {width: 280px;}


.styled {
    font-size: 1.1em;
    background: #FCFCFC;
    border: 1px solid #C6C3C3;
    padding: 2px;
}
.styled:hover {
    background: #FFF;
    border: 1px solid #C6C3C3;
}
.styled:focus {
    background: #FFF;
    border: 1px solid #939793;
}
#commentform input {margin-bottom: 3px;}
.commentmetadata a {font-size: 1em; color: #666;}


/* calendar */
#wp-calendar {color: #A0A0A0;}


.col2 .right table caption {border-bottom-color:#000;}
.col2 .right table thead tr {
  border-bottom-color: #000;
  color: #A53512;
}
.col2 .right table th {border-bottom-color:#000;}
.col2 .right table td#today {
  border-color: #000;
  color: #A53512;
}
.col2 .right table td a {
  border-bottom-color: #000;
  background-color: #EDF3DE;
}


.col2 .right table tfoot {border-top-color: #000;}
.col2 .right table tfoot a {background: none;}


/* calendar
--------------------------------------------------*/
#wp-calendar {
  display: inline-table;
  border-collapse: collapse;
  width: 185px;
  margin: 0px 10px 0 10px;
  text-align: center;
}


.col2 .right table caption {
  margin: -5px 10px 0 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid;
  letter-spacing: 0.1em;
}


.col2 .right table thead tr {border-bottom:1px solid;}


.col2 .right table th {border-bottom:1px solid;}


.col2 .right table td {
  width: 225px; /* maximaize width; honestly, I don't know much about tables... */
  padding: 1px;
  font-size: 0.9em;
}


.col2 .right table td#today {
  padding: 0;
  border: 1px solid;
  font-size: 1em;
  font-weight: bold;
}


.col2 .right table td a {
  display: block;
  border-bottom: 1px solid;
  font-weight: bold;
  font-size: 1.15em;
}


.col2 .right table tfoot {border-top:1px solid;}
.col2 .right table tfoot a {
  border: none;
  font-weight: bold;
}
.col2 .right table tfoot #prev a {text-align:left;}
.col2 .right table tfoot #next a {text-align:center;}


#searchform {padding:10px;}

Alles anzeigen

Scrollt man jetzt mal etwas runter und guckt auf das Ende des Content Bereiches und dem Übergang in den "footer-Bereich". In Firefox wird ganz normal ein Abstand vom Bild zum RAnd des footers angezeigt, der in der style.css mit

Zitat

.post img {border: 2px solid #CCB; margin: 4px 0 30px 0;}

definiert ist..also 30px Abstand.

Schaut man sich das ganze jetzt im IE an, wird diese Definition anscheinend einfach ignoriert. Ich habe jetzt wirklich schon alles probiert (oder halt auch nicht), und ich finde einfach das Problem nicht das der IE anscheinend dort hat.

Und so ein ähnliches Problem gibt es auch mit dem Abstand zwischen der Überschrift im footer (Neuigkeiten) und zum oberen RAnd des footers. Der Abstand in Firefox ist richtig und im IE ist er viel größer(fast dopelt so groß). Vieleicht hängen diesen beide Probleme ja auch irgendwie zusammen, aber ich hab jetzt so langsam echt keinen Lösungsansatz mehr.

Bin wirklich sehr dankbar für jede Hilfe oder Tipp!

grussssss
Mark

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

Jeriko

Mal ins Blaue geraten, IE hat ja keine vernünftigen Entwicklerwerkzeuge: Probier mal overflow:auto; bei .col2, ob dann der Abstand des Bildes korrekt ist.

Gruß Jeriko

joker66

Danke jenko, aber overflow:auto hat bei col2 leider keinerlei Wirkung auf das Aussehen..

grussss
mark

spickzettel

Das erste Problem verschwindet, wenn man .entry eine Höhe gibt:

Code

.entry {height:1%;}

Das zweite Problem kann man beseitigen, wenn man .bottom eine Höhe gibt:

Code

.bottom {height:1%;}

codestyling

Zitat von Jeriko

... IE hat ja keine vernünftigen Entwicklerwerkzeuge...

So ganz richtig ist das nicht. Es gibt zumindest für den IE 7 die Internet Explorer Developer Toolbar, die ansatzweise das beherrscht, was FireBug für Mozilla kann (kein Debugger, aber immerhin Inspektion und Online Style Patching).

Ist zumindest besser, als gar nix.

joker66

WOW! Es klappt!! Vielen Vielen Dank Spickzettel!

Ist das reine Erfahrung oder gibts dafür auch eine logische Erklärung? :confused:

spickzettel

Überwiegend (leidvolle) Erfahrung. Ob man das logisch nachvollziehen kann, weiß ich nicht. Sicher werden sich die Programmierer was dabei gedacht haben :mrgreen:

joker66

Dann bin ich ja froh das jemand anders für mich diese "leidvollen Erfahrungen" gemacht hat.. :-?

Mir ist gerade noch eine Sache aufgefallen. Im Fotter wird der Abstand zum unteren Rand auch nicht richtig im IE angezeigt(NAch oben hin stimmt er jetzt ja dank deiner Lösung). Dort ist er um einiges größer! Hast du dafür auch so eine "einfache" Lösung parat?

Das wäre echt super! Ansonsten dürfen natürlich auch alle anderen Lösungen aufzeigen ;D

grussss
mark

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Margin/Padding Problem! Template..

Jetzt mitmachen!