CMS Made Simple Forums

Content management as it is meant to be
https://forum.cmsmadesimple.org/

IE7 mag mein Layout nicht

https://forum.cmsmadesimple.org/viewtopic.php?t=8085

Page 1 of 1

IE7 mag mein Layout nicht

Posted: Mon Nov 13, 2006 7:46 pm
by Loomis
Hallo!

Ich habe mir meine Seite www.slashnburn.de/cms nun mal im IE7 angesehen und das Layout ist dort komplett kaputt.

Im IE6 und im FF passt es (vgl. die Bilder).

Im einzelnen sind die Fehler beim IE7:
  • Der Footer ist nicht unten sondern links in der Mitte
  • Das Menü links bei "Setliste" hat nen ungenauen Rand
  • Der Background wird unten nicht richtig dargestellt.
Meine CMSMS-Version ist 1.0.2.

Hier ist mein Layout CSS:

Code: Select all

/* A CSS Framework by Mike Stenhouse of Content with Style, adapted to CMSMS by Daniel Westergren */

/* SITE SPECIFIC LAYOUT */
    body {
        margin: 0;
        padding: 1em;
        text-align: center;
    }
    div#pagewrapper {
        margin: 0 auto;
        padding: 0;
        text-align: left;
        width: 860px;

    }
    #container {
	position: relative;
	margin: 0;
        background:url(uploads/images/Hintergrund_inhalt_gross_1.jpg);
    }
    
    /* HEADER */
        div#header {
            background:  url(uploads/images/Hintergrund.jpg);
            margin: 0;
            padding: 0;
            height: 184px;
            text-align: left;
        }
        div#header h1 a {
            display: block;
            height: 80px;
            text-indent: -700em;
            width: 198px;
            margin: 0;
            padding: 0;
            text-decoration:none;
        }
    /* END HEADER */
    
    
    /* CONTENT */
        div#content {
        }

        
        /* MAIN */
            div#main {

            }
        /* END MAIN */
        
        /* SUB */
            div#sub {
                
            }
        /* END SUB */
        
    /* END CONTENT */
    
    
    /* FOOTER */
        div#footer {

        }

       div#footer p {
            font-size:0.8em;
            margin:0px;
            padding:5px;
            text-align:center;
        }
    /* END FOOTER */
/* END LAYOUT */



div.breadcrumbs {
   padding: 1em 0;
   text-align: left;
   font-size: 90%;
   margin: 0 1em;
   border-bottom: 1px dotted #000;
}

div.flags {
  float: right;
  width: 18px;
  padding: 1em 0;
  text-align: right;
  margin: 0 1em 0 0;
}

div.left49 {
  float: left;
  width: 49%;
  }

div.right49 {
  float: right;
  width: 49%;
  text-align: right;
  }


td.head
{
width: 240px;
height: 18px;
font-family: verdana;
font-size: 10px;
font-weight: bold;
color: #ccddee;
background-color: #1e598b;
}

tr.normal
{
font-weight:normal;
}

td.num
{
width:210px;
border-bottom:1px solid #203b59;
padding-left:5px;

}

td.track
{
width:230px;
border-bottom:1px solid #203b59;
padding-left:5px;

}

td.artist
{
width:230px;
border-bottom:1px solid #203b59;
padding-left:5px;

}

tr.hover
{
background-color:#D3D3D3;
font-weight:bold;

}
Kann mir jemand sagen, wo es hakt? Falls ihr noch mehr Angaben oder Stylesheets braucht gebt Bescheid.

Vielen Dank schon mal, ich bin ohne euch aufgeschmissen, da ich ein CMS/CSS Newbie bin...

[gelöscht durch Administrator]

Re: IE7 mag mein Layout nicht

Posted: Tue Nov 14, 2006 10:45 am
by cyberman
Loomis wrote: Ich habe mir meine Seite www.slashnburn.de/cms nun mal im IE7 angesehen und das Layout ist dort komplett kaputt.
Ich hab mich schon gefragt, wann wir diese Frage hier das erste Mal sehen  ;D ...
Im einzelnen sind die Fehler beim IE7:
Hast du etwas an dem Bild snb_ie7.jpg verändert? Ich kann es weder sehen noch herunterladen ... gestern ging es IMHO noch.

Was die Fehler betrifft, vergleich mal die mitgelieferten CMSms-Stylesheets mit deinem (Stichwort clear:) ;) ...

PS: Es scheint (auf der Startseite) noch ein JavaScript zu fehlen. Ich bekomme in der Script-Konsole die Fehlermeldung, dass die Funktion "Bilder" nicht definiert ist.

Re: IE7 mag mein Layout nicht

Posted: Tue Nov 14, 2006 2:15 pm
by Loomis
Vielen Dank, Du hast mir sehr geholfen!

