• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

CSS-Hacks für MIE6 und MIE7

J

jschuhma

Neues Mitglied
Hallo miteinander,

es geht um folgende Seite: Staub/Störungen

Hier mein aktueller CSS-Code:
Code: 
[COLOR="Red"]* { margin: 0; padding: 0; }

/* IE-Hacks */		


*+html #headerrechts { position: relative; }
*+html #header {margin: -173px auto 0 auto;}
*+html #navibereich  ul {display:inline; zoom: 1;}
*+html #navibereich {text-align: center; display:table; margin:auto;}	[/COLOR]

body {
	font-family:Verdana, Sans-serif;
	color: #8e8e8e;
	line-height: 18px;
	background: #ffffff;
	margin: auto;
	}
	
.internal-link {
	background-color:#a5d643;
	color:#ffffff;
	text-decoration:none;
	padding:2px;
	}

.external-link-new-window {
	text-decoration:none;
	color:#a5d643;
	font-size:12px;
	}

#topbar {
	background: #a5d643;
	border-bottom: 1px solid #7d9b48;
	height:22px;
	}

#header {
	background: #ffffff url(header.jpg) no-repeat;
	height:173px;
	width:1024px;
	margin:auto;
	position:relative;
	
	}
	
#headerlinks{
	width:50%;
	height:174px;
	background: #ffffff url(header_links.jpg) repeat-x;
	float:left;
	}
	
#headerrechts{
	width:50%;
	height:174px;
	background: #ffffff url(header_rechts.jpg) repeat-x;
	float:right;
	}

#menu {
	position: absolute;
	background: #ffffff url(menu_bg.jpg) repeat-x;
	clear:both;
	height: 52px;
	width:100%;			
	}
	
#center {
	width:1024px;
	margin:auto;
	}

#content {
	width:600px;
	padding-top:70px;
	margin-left:50px;
	float:left;
	}
		
#sidebar{
	float:left;
	width:200px;
	padding-top:70px;
	}

#login{
	font-size:10px;
	color:#666666;
	margin-left:100px;
	}

#login form{
	width:170px;
	padding:10px;
	background-color:#efefef;
	}
	
#login input {
	width:100px;
	border:1px solid #a5d643;
	background:#ffffff;
	color:#666666;
	}

#tag-cloud {
	margin-left:100px;
	margin-top:20px;
	margin-bottom:40px;
	padding-bottom:15px;
	width: 190px;
	text-align:center;
	background: #efefef url(http://fotografie.mediadesign.mi.fh-offenburg.de/fileadmin/content_images/bg_cloud.jpg) no-repeat;
	border: 1px solid #efefef;
	}

.cloud_head {
	margin-bottom:20px;
	padding-left:10px;
	padding-top:3px;
	width:190px;
	font-size:10px;
	font-weight:bold;
	text-align:left;
	color:#666666;
	}

#tag-cloud div {
	margin:auto;
	}
	
#content p{
	font-family:Verdana, Sans-serif;
	color: #666666;
	font-size:12px;
	line-height: 18px;
	margin-bottom:20px;

	}

#content b{
	color:#A6D644;
	font-size:12px;
	}
	
#content img {
	margin:10px;
	}

#content h1.bodytext, #content h1 {
	margin-bottom:20px;
	color:#A6D644;
	font-size:14px;
	font-weight:bold;
	width:500px;
	padding-left:25px;
	}

#content p.bodytext {
	
	width:550px;
	padding-left:25px;
	}
	
#content h3.bodytext, h3{
	color:#A6D644;
	font-weight:bold;
	width:250px;
	font-size:12px;	
	text-align:left;
	background-color:#efefef;
	padding-left:5px;
	margin-bottom:10px;
	}

	
#content ul{
	margin-left:70px;
	width:450px;
	background: #efefef;
	border:1px solid #A6D644;
	padding-left:10px;
	padding-top:10px;
	padding-right:10px;
	padding-bottom:5px;
	font-size:12px;
	}

#content ul li{
	margin-left:30px;
	list-style-image: url(http://fotografie.mediadesign.mi.fh-offenburg.de/fileadmin/content_images/bullet.gif);
	}	

	
	
#footer h6{
	font-size:16px;
	color:#ffffff;
	}
	
#footer h5{
	font-size:10px;
	color:#A6D644;
	padding-bottom:7px;
	padding-top:2px;
	}
	
