CSS FireFox/Opera -> IE7

11/06/2008 09:43 Mizu#1
Hab da nen kleines CSS Prob :pimp:

Eigentlich sollte das ja in den Art Bereich, bin mir aber sicher die können da wenig mit anfangen :mad:


CSS:
Code:
html {
	overflow-y:scroll;
	overflow-x: hidden;
}
img{
	border:none;

}
td, p, div {
	margin: 0;
	padding: 0;
}
body {
	font-family: "Trebuchet MS", Arial, sans-serif;
	font-size: 12px;
	color: #333;
	background: #fff;
	padding: 0;
	margin: 0;
}
#wrap {
	margin:auto;
	padding:auto;
	margin-top:28px;
	width:1022px;
	height:722px;
	/*EDIT*/
	border:2px solid #cecece;
	vertical-align:middle;
}
#wrap #header {
	margin:0;
	padding:0;
	width:auto;
	height:141px;
	border-bottom:2px solid #cecece;
}
#contentWrap {
	margin:0;
	padding:0;
}
#header .fl {
	margin:0;
	padding:0;
	height:141px;
	width:309px;
	float:left;
}
#header .fl img {
	display:block;
	margin:20px auto;
}
#header .fr {
	height:141px;
	float:right;
}
#menu {
	padding:0;
	float:left;
	width:309px;
	border-right:2px solid #cecece;
}
#menu .kontakt {
	margin:0 0 0 0;
	background-color:#37612e;
	color:#FFF;
	padding:55px 0 48px 20px;
}
#menu .kontakt A {
	color:#fff;
	text-decoration:underline;
}
/* MAP BIRTH*/
#menu .map {
	margin:0;
	padding:0;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	/*min-height:293px;
	height:auto;*/

}
#menu .map ul {
	padding:37px 0 0 0;
	margin:0;
	font-size:10pt;
	list-style:none;
	text-transform:uppercase;
	list-style-position:outside;
}
#menu .map ul li {
	/*EDIT*/
	padding:13px 0 13px 10px;
	font-size:10pt;
	text-transform:uppercase;
	border-top:2px dotted #ddd;
	margin:0 10px 0 10px;
}
#menu .map ul li.active {
	margin:0;
	border:none;
	padding:13px 0 13px 23px;
	background-color:#666;
	font-size:10pt;
	text-transform:uppercase;
	
}
#menu .map ul ul {
	font-weight:normal;
	padding:10px 0 10px 30px;
	list-style-type:none;
	list-style-image:none;
}
#menu .map ul ul li {
	padding:0;
	border:none;
	list-style-image:none;
	font-size:8pt;
	text-transform:none;
}
#menu .map ul li a {
	color:#000;
	text-decoration:none;
}
#menu .map ul ul li a.active {
	color:#37612e;
}
#menu .map ul li img{
	padding-right:5px;
	padding-left:15px;
}
/* MAP DEATH*/
.content {
	margin:0;
	padding:0 0 171px 0;
	width:711px;
	float:left;
	background:#fafafa;

}
.content .inner {
	/*background-color:#66CC66;*/
	margin:50px 0 0 60px;
	padding:0;
	width:651px;
}
.content .inner .capital {
	margin:0 0 0 48px;
	padding:0;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:15pt;
	color:#4b841f;
}
.content .inner .capital p {
	margin: 0 0 0 142px;
}
.content .inner .main {
	font-family:Trebuchet MS, sans;
	font-size:13px;
	color:#000;
	margin:40px 50px 0 0;
	padding:auto;
}
.foot{
	margin:0;
	padding:0;
	float:right;
	color:#4b841f;
}
.foot a{
	margin:0;
	padding:0;
	color:#4b841f;
}
.clear{
	 clear: both;
	 display: block;
	 height: 0px;
	 overflow: hidden;
	 margin: 0;
	 padding: 0;
 }

HTML:
Code:
   <div class="map">
                <ul>
                    <li class="active"><a href="" ><img src="res/list.jpg" />Das Unternehmen</a></li>
<ul>
                            <li><div><a href="" class="active">Profil & Geschäftsführung</a></div></li>
            <li><a href="">Anschrift & Anfahrt</a></li>
            <li><a href="">Kontakt</a></li>
                  </ul>
                    <li><a href=""><img src="res/list.jpg" />Beratung</a></li>
                  <li><a href=""><img src="res/list.jpg" />Branchenlösung</a></li>
                  <li><a href=""><img src="res/list.jpg" />Riskiomanagement</a></li>
                  <li><a href=""><img src="res/list.jpg" />Privatvorsorge</a></li>
                </ul>
                </div>
FIREFOX/OPERA:
[Only registered and activated users can see links. Click Here To Register...]

IE7:
[Only registered and activated users can see links. Click Here To Register...]

ZIEL:
Im FF/OP Bild ist zu sehen dass nur der Hintergrund des aktive (ul li active) Links richtig dargestellt wird. Dementsprechend soll es auch im IE7 aussehen.

EDIT:
Ich arbeite nicht oft mit CSS und nur ungerne, dennoch habe ich meines erachtens alles Mögliche ausprobiert :(
Es geht mir wirklich nur um den Hintergrund.
11/06/2008 10:37 Mizu#2
GVD !!! ^^
Kennt ihr das auch ? Ihr klickt auf den "Post Quick Reply"-Button und schon habt ihr ne Idee die ihr ausprobieren müsst ?

CSS:
Code:
#menu .map ul ul {
	font-weight:normal;
	padding:10px 0 10px 30px;
	list-style-type:none;
	list-style-image:none;

           float:left;

HTML:
Code:
<ul>
                            <li><div><a href="" class="active">Profil & Geschäftsführung</a></div></li>
            <li><a href="">Anschrift & Anfahrt</a></li>
            <li><a href="">Kontakt</a></li>
                  </ul> <br clear="both">
Fazit:
in "#menu .map ul ul" wurde nen left-float angehangen und in der index nen clear hinter der Auflistung ..... Man ich hasse CSS :o