Das Layout passt nun im IE7. Ich habe noch die clear-Anweisung eingefügt:

Code: Select all

/* FOOTER */
div#footer {
    clear:both;
}
Das Bild snb_ie7.jpg habe ich gestern nochmal gelöscht und neu hochgeladen, weil es zu groß war. Bei mir hier wird es angezeigt (anderer PC als gestern), es müsste also gehen, vielleicht musst Du den Cache löschen.

Das mit dem Javascript stimmt, da wollte ich noch was machen. Und zwar einen Hover-Effekt, so wie hier bei dem großen Bild:
http://www.duessel-computer.de/DesertFo ... index.html

Ich verstehe aber im CMSMS nicht so ganz, was ich denn nun wo hinschreiben muss und ob ich da so einfach aufs DOM zugreifen kann wie ohne CMS.

Hier ist das JS, das ich benutzen wollte:

Code: Select all

var yourImages = new Array;

yourImages[0] = new Image;
yourImages[0].src = "uploads/images/Gruppenbild.png";
yourImages[1] = new Image;
yourImages[1].src = "uploads/images/Gruppenbild_Andrea.png"
yourImages[2] = new Image;
yourImages[2].src = "uploads/images/Gruppenbild_Simon.png";
yourImages[3] = new Image;
yourImages[3].src = "uploads/images/Gruppenbild_Mario.png";
yourImages[4] = new Image;
yourImages[4].src = "uploads/images/Gruppenbild_David.png";
yourImages[5] = new Image;
yourImages[5].src = "uploads/images/Gruppenbild_Pukle.png";
yourImages[6] = new Image;
yourImages[6].src = "uploads/images/Gruppenbild_Stone.png";

function Bilder(index)
{
    document.grouppic.src = yourImages[index].src;
}
und hier der entsprechende HTML-Code, der im CMS in meinem Content liegt:

Code: Select all

<div style="TEXT-ALIGN: center">

<img style="BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none" height="310" alt="Gruppenbild" width="632" usemap="#Gruppenbild" name="grouppic" src="uploads/images/Gruppenbild.png" /> 

<map id="Gruppenbild" name="Gruppenbild">

<area onmouseover="Bilder(1)" title="Andrea" onclick="steckbriefe.html" onmouseout="Bilder(0)" target="_self" href="index.php/home/bandmitglieder#Andrea" coords="128,0,247,100" shape="RECT" />

<area onmouseover="Bilder(2)" title="Simon" onclick="steckbriefe.html" onmouseout="Bilder(0)" target="_self" href="index.php/home/bandmitglieder#Simon" coords="385,2,504,100" shape="RECT" />

<area onmouseover="Bilder(3)" title="Mario" onclick="steckbriefe.html" onmouseout="Bilder(0)" target="_self" href="index.php/home/bandmitglieder#Mario" coords="0,104,119,203" shape="RECT" />

<area onmouseover="Bilder(4)" title="David" onclick="steckbriefe.html" onmouseout="Bilder(0)" target="_self" href="index.php/home/bandmitglieder#David" coords="257,104,377,204" shape="RECT" />

<area onmouseover="Bilder(5)" title="Pukle" onclick="steckbriefe.html" onmouseout="Bilder(0)" target="_self" href="index.php/home/bandmitglieder#Pukle" coords="130,207,247,309" shape="RECT" />

<area onmouseover="Bilder(6)" title="Stone" onclick="steckbriefe.html" onmouseout="Bilder(0)" target="_self" href="index.php/home/bandmitglieder#Stone" coords="385,207,503,308" shape="RECT" />

<area target="inhalt" alt="" coords="0,0,0,0" shape="RECT" />

</map>

</div>
Muss das JS dann in einen global content block?

Re: IE7 mag mein Layout nicht

Posted: Tue Nov 14, 2006 2:52 pm
by cyberman
Loomis wrote: Ich verstehe aber im CMSMS nicht so ganz, was ich denn nun wo hinschreiben muss und ob ich da so einfach aufs DOM zugreifen kann wie ohne CMS.
Ist gaaaaanz einfach - da das Template von Smarty verarbeitet/geparst wird, Smarty aber kein JavaScript versteht, muss das Javascript mit dem {literal}-Tag wie folgt "maskiert" werden.

Code: Select all

{literal}
<__script__ type="text/javascript">
var yourImages = new Array;

yourImages[0] = new Image;
yourImages[0].src = "uploads/images/Gruppenbild.png";
yourImages[1] = new Image;
yourImages[1].src = "uploads/images/Gruppenbild_Andrea.png"
yourImages[2] = new Image;
yourImages[2].src = "uploads/images/Gruppenbild_Simon.png";
yourImages[3] = new Image;
yourImages[3].src = "uploads/images/Gruppenbild_Mario.png";
yourImages[4] = new Image;
yourImages[4].src = "uploads/images/Gruppenbild_David.png";
yourImages[5] = new Image;
yourImages[5].src = "uploads/images/Gruppenbild_Pukle.png";
yourImages[6] = new Image;
yourImages[6].src = "uploads/images/Gruppenbild_Stone.png";

function Bilder(index)
{
    document.grouppic.src = yourImages[index].src;
}
</__script>
{/literal}

Code: Select all

<div style="TEXT-ALIGN: center">
CMSms ist ein xhtml-CMS. Für gültiges xhtml sollten die Styles allesamt klein geschrieben werden. Noch besser ist es, wenn du die Styles komplett in die CSS schreibst (Stichwort Trennung von Inhalt und Layout) und die divs nur via ID ansprichst.

Code: Select all

<img style="BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none" height="310" alt="Gruppenbild" width="632" usemap="#Gruppenbild" name="grouppic" src="uploads/images/Gruppenbild.png" />
Ähmm, style="border: none" ist viel kürzer und sollte es auch tun  ;).
Muss das JS dann in einen global content block?
Kann man machen, muss man aber nicht, da es praktisch eine zusätzliche Datenbankabfrage bedeutet. Wichtig ist nur die Maskierung.

Re: IE7 mag mein Layout nicht

Posted: Tue Nov 14, 2006 3:01 pm
by Loomis
Genial einfach, einfach genial!!

Ich danke Dir vielmals, nun geht es endlich.  :)

Um die anderen Sachen werde ich mich mal kümmern.

Das Problem war eben, dass die ursprüngliche Seite ohne CMS von jemand anderem erstellt wurde und ich nun praktisch nach und nach das ganze auf das CMS umstelle. Daher hat es sicher noch mehr solcher Unsauberheiten.

Re: IE7 mag mein Layout nicht

Posted: Tue Nov 14, 2006 3:06 pm
by cyberman
Loomis wrote: Um die anderen Sachen werde ich mich mal kümmern.
z. Bsp. am Guestbook - da stimmt irgend etwas mit der Codierung nicht  :) ...

Re: IE7 mag mein Layout nicht

Posted: Wed Nov 29, 2006 9:38 am
by hinti
Hallo,
habe meine Seite mit dem Tag clear:both; angepasst und es wird nun auch in IE7 wieder richtig angezeigt, leider habe ich das Problem, dass ich nun kein Hintergrundbild mehr habe bei der Navigation

Hier der IE7
Image

Und Hier der FF

Image

Hier der Code für das Hintergrundbild hinter dem Menu Vert

Code: Select all

/* A CSS Framework by Mike Stenhouse of Content with Style, adapted to CMSMS by Daniel Westergren */

/* SITE SPECIFIC LAYOUT */
    body {
        margin: 0;
        padding: 1em;
        text-align: center;
    }
    div#pagewrapper {
        margin: 0 auto;
        width: 800px;
        padding: 0;
        text-align: left;

    }
    #container {
	position: relative;
	margin: 0;
    }
    
    /* HEADER */
        div#header {
            margin: 0;
            padding: 0;
            height: 125px;
          
            text-align: left;
            
        }
      
    /* END HEADER */
    
    
    /* CONTENT */
        div#content {
       background: url(/uploads/images/links1.jpg) no-repeat;
        }
        
        /* MAIN */
            div#main {

            }
        /* END MAIN */
        
        /* SUB */
            div#sub {
               
            }
        /* END SUB */
        
    /* END CONTENT */
    
    
    

/* FOOTER */
        div#footer {
        clear:both;
        }

       div#footer p {
            font-size:0.8em;
            margin:0px;
            padding:0px;
            text-align:center;
        }
    /* END FOOTER */
/* END LAYOUT */



div.breadcrumbs {
   padding: 1em 0;
   text-align: left;
   font-size: 90%;
   margin: 0 1em;
   border-bottom: 1px dotted #000;
}

div.flags {
  float: right;
  width: 18px;
  padding: 1em 0;
  text-align: right;
  margin: 0 1em 0 0;
}

div.left49 {
  float: left;
  width: 49%;
  }

div.right49 {
  float: right;
  width: 49%;
  text-align: right;
  }
Kann mir jemand helfen, den Fehler zu finden.

Danke

Hinti

Re: IE7 mag mein Layout nicht

Posted: Tue Dec 12, 2006 6:19 pm
by cyberman
Kann es sein, dass von der CSS noch etwas fehlt? Wo genau definierst du das Hintergrundbild?
All times are UTC
Page 1 of 1

Powered by phpBB® Forum Software © phpBB Limited