Background-image im IE7 vor Content!

easyrieder · #1 10.04.08, 22:50

Hallo Liebe Typo3gemeinde!

Ich arbeite seit geraumer zeit an einem Projekt für das unternehmen meines Vaters und komme eigentlich sehr gut voran! Hatte schon einige Anfängerproblme mit Typoscript und TemplaVoila! auf dem ich die ganze Sache aufbaue, konnte sie aber bis jetzt immer selber lösen. Nun habe ich aber ein Problem was mich zum verzweifeln bringt. Vielleicht Banal jedoch find ich den Fehler einfach nicht :sad: Hoffe ihr könnt mir irgendwie behilflich sein

Thx im vorraus!

Der Content wird im Internet explorer 7 hinter dem unteren Background image angezeigt, und nur da! Im FF und Safari ist die darstellung so wie sie sein sollte!

Wirklich interessant daran ist das das Submenü links eben nicht hinter diesem Background image verschwindet. der Content Rechts schon!

Hier der link unter dem man das Problem sehen kann: Link

Wie man sieht liegt das menü darüber, der content jedoch darunter.

Der Css Code dazu ist aufgrund der vielen Templates leider etwas länger, content.css und Ie67.css sollten aber relavant sein:

IE67.css

Code:

ul#NavDarkCom {
    margin: 0 0 0 20px;
}
ul#NavWeiss, ul#NavDarkShops {
    margin: 0 0 0 20px;
}

#inhaltCom {
    padding-left:270px;

}


#nav {
    padding-left:250px;

}

container.css

Code:

/* CSS Document */

/*.csc-firstHeader {

    margin-top: 0px; 
    margin-bottom: 0px;

}
*/

body {
    margin:0px;
}

#top {
    width:1000px;
    height:110px;
    background-repeat:no-repeat;
}
#nav {
    width:770px;
    height:35px;
    background-repeat:no-repeat;
}
#middle {
    width:1000px;
    height:230px;
    background-repeat:no-repeat;
    }
#bottom {
    background-repeat:no-repeat;
    width:1000px;
    height:225px;

}
#info {
    float:left;
    margin:0px;
    width:330px;
    padding-left:20px;
    background-repeat:no-repeat;
}
#pfeilRechts {
    margin-top:80px;
    float:left;
    width:40px;
    height:40px;
}
#pfeilLinks {
    margin-top:80px;
    margin-left:290px;
    float:left;
    width:40px;
    height:40px;
}

#subNav {
    position:absolute;
    top:110px;
    width:150px;
    padding:0 50px 0 50px;
}
#bildRechtsOben {
    position:absolute;
    top:0px;
    left:800px;
    width:200px;
    height:150px;
    overflow:hidden;
}

/* Startseite */

.bodyStart {
    background-color:#9F0000;
    background-image:url(../images/ui/bodyStart.gif);
    background-repeat:repeat-y;
}
.topStart {
    background-image:url(../images/ui/topStart.gif);
}
.navStart {
    background-image:url(../images/ui/navStart.jpg);
}
.middleStart {
    background-image:url(../images/ui/middleStart.jpg);
}
.bottomStart {
    background-image:url(../images/ui/bottomStart.jpg);
}
.infoStart {
    background-image:url(../images/ui/infoBack.jpg);
}

/* Showroom */

.bodyShowroom {
    background-color:#262424;
    background-image:url(../images/ui/bodyShowroom.gif);
    background-repeat:repeat-y;
}

.topShowroom {
    background-image:url(../images/ui/topShowroom.gif);
}
.navShowroom {
    background-image:url(../images/ui/navShowroom.gif);
}
.middleShowroom {
    background-image:url(../images/ui/middleShowroom.gif);
}
.bottomShowroom {
    background-image:url(../images/ui/bottomShowroom.gif);
}
.infoShowroom {
    background-image:url(../images/ui/infoShowroom.gif);
    margin-left:0px;
}

#showid {
    position: absolute;
    top: 200px;
    left: 105px;
    allowtransparency:true;
    background-color:transparent;
}

/* Community */

.bodyComm {
    background-color:#969B9B;
    background-image:url(../images/ui/bodyCom.gif);
    background-repeat:repeat-y;
}
.topComm {
    background-image:url(../images/ui/topCom.gif);
}
.navComm {
    background-image:url(../images/ui/navCom.gif);
}
.middleComm {
    background-image:url(../images/ui/middleCom.jpg);
}
.bottomComm {
    background-image:url(../images/ui/bottomCom.jpg);
}
/* News */