#footer h4{
	font-size:10px;
	color:#787878;
	font-weight:normal;
	}
		
#footer_bg{
	clear:both;
	background: #ffffff url(footer_bg.jpg) repeat-x;
	}
	
#footer {
	background: #ffffff url(footer.jpg) repeat-x;
	width:1024px;
	height:300px;
	margin:auto;
	}

#footer_1 {
	margin-top: 75px;
	margin-left:60px;
	width:235px;
	height: 200px;
	float:left;
	}

#footer_2, #footer_3 {
	margin-top: 75px;
	margin-left:25px;
	width:235px;
	height: 200px;
	float:left;
	}

#navibereich {
	color:#ffffff;
	font-size:11px;
	text-decoration:none;
	text-transform:uppercase;
	display:table;
	margin:auto;
	}

 #navibereich a {
	color:#ffffff;
	font-size:11px;
	text-decoration:none;
	text-transform:uppercase;
	}

#navibereich {
	width:1024px;
	}
	
#navibereich ul{
	display:table-row;
	text-align: left;
	}
	
* html #navibereich ul,
* html #navibereich li{
	height:1px;
	}

#navibereich li{
	display:table-cell;
	}

#ebene01 {
	list-style-type:none;
	height:25px;
	display: block;
	background:#525252;
	border-top:1px solid #000000;
	}

#ebene01 li{
	float:left;
	}
	
#navibereich li:hover {                            /* Hover für Ebene 1 */
	background:#a5d643;
	}
	
#navibereich li li:hover {                         /* Hover für Ebene 2 */
	background:#699611;
	}
	
#navibereich li li li:hover {                      /* Hover für Ebene 3 */
	background:#699611;
	}

#ebene01 strong {
	display:block;
	margin: 0 1em;
	padding: 0em;
	height:23px;
	padding-top:3px;
	}

.ebene02 {
	background:#a5d643;
	height:23px;
	position:relative;
	top:0;
	left:0;
	margin-top: 26px;
	margin-bottom:1px;
	list-style-type:none;
	font-weight:normal;
	display:block;
	padding: 0em;
	}
	
	
.ebene02 li {
	display:block;
	margin-right: 10px;
	padding-left:12px;
	padding-right:5px;
	height:23px;
	padding-top:3px;

	}	
	
.ebene03 {

	display:inline;
	background-color:#a5d643;
	position:absolute;
	list-style-type:none;
	border-left: 3px solid #699611;
	margin-top:20px;
	}
	
.ebene03 li{
	padding-left:12px;
	padding-right:5px;
	margin:0px;
	width:100%;
	border-top:1px solid #ffffff;
	text-align:left;
	background-color:#a5d643;
	}	

.ebene03 li a {
	float:left;
	}


#navi4 ul,
#navi5 ul,
#navi6 ul,
#navi7 ul,
#navi8 ul,
#navi9 ul,
#navi10 ul {
	width:auto;
	}
	
.ebene02, .ebene02 .ebene03 {                            /* Ebene 2 und 3 verstecken */
	height:0px;
	position: absolute;
	left:-9999px;
	width:0px;
	}

	
.ebene02 li:hover {
	position:relative;
	}
	
	
.ebene02 li:hover ul.ebene03 {
	position:absolute;
	top:0;
	left:0;
	margin-top:25px;
	}


li:hover ul,
.ebene02 li:hover ul {                          /* Ebene 2 und 3 bei hover wieder sichtbar machen */
   height:              auto;
   left:                auto;
   width:               auto;
	}

Rot markiert sind die css-hacks...
Im MIE6 wird weder Menü noch Header richtig dargestellt.
Im MIE7 wird das Menü zumindest so dargestellt das man es verwenden kann, der Header wird etwas falsch positioniert.

Sind meine Hacks falsch/schlecht/falsch eingebunden?
Hoffe mir kann hier jemand helfen. Vielen Dank im Voraus.

Grüße Jan
 
Wenn Du etwas für den IE6 deklarieren willst:

Code: 
* html element { eigenschaften }

Wenn Du etwas für den IE7 deklarieren willst:

Code: 
*+html element { eigenschaften }
 
hab eine kleine anmerkung zum inhalt. unter pixelrauschen verstehe ich die bunten pixel die durch feher vom fotochip verursacht werden. staub als pixelrauschen zu bezeichnen finde ich etwas irreführend.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben