✔ CSS IE Problem

powerjams · 9. Juli 2008

Ich bin noch ziemlich neu in der CSS Welt und arbeite gerade an einer Homepage. Da ich immer mit Firefox unterwegs bin, habe ich den IE stark vernachlässigt. Da die Mehrheit aber mit ihm surft, dachte ich mir mal nachzuschauen wie es dort ausschaut.

Wie ihr euch schon denken könnt nicht so wie es soll. Ich habe schon viel gesurft und probiert. Ich hoffe ihr könnt mir helfen.

http://home.arcor.de/tobisagt/neu/index.htm

Das ist die Homepage, schaut sie euch mal bitte in beiden Browsern an. Vielleicht findet ihr das Problem, ich komme da auf jedenfall ohne fremde Hilfe nicht mehr weiter. Verbesserungsvorschläge nehme ich auch gerne in Kauf.

leon warnke · 9. Juli 2008

Hi,

würde mal ganz spontan sagen: Spiel mal ein bisschen mit den Breitenangaben der Navi rum. Hatte ein ähnliches Problem zwischen Safari und FF und konnte das damals so klären. Vieleicht hast du das ja aber auch schon gemacht?!

Finde das Design übrigens sehr schön!

powerjams · 10. Juli 2008

Hi Leon, danke für die Antwort!

Ich habe schon einiges probiert, damit lässt sich das Problem denke ich auch nicht lösen

Freut mich aber das dir die Seite gefällt!

Quaese · 10. Juli 2008

Hi,

ich habe das CSS soweit angepasst - sieht zumindest im IE 6 und 7 wie im Firefox aus.

Erklärungen schenke ich mir, da es einiges war was zu ändern war. Kannst dich ja mal durch arbeiten - wirst das wichtigste schon herausfinden.

Code:

<html>
<head>
<title>180 Grad Paderborn</title>
<style type="text/css">
  <!--
body {
text-align:center;
background-color: f5f5f5;
margin-top: 0px;
margin-bottom: 0px;  }

#wrapper {
margin:0 auto;
text-align:left;
width:800px; }

#top { }

#topLeft {
background: url(bilder/back_left.jpg);
float: left;
width: 100px;
height: 110px;}

#topCenter {
background: url(bilder/back.jpg);
float: left;
width: 600px;
height: 110px; }

.topCenterNavi {
padding: 74px 0 0 516px; }

#topRight {
background: url(bilder/back_right.jpg);
float: right;
width: 100px;
height: 110px; }

#center{ }

#centerLeft {
float: left;
width: 100px;
height: 150px;
background-color: #f5f5f5;}

#centerCenter {
margin-top: 10px;
margin-left: 20px;
float: left;
width: 180px;
height: 140px;
background-color: #f5f5f5; }

.nextEvent {
line-height: 8pt;
font-family: Arial;
font-size: 8pt;}

.nextEvent .Text {
color: 999999; }

.nextEvent .Title {
color: 777777; }

.nextEvent .Date {
color: 000000;
font-weight: bold; }

#centerCenter2 {
background-image: url(bilder/pic_01.jpg);
float: left;
width: 400px;
height: 150px;
background-color: #f5f5f5;}

#centerRight {
float: right;
width: 100px;
height: 150px;}


/* ***** [START - Navigation] ************************************* */
.clearDiv{ font-size: 1px;
           line-height: 0em;
           height: 0;
           clear: both;}

#navi{ }
#naviLeft{ width: 100px;
						 height: 24px;
             float: left;
						 background: url(bilder/back_left.jpg) 0 0 repeat-y;}
#naviRight{ width: 100px;
						  height: 24px;
              float: right;
						  background: url(bilder/back_right.jpg) 0 0 repeat-y;}
#naviCenter{ background: url(bilder/navi/top.jpg) 0 0 repeat-x;
							 padding: 3px 0 0;}

.naviCenterContainer a{ float:left;
	                        display: block;
	                        width: 100px;
	                        height: 20px;}

.naviNews_Active a{
background-image: url(bilder/navi/news.jpg);}

.naviNews a{
background-image: url(bilder/navi/news_2.jpg);}

.naviNews a:hover{
background-image: url(bilder/navi/news_hover.jpg);}

.naviRueckblicke_Active a{
background-image: url(bilder/navi/rueckblicke.jpg);}

.naviRueckblicke a{
background-image: url(bilder/navi/rueckblicke_2.jpg);}

.naviRueckblicke a:hover{
background-image: url(bilder/navi/rueckblicke_hover.jpg);}

.naviUeberuns_Active a{
background-image: url(bilder/navi/ueberuns.jpg);}

.naviUeberuns a{
background-image: url(bilder/navi/ueberuns_2.jpg);}

.naviUeberuns a:hover{
background-image: url(bilder/navi/ueberuns_hover.jpg);}

.naviDasteam_Active a{
background-image: url(bilder/navi/dasteam.jpg);}

.naviDasteam a{
background-image: url(bilder/navi/dasteam_2.jpg);}

.naviDasteam a:hover{
background-image: url(bilder/navi/dasteam_hover.jpg);}

.naviGaestebuch_Active a{
background-image: url(bilder/navi/gaestebuch.jpg);}

.naviGaestebuch a{
background-image: url(bilder/navi/gaestebuch_2.jpg);}

.naviGaestebuch a:hover{
background-image: url(bilder/navi/gaestebuch_hover.jpg);}

.mygaestebuchTextKursiv {
color: bbbbbb;
font-size: 7pt;}

.naviLinks_Active a{
background-image: url(bilder/navi/links.jpg);}

.naviLinks a{
background-image: url(bilder/navi/links_2.jpg);}

.naviLinks a:hover{
background-image: url(bilder/navi/links_hover.jpg);}
/* ***** [ENDE  - Navigation] ************************************* */


/* ***** [START - Content] **************************************** */
#content {
background-image: url(bilder/background.jpg); }

#contentTopLeft {
background: url(bilder/back_left.jpg);
float: left;
width: 100px;
height: 18px;
background-color: none; }

#contentTopCenter {
background: url(bilder/back_top.jpg);
float: left;
width: 600px;
height: 18px;}

#contentTopRight {
background: url(bilder/back_right.jpg);
float: right;
width: 100px;
height: 18px;}

#contentPaddingTop {
padding: 20 0 0 0px; }

#contentBox {
padding: 0 120 10 120px;
font-family: Arial;
font-size: 8pt;
font-weight: none;
color: 666666; }

#contentStartLeft {
float:left;
width: 180px;
text-align: left; }


#contentStartRight {
padding-left: 200px;
width: 360px;
min-height: 140px; }
* html #contentStartRight{ padding-left: 18px;}

#contentNewsPost { }

#contentNewsLeft {
float:left;
width: 180px; }

#contentLeftBackTop {
background-image: url(bilder/newsback_top.jpg);
height: 6px;}

#contentLeftBackMiddle {
padding-left: 6px;
padding-right: 6px;
background-image: url(bilder/newsback_middle.jpg);}

#contentLeftBackBottom {
background-image: url(bilder/newsback_bottom.jpg);
height: 6px;}

#contentNewsRight {
margin-left: 200px;
width: 360px;
min-height: 70px; }

.contentNewsText {
font-family: Arial; }

.contentNewsText .Headline {
height: 3px;
color: 333333;
font-weight: bold;
text-align: right; }

.contentNewsText .Date {
font-size: 8pt;
font-weight: none;
text-align: right; }

#contentGaestebuchRight {
margin-left: 200px;
width: 360px;
min-height: 30px; }

#contentBottomLeft {
background: url(bilder/back_left.jpg);
float: left;
width: 100px;
height: 18px;
background-color: none; }

#contentBottomCenter {
background: url(bilder/back_bottom.jpg);
float: left;
width: 600px;
height: 18px;
background-color: none; }

#contentBottomRight {
background: url(bilder/back_right.jpg);
float: right;
width: 100px;
height: 18px;
background-color: none; }

/* Boxen anpassen*/
#contentLeftBackTop ,
#contentLeftBackBottom  { line-height: 0em;
													font-size: 1px;
									 				background-repeat: none !important;}
/* ***** [ENDE  - Content] **************************************** */


/* ***** [START - Links] ****************************************** */
a:link {
font-family:Arial, sans-serif;
color: 666666;
font-size: 9px;
text-decoration: none;
font-weight: normal;
font-style: normal;
border: 0px;  }

a:visited {
font-family:Arial, sans-serif;
color: 666666;
font-size: 9px;
text-decoration: none;
font-weight: normal;
font-style: normal; }

a:hover {
font-family:Arial, sans-serif;
color: E8BA00;
font-size: 9px;
text-decoration: none;
font-weight: normal; }

a:active {
font-family:Arial,sans-serif;
color: E8BA00;
font-size: 9px;
text-decoration: none;
font-weight: normal; }

/*Text Formatierungen*/

.h1 {
font-family: Arial;
font-size: 9pt;
font-weight: none;
color: 666666; }

.h2 {
font-family: Arial;
font-size: 8pt;
font-weight: bold;
text-decoration: none;
color: 666666; }

.textBold {
color: 333333;
font-weight: bold; }

.textfeld {
width: 168px;
margin-top: 2px;
padding-left: 4px;
font-family: Arial;
font-size: 8pt;
color: 666666;
background-color: ffffff;
border-color: f5f5f5;
border-left: none;
border-top: none;
border-right: none;
border-bottom: none; }
/* ***** [ENDE  - Links] ****************************************** */
 //-->
</style>
</head>
<body>
  <div id="wrapper">
      <div id="top">
          <div id="topLeft"></div>
              <div id="topCenter">

                  <div class="topCenterNavi">
                  <a href="index.php" title="Startseite"><img src="bilder/navi/startseite.jpg" border="0"></a>
                  <a href="kontakt.php" title="Kontakt"><img src="bilder/navi/kontakt.jpg" border="0"></a>
                  <a href="impressum.php" title="Impressum"><img  src="bilder/navi/impressum.jpg" border="0"></a>
                  </div>
              </div>
          <div id="topRight"></div>
      </div>

      <div id="center">
          <div id="centerLeft">&nbsp;</div>
          <div id="centerCenter">
              <div class="h1">Nächste Veranstaltung:</div>
              <img src="bilder/center_line.jpg" style="display: block; margin-bottom: 12px;">
              <div class="nextEvent" style="line-height: 8pt;">
                  <span class="Title">Datum:</span>
                  <span class="Date">Hier steht das Datum</span><br>
                  <span class="Title">Thema:</span>
                  <span class="Text">Hier wird das Thema stehen</span><p>
                  <span class="Title">Redner:</span>
                  <span class="Text">Hier wird der Redner stehen</span><br>
                  <span class="Title">Musik:</span>
                  <span class="Text">Hier wird der Liveact stehen</span></p>
              </div>
          </div>
          <div id="centerCenter2">&nbsp;</div>
          <div id="centerRight">&nbsp;</div>
          <div class="clearDiv">&nbsp;</div>
      </div>



      <div id="navi">
          <div id="naviLeft">&nbsp;</div>
          <div id="naviRight">&nbsp;</div>

          <div id="naviCenter">

              <div class="naviCenterContainer">
                  <span class="naviNews">
                      <a href="news.php"></a>
                  </span>
                  <span class="naviRueckblicke">
                      <a href="rueckblicke.php"></a>
                  </span>
                  <span class="naviUeberuns">
                      <a href="ueberuns.php"></a>
                  </span>
                  <span class="naviDasteam">
                      <a href="dasteam.php"></a>
                  </span>
                  <span class="naviGaestebuch">
                      <a href="gaestebuch.php"></a>
                  </span>
                  <span class="naviLinks">
                      <a href="links.php"></a>
                  </span>
              </div>
          </div>
          <div class="clearDiv">&nbsp;</div>
      </div>


          <div id="content">
             <div id="contentPaddingTop"></div>
             <div id="contentBox">
                <div id="contentStartLeft">

                    <div id="contentLeftBackTop"></div>
                        <div id="contentLeftBackMiddle">
                            <span class="h180">180 Grad</span>. Hinter diesem Namen verbirgt sich
                            eine Veranstaltungsserie der Christlichen Gemeinschaft e.V.
                            Paderborn. Mit unser "Ein Gottesdienst der etwas anderen Art"
                            Reihe möchten wir Sie einladen, Gott unmittelbar zu erfahren.
                        </div>
                    <div id="contentLeftBackBottom"></div>
                </div>
                <div id="contentStartRight">
                    <div class="h180">Die letzten Neuigkeiten</div><p>
                    <span class="h180">Heute</span> - Newseintrag Nummer 01<br>
                    <span class="h180">17.04.08</span> - Newseintrag Nummer 02<br>
                    <span class="h180">02.10.08</span> - Newseintrag Nummer 03<br>
                    <span class="h180">23.08.08</span> - Newseintrag Nummer 04<br>
                    <span class="h180">12.05.08</span> - Newseintrag Nummer 05<br>
                </div>
             </div>
	          <div class="clearDiv">&nbsp;</div>
          </div>

          <div id="contentBottomLeft"></div>
          <div id="contentBottomCenter"></div>
          <div id="contentBottomRight"></div>
      </div>
  </div>
</body>
</html>

Die Pfade zu den Grafiken im CSS habe ich angepasst, musst du wieder rückgängig machen.

Ciao
Quaese

powerjams · 12. Juli 2008

@ Quaese

Vielen Dank für deine große Mühe! Soviel hätte ich jetzt nicht erwartet

Ich habe hier in Moment nicht die Möglichkeit es im IE 6 und höher zu testen da ich gerade nicht daheim in und hier nur nen Mac zur Verfügung habe. In IE 5 sieht es nicht wirklich gut aus, im Firefox aber schon.

Ich teste es zu Haus nochmal. Sage dann nochmal bescheid.
Vielen Dank nochmal.

- Tobi

✔ CSS IE Problem

powerjams

Mitglied

leon warnke

Mitglied

powerjams

Mitglied

Quaese

Moderator

powerjams

Mitglied

Neue Beiträge