.bodyNews {
    background-color:#906C7C;
    background-image:url(../images/ui/bodyNews.gif);
    background-repeat:repeat-y;
}
.topNews {
    background-image:url(../images/ui/topNews.gif);
}
.navNews {
    background-image:url(../images/ui/navNews.jpg);
}
.middleNews {
    background-image:url(../images/ui/middleNews.jpg);
}
.bottomNews {
    background-image:url(../images/ui/bottomNews.jpg);
}
/* Shops */

.bodyShops {
    background-color:#C0B4B4;
    background-image:url(../images/ui/bodyShops.gif);
    background-repeat:repeat-y;
}
.topShops {
    background-image:url(../images/ui/topShops.gif);
}
.navShops {
    background-image:url(../images/ui/navShops.jpg);
}
.middleShops {
    background-image:url(../images/ui/middleShops.jpg);
}
.bottomShops {
    background-image:url(../images/ui/bottomShops.jpg);
}

Code:

/* CSS Document */
body {
    font-family:"Lucida Grande", Verdana;
    font-size:0.8em;
}

.bodytext{
    
}
.bodytext a:visited, .bodytext a:link, .bodytext a:active{
    text-decoration:none;
    color:#000000;
}
.bodytext a:hover{
    text-decoration:underline;
}

#subNav {
    font-size:100%;
}
#subNav h1 {
    font-size:100%;
    margin:0px;
    padding:0px;
    margin-bottom:10px;
}
.hell , .hell a:visited, .hell a:active, .hell a:link{
    color:#E9C7C7;
    text-decoration:none;
}

.hell  a:hover{
    text-decoration:underline;
}


.weiss, .weiss  a:visited, .weiss  a:active, .weiss  a:link{
    color:#FFFFFF;
    text-decoration:none;
}

.weiss  a:hover{
    text-decoration:underline;
}



*/
Marnbug durch typo3 in firefox!

*/


.csc-firstHeader {

    margin-top: 0px; 
    margin-bottom: 0px;

}

/*

Startseite 

*/
.infoStart {
    color:#E9C7C7;
}
.infoStart a {
    color:#141414;
    text-decoration:none;
}
.infoStart a:hover {
    text-decoration:underline;
}
.infoStart h3 {
    font-size:100%;
    font-weight:normal;
    line-height:40px;
    margin-top:0px;
    padding-top:1px;
}
/*

Showroom 

*/
.infoShowroom {
    color:#CCCCCC;
}
.infoShowroom a {
    color:#cc0000;
    text-decoration:none;
}
.infoShowroom a:hover {
    text-decoration:underline;
}
.infoShowroom h3 {
    font-size:100%;
    font-weight:normal;
    line-height:40px;
    margin-top:0px;
    padding-top:1px;
}
/*

Community 
ADDED!!!!! margin 20 to 0
*/

#inhaltCom{
    padding-left:270px;
    margin-top:0px;
    
}

/* 

Top-Navigation 

*/

/* Startseite / dunkel */

#nav {
    padding-left:230px;

}
ul#NavDark, ul#NavRed, ul#NavWeiss {
    margin: 0; 
    /*text-align: center;*/
}
ul#NavDark li, ul#NavRed li, ul#NavDarkCom li, ul#NavWeiss li {
    list-style: none;
    display: inline;
    margin:0px;
    padding: 0px 25px 0px 0px;
}
/* Design */
ul#NavDark li a, ul#NavDarkCom li a {
    color:#141414;
    text-decoration:none;
}

ul#NavDark li a:hover, ul#NavDarkCom li a:hover {
    color:#9f0000;
    text-decoration:underline;
}

/* Showroom / rot */

ul#NavRed li a {
    color:#cc0000;
    text-decoration:none;
}

ul#NavRed li a:hover {
    color:#ffffff;
    text-decoration:underline;
}

/* Community / dunkel */

ul#NavDarkCom {
    margin: 0;
}

/* News / weiss */

ul#NavWeiss li a {
    color:#ffffff;
    text-decoration:none;
}

ul#NavWeiss li a:hover {
    color:#ffffff;
    text-decoration:underline;
}

/*

Sub-Navigation 

*/
.subNavHell, .subNavWeiss {
    line-height:25px;
    margin:0px;
    padding:0px;
}
.subNavHell ul, .subNavWeiss ul {
    margin-left:20px;
    padding:0px;
}
.subNavHell li, .subNavWeiss li {
    display:block;
}
.subNavHell ul, .subNavHell li, .subNavWeiss ul, .subNavWeiss li {
    list-style:none;
}
.subNavHell li a {
    color:#E9C7C7;
    text-decoration:none;
}
.subNavHell li a:hover {
    color:#E9C7C7;
    text-decoration:underline;
}
/* weiss */

.subNavWeiss li a {
    color:#ffffff;
    text-decoration:none;
}
.subNavWeiss li a:hover {
    color:#ffffff;
    text-decoration:underline;
}




/*

Pfad Navigator


*/


#pfad {
        padding-left:270px;
        font-size:0.8em;
}

#pfad a:visited, #pfad a:link, #pfad a:active{
        color: black;
        text-decoration:none;
        
}

#pfad.hell a:visited, #pfad.hell a:link, #pfad.hell a:active{
        color: #E9C7C7;
        text-decoration:none;
        
}

#pfad a:hover, #pfad.hell a:hover{
    text-decoration:underline;
}


/*
tt_news css
*/


/*-----------------------------------  clearer  -----------------------------------*/
/* prevent floated images from overlapping the div-containers they are wrapped in  */

.news-list-container HR.clearer, .news-single-item HR.clearer, .news-latest-container HR.clearer{
    clear:right;
    height:1px;
    border:1px hidden #F9FFE5;

}
.news-latest-container HR.clearer {
    clear:left;
}

/*-----------------------------------  tt_news LATEST view  -----------------------------------*/

.news-latest-container {
    border:0px hidden black;
}

.news-latest-container H2,.news-latest-gotoarchive {
    color:#fff;
    padding:3px;
    margin:3px;
    /*border:1px solid #666;*/
    /*background-color:#D8FA70;*/
    /*background-color:#769024;*/
}

.news-latest-gotoarchive {
    font-weight:bold;
    margin-top:5px;
}
.news-latest-gotoarchive A:LINK, .news-latest-gotoarchive A:VISITED, .news-latest-gotoarchive A:HOVER {
    color:#fff;
}
.news-latest-gotoarchive A {
    color:#fff;
}
.news-latest-item {
    /* IE hack */
    height: 1%;
    line-height: 1.3;
    /* IE hack end */
    height: auto !important;    
    padding:3px;
    margin:3px;
/*    border:1px solid #666;*/
/*    background-color:#F9FFE5;*/
}

.news-latest-item IMG {

    margin-bottom:5px;
    margin-right:5px;
    border:1px solid #666;
    float:left;
}
.news-latest-category IMG {
    float: none;
    border:none;
    margin:0px;
}
.news-latest-date,.news-latest-morelink,.news-latest-category {
    font-size:9px;
        float:right;
}

.news-latest-morelink {
    height:40px;
    background-image:url(../images/ui/pfeilStart.jpg);
    background-repeat:no-repeat;
    position:absolute;
    left:680px;
    top:460px;
}

.news-latest-morelink A {
    position:relative;
    top:32px;
    left:4px;
    height:50px;
    width:40px;
}


/*--------------------------------- tt_news LIST view  -----------------------------------*/
.news-list-container {

    border:1px solid #000;
    background-color:#BBE53A;

}


.news-list-item {
    /* IE hack */
    height: 1%;
    line-height: 1.3;
    /* IE hack end */
    height: auto !important;
    padding:3px;
    margin:3px;
    border:1px solid #666;
    background-color:#F9FFE5;

    }
.news-search-form {
    padding:3px;
    margin-bottom:5px;
    border:1px solid #666;
    background-color:#F9FFE5;

}
.news-search-emptyMsg{
    margin:0px;
}
.news-search-form FORM {
    margin:0px;
}
.news-list-container H3 {
    margin-bottom: 5px;
    padding: 2px;
    border-bottom: 1px solid #769024;
    background-color: #769024;
}
.news-list-container H3 A:LINK,.news-list-container H3 A:VISITED,.news-list-container H3 A:HOVER {
    color:#fff;
    padding-left:2px;
}
.news-list-container H3 A {
    color:#fff;

}
.news-list-container P {
    padding-left:3px;
}
.news-list-date {
    float: right;
    color: #3E551C;
    width: 180px;
    text-align: right;
    height: 20px;
    margin-top: -2px;
    margin-right: -2px;
    font-size: 9px;
    font-weight: normal;
    background-color: #F9FFE5;
    }

.news-list-imgcaption {
    float: right;
    padding-top:3px;
    padding-right:3px;
    font-size: 9px;

    }

.news-list-container IMG {

    float: right;
    border:1px solid #666;
    margin-bottom:5px;
    margin-right:2px;
    margin-left:5px;
}
.news-list-category IMG {
    float: none;
    border:none;
    margin:0px;
}

.news-list-morelink,.news-list-category {
    font-size:9px;
    margin-left:3px;
}
.news-list-morelink  {
    margin-bottom:3px;
}
.news-list-browse {
    text-align: center;
}



    /*---------------------------------  tt_news Page-Browser ---------------------------------*/
.tx-ttnews-browsebox {
    margin:3px;
    border:1px solid #666;
    padding:3px;
    background-color:#F9FFE5;
}
.tx-ttnews-browsebox TD {
    font-size: 10px;
}
.tx-ttnews-browsebox-strong, .tx-ttnews-browsebox-SCell {
    font-weight: bold;
}
.tx-ttnews-browsebox-SCell P,.tx-ttnews-browsebox TD P{
    margin:0px;
}

.tx-ttnews-browsebox-SCell {
    background-color: #BBE53A;
    border:1px solid #666;
}
.news-search-emptyMsg {
    font-size: 11px;
    margin-left: 10px;
}
    /*--------------------------------- tt_news SINGLE view  ---------------------------------*/
.news-single-item {
    padding:5px;
    margin-bottom:5px;
    border:1px solid #666;
    background-color:#F9FFE5;

}
.news-single-item H2 {
    font-size: 16px;
    font-weight:bold;
    color: #85A600;
    margin-bottom: 0px;
}
.news-single-item H3 {
    margin-bottom: 15px;
}



.news-single-img {
    float: right;
    margin-left:5px;

}



.news-single-imgcaption {
    padding:3px;
    clear:both;
}

.news-single-category {

    float: right;
}
.news-single-backlink, .news-single-backlink a {
    font-weight: bold;
    font-size: 10px;
    margin-bottom: 15px;
    margin-top: 10px;
}
.news-single-timedata {
    float: right;
}
.news-single-timedata, .news-single-author,.news-single-imgcaption {
    font-size: 9px;
}
.news-single-author {
    padding-bottom: 3px;
}
.news-single-additional-info {
    background-color: #BBE53A;
/*     clear: both; */
    margin-top: 15px;
    border: 1px solid #666;
    padding:3px;
    padding-bottom:0px;

}
.news-single-related,.news-single-files,.news-single-links  {
    border: 1px solid #666;
    margin:0px;
    margin-bottom: 3px;
    padding:3px;
    background-color:#F9FFE5;
}

.news-single-related DD, .news-single-links DD, .news-single-files DD {
    margin-left:20px;
}

.news-single-related DT, .news-single-links DT, .news-single-files DT {
    font-weight: bold;
    font-size: 11px;
    margin-left:5px;
    width:90%;
}

/*--------------------------------- tt_news Archivemenu (AMENU) --------------------------------- */
.news-amenu-container {
    margin-top:10px;
    padding:3px;
    border:1px solid #333;
    background-color:#BBE53A;
}
.news-amenu-container LI {
    padding-bottom:1px;
}
.news-amenu-container UL {
    padding:3px;
    margin-top:5px;
    margin-left:0px;
    margin-bottom:0px;
    border:1px solid #666;
    background-color:#F9FFE5;
    list-style-type: none;
}
.news-amenu-container H2 {
    color:#fff;
    padding:3px;
    border:1px solid #666;
    background-color:#769024;
}
.news-amenu-item-year {
    font-weight: bold;
    border: 1px solid #666;
    padding: 2px;
    background-color: #769024;
    color:#fff;
}

/*--------------------------------- tt_news Categorymenu (CATMENU) --------------------------------- */


.news-catmenu  {
    padding:5px;
    margin:10px 0px 10px 10px;
    border:1px solid #666;
    background-color:#F9FFE5;
}
.news-catmenu-header  {
    font-size:11px;
    font-weight:bold;
}
.news-catmenu DIV {
    font-size:10px;
    white-space: nowrap;
}
.news-catmenu DIV img {
    margin:0px;
    padding:0px;
    vertical-align: middle;
}
.news-catmenu-ACT {
    font-weight:bold;
}

/*  Styles for catmenu mode "nestedWraps" */
.level0 {
    background-color:#fff;
}
.level1 {
    padding-left:10px;
    background-color:#eee;
}
.level2 {
    padding-left:10px;
    background-color:#ddd;
}
.level3 {
    padding-left:10px;
    background-color:#ccc;
}
.level4 {
    padding-left:10px;
    background-color:#bbb;
}

Typoscript-Code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:

# TemplaVoilà Page-Definition
page = PAGE
page.typeNum = 0
page.10 = USER
page.10.userFunc = tx_templavoila_pi1->main_page

config.doctype = xhtml_trans
page.shortcutIcon = fileadmin/templates/images/favicon.ico
###########################################
# Hauptmenu
###########################################
lib.Startnavi= HMENU
# First level menuobject,textual
lib.Startnavi.1 = TMENU
lib.Startnavi.1 {
wrap=<ul id="NavDark">|</ul>
noBlur=1
# Normal state properties
NO.linkWrap = <li>|</li>
# NO.stdWrap.htmlSpecialChars = 1
# Enable active state and set properties:
ACT = 1
#ACT.stdWrap.htmlSpecialChars = 1
ACT.linkWrap=<li><b>|</b></li>
}

###########################################
# Hauptmenu
###########################################
lib.MainNavi= HMENU
# First level menuobject,textual
lib.MainNavi.1 = TMENU
lib.MainNavi.1 {
wrap=<ul id="NavWeiss">|</ul>
noBlur=1
# Normal state properties
NO.linkWrap = <li>|</li>
# NO.stdWrap.htmlSpecialChars = 1
# Enable active state and set properties:
ACT = 1
#ACT.stdWrap.htmlSpecialChars = 1
ACT.linkWrap=<li><b>|</b></li>
}

########################
#submenu
########################

lib.SubNavi = HMENU
lib.SubNavi.entryLevel = 1
lib.SubNavi.1 = TMENU
lib.SubNavi.1 {
#wrap=<div class="subNavWeiss">|</div>
NO{
allWrap.insertData=1
allWrap=<li>|
wrapItemAndSub = |</li>

#linkWrap = <div class="subNavWeiss">|</div>
RO=1
}
ACT = 1
#ACT.stdWrap.htmlSpecialChars = 1
ACT.linkWrap=<li><b>|</b></li>
}

lib.Breadcrumb= HMENU
lib.Breadcrumb.special = rootline
lib.Breadcrumb.special.range = 0|-1
lib.Breadcrumb.1 = TMENU
#lib.Breadcrumb.1.wrap = <div id="pfad"> | </div>
lib.Breadcrumb.1.NO {
linkWrap = |*| | >  |*| |
doNotLinkIt = |*| |*| 1
}

# TOPNAVI

#page.10 {
#subparts.TOPNAVI = HMENU
#subparts.TOPNAVI {
#1 = TMENU
#1.NO.linkWrap = <li>|</li>
#1.ACT = 1
#1.ACT.linkWrap=<li><b>|</b></li>
#
#}
#}
plugin.tt_news._CSS_DEFAULT_STYLE =
plugin.tt_news._CSS_DEFAULT_STYLE = "fileadmin/templates/css/tt_news.css"
plugin.tt_news._CSS_DEFAULT_STYLE = fileadmin/templates/css/tt_news.css

Denny1987 · #2 11.04.08, 08:27

Guten Morgen leider habe ich keine Zeit um dein Problem vollständig zu lösen aber ich kann dir sagen das dein bottom völlig falsch sitzt und deshalb den Inhalt überdeckt.

easyrieder · #3 14.04.08, 08:50

hmm wie kann ein background über dem inhalt stehen? und warum sitzt er falsch? wär nett wenn mir da jemand weiterhelfen kann. ich blick so gut wie nicht mehr durch :sad:

Themen-Optionen	Thema durchsuchen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen	Thema durchsuchen: Erweiterte Suche
Ansicht	Thema bewerten
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln	Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Menu: Listenmenu mit Background-Images	coon	TYPO3 4.x Fragen und Probleme	1	08.07.08 10:21
mm_forum 0.1.5 Button: Background der Schrift ist nicht transparent	Junior	mm_forum	0	22.02.08 09:55
Background unterm Menu	Tarzan	GMENU, HMENU, TMENU und Co.	7	26.12.07 15:29
CSS background-image	schecker	TYPO3 4.x Fragen und Probleme	0	15.11.07 12:43
CSS Background-Image dynamisch erzeugen	arittner	GMENU, HMENU, TMENU und Co.	3	11.01.07 13:27

Suche

Userpanel