XHTMLforum - Einzelnen Beitrag anzeigen - IE7 fixing

matsie · #1 (**permalink**) 05.04.2008, 08:59

Hallo,
Ziel ist es, eine CSS-Menüstruktur kompatibel für den Internet Explorer 7 zu gestalten. Das Menü funktioniert für Firefox, Safari, etc. Für IE5 bis IE6 habe ich die hacks gefunden, damit das Menu entsprechend funktioniert. Jedoch beim IE7 verzerrt es sich.

Hier der relevante CSS Code für die Navigation:

Code:

/* BEG MENU IE7 */
#navcontainer { 
	margin: 50px -90px 0 auto; /* Menu box position w/ border line */
	border-left-width: 1px;
	border-left-style: solid;
	position: relative;
	left: auto;
	float: right;
	right: 0;
	top: 0;
	padding-bottom: 60px;
	padding-top: 20px;
}

#navcontainer #current {
	font-weight: bold;
}

#navcontainer ul ul #current {
	font-weight: bold;
}

#navcontainer ul ul ul #current {
}

/* Parent - Level 0 */

#navcontainer ul { /* main level position */
	margin-right: auto;
	margin-left: auto;
	text-align: right;
	width: 152px;
	position: relative;
	right: 137px; /* Menu box position w/o border line */ 
	list-style-type: none; /* ie7 fix */

}

#navcontainer ul li {
	margin: 6px 0;
	padding: 0;
	padding-right: 10px;
	padding-left: auto;
	text-decoration: none;
}

#navcontainer ul li a:link, #navcontainer ul li a:visited {
	text-decoration: none;
	padding-right: 20px;
}


#navcontainer ul a {
	display: block;
	text-decoration: none;
	font-size: 11px;
	font-weight: normal;
	padding: 0;
	position: relative;
	line-height: 2em;
}

#navcontainer a:hover {
}

/* Child - Level 1 */
#navcontainer ul ul {
	text-align: left;
	right: -120px; /* child level 1 horizontal position */
	left: 120px;
	display: none; /* impact on border line middle */
}

#navcontainer li ul.see {
	display: block;
	}


#navcontainer ul li li {
	margin: 6px 0;
	display: block;
	font-size: 12px;
}

#navcontainer ul li li a {
	padding-left: 20px;
}


#navcontainer ul ul li { 
}

#navcontainer ul ul li {
	margin-left: 12px;
}

#navcontainer ul ul ul li {
	margin-left: 9px;
}

#sidebar #navcontainer ul ul a {
	text-decoration: none;
	font-size: 10px;
}

#navcontainer ul ul ul{
	left: auto;
	right: 0;
	text-align: left;
}

#sidebar #navcontainer ul ul ul a {
	text-decoration: none;
	padding-top: 0;
	font-size: 9px;
}

#navcontainer ul ul ul ul li {
	margin-left: 6px;
}

#navcontainer ul ul ul ul a {
}

#navcontainer ul ul a:hover {
}

#navcontainer li:hover ul, #navcontainer li a:hover ul { /* child level 1 */
	display:block; 
	}

ul {
	font-size: 0.9em;
	margin: 0;
	padding: 0;
}

ul li {
	margin-bottom: 0.7em;
	line-height: 1.2em;
}


/* BULLETS */
#navcontainer ul li a.currentAncestor, #navcontainer ul li a.current {
	background-image: url(../img/bullets/bullet_grey_dark_12x12.png);
	background-position: right center;
	background-repeat: no-repeat;
}

#navcontainer ul li li a.current, #navcontainer ul li li a.currentAncestor {
	background-image: url(../img/bullets/bullet_grey_dark_9x9.png);
	background-position: left center;

}
/* END MENU IE7 */

Und hier der Code der ganzen Webseite:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
/* BEG MENU IE7 */
#navcontainer { 
	margin: 50px -90px 0 auto; /* Menu box position w/ border line */
	border-left-width: 1px;
	border-left-style: solid;
	position: relative;
	left: auto;
	float: right;
	right: 0;
	top: 0;
	padding-bottom: 60px;
	padding-top: 20px;
}

#navcontainer #current {
	font-weight: bold;
}

#navcontainer ul ul #current {
	font-weight: bold;
}

#navcontainer ul ul ul #current {
}

/* Parent - Level 0 */

#navcontainer ul { /* main level position */
	margin-right: auto;
	margin-left: auto;
	text-align: right;
	width: 152px;
	position: relative;
	right: 137px; /* Menu box position w/o border line */ 
	list-style-type: none; /* ie7 fix */

}

#navcontainer ul li {
	margin: 6px 0;
	padding: 0;
	padding-right: 10px;
	padding-left: auto;
	text-decoration: none;
}

#navcontainer ul li a:link, #navcontainer ul li a:visited {
	text-decoration: none;
	padding-right: 20px;
}


#navcontainer ul a {
	display: block;
	text-decoration: none;
	font-size: 11px;
	font-weight: normal;
	padding: 0;
	position: relative;
	line-height: 2em;
}

#navcontainer a:hover {
}

/* Child - Level 1 */
#navcontainer ul ul {
	text-align: left;
	right: -120px; /* child level 1 horizontal position */
	left: 120px;
	display: none; /* impact on border line middle */
}

#navcontainer li ul.see {
	display: block;
	}


#navcontainer ul li li {
	margin: 6px 0;
	display: block;
	font-size: 12px;
}

#navcontainer ul li li a {
	padding-left: 20px;
}


#navcontainer ul ul li { 
}

#navcontainer ul ul li {
	margin-left: 12px;
}

#navcontainer ul ul ul li {
	margin-left: 9px;
}

#sidebar #navcontainer ul ul a {
	text-decoration: none;
	font-size: 10px;
}

#navcontainer ul ul ul{
	left: auto;
	right: 0;
	text-align: left;
}

#sidebar #navcontainer ul ul ul a {
	text-decoration: none;
	padding-top: 0;
	font-size: 9px;
}

#navcontainer ul ul ul ul li {
	margin-left: 6px;
}

#navcontainer ul ul ul ul a {
}

#navcontainer ul ul a:hover {
}

#navcontainer li:hover ul, #navcontainer li a:hover ul { /* child level 1 */
	display:block; 
	}

ul {
	font-size: 0.9em;
	margin: 0;
	padding: 0;
}

ul li {
	margin-bottom: 0.7em;
	line-height: 1.2em;
}


/* BULLETS */
#navcontainer ul li a.currentAncestor, #navcontainer ul li a.current {
	background-image: url(../img/bullets/bullet_grey_dark_12x12.png);
	background-position: right center;
	background-repeat: no-repeat;
}

#navcontainer ul li li a.current, #navcontainer ul li li a.currentAncestor {
	background-image: url(../img/bullets/bullet_grey_dark_9x9.png);
	background-position: left center;

}
/* END MENU IE7 */

/* @group General Styles */

body, html {
	font-family: Verdana, "Bitstream Vera Sans", "Vera Sans", Tahoma, Geneva, sans-serif;
	text-align: center;
	font-family: Verdana, "Bitstream Vera Sans", "Vera Sans", Tahoma, Geneva, sans-serif;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
}
body { /* IE 5.5, 6, 7 scrollbar colors */
	scrollbar-base-color: #000000;
	scrollbar-face-color: #222222;
	scrollbar-track-color: #111111;
	scrollbar-arrow-color: #666666;
	scrollbar-highlight-color: #333333;
	scrollbar-3dlight-color: #CCCCCC;
	scrollbar-shadow-color: #333333;
	scrollbar-darkshadow-color: #999999;
}

p {
	font-size: 1em;
	line-height: 1.4em;
	text-align:justify;
}

p #firm a {
	font-weight: bold;
	text-decoration: none;
}

#bullet li {
	margin-left: 50px;
	text-align: justify;
}
	
p .footer2 {
	text-align: center;
	color:#00FF99;
	}

h1 {
	font-size: 1.3em;
	margin: 0;
	padding: 0;
}

h2 {
	font-weight: bold;
	font-style: normal;
	margin-bottom: 0.5em;
	margin-top: 1em;
	font-size: 1.2em;
}

h3 {
	margin-bottom: 0.5em;
	font-size: 1.1em;
	margin-top: 2em;
}

h4 {
	margin-top: 1em;
	margin-bottom: 0.1em;
	font-size: 1em;
}

h5 {
	margin-top: 1em;
	margin-bottom: 0.1em;
	font-size: 0.9em;
}

#mainContent #content #content_text p.description {
	font-size: 1em;
	line-height: 1.3em;
}

#mainContent #content #content_text p.title {
}

img {
	border-style: none;
}

#pageHeader #logo {
	position: absolute;
	width: 100%;
	top: auto;
	bottom: 0;
	left: 0;
	
}

#pageHeader #logo img {
}

.image-left {
	margin: 3px;
	padding: 3px;
	float: left;
}

.image-right {
	margin: 3px;
	padding: 3px;
	float: right;
}

a img {
	border: none;
}
	
/* @end */

/* @group Layout */

#container { 
	/*position: absolute;
	top: 4%;
	left: 4%;
	right: 4%;
	bottom: 4%;*/
	margin: auto; /* Right And Left Margin Widths To Auto */
	text-align: center; /* Hack To Keep IE5 Windows Happy */
	/*height: 92%;
	width: 92%;*/
	border: none;
	position: absolute;
	top: 50%;
	margin-top: -320px;
	height: 640px;
	margin-left: -480px;
	left: 50%;
	width: 960px;
}

#pageHeader {
	height: 100%;
	position: absolute;
	margin: 0;
	padding: 0;
	top: 0;
	bottom: 0;
	left: 0;
	width: 12%;
}

#pageHeader h1 { 
	padding: 0;
	font-size: 1em;
	font-style: normal;
	position: relative;
	font-weight: bold;
	margin: 0;
	margin-top: 10%;
	top: 0;
	display: none;
}

#pageHeader h2 { 
	margin: 0px;
	padding: 0px;
	font-weight: normal;
	font-size: 0.9em;
	font-style: normal;
	display: none;
}

#pageHeader_top {
	display: none;
}

#mainContent {
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 12%;
	background: transparent;
	margin: 0;
	padding: 0;
	width: 88%;
}

#mainContent #sidebar {
	position: absolute;
	padding: 0px;
	text-align: left;
	left: 0;
	font-size: 0.6em;
	top: 0;
	bottom: 0;
	margin: 0;
	overflow: hidden;
	height: 100%;
	width: 58mm;
}

#sidebar .sideHeader {
	font-weight: normal;
	font-size: 1.2em;
	margin-bottom: 3px;
	width: 80%;
}

#mainContent #sidebar p {
}

#mainContent #content {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	height: 100%;
	width: 75%;
	text-align: left;
	font-size: 0.7em;
	overflow: auto;
}

#mainContent #content #content_text {
	position: relative;
	margin-top: 4%;
	margin-bottom: auto;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 15px;
	padding-right: 8%;
	padding-left: 8%;
}

#mainContent #content #content_text img.whole {
	width: 100%;
}

#mainContent #content #content_text img.half {
	width: 45%;
}

#footer { /* This Is The BG Color Of The Main Div */
	text-align: center;
	font-size: 11px;
	position: absolute;
	margin: auto;
	width: 60%;
	bottom: -12px;
	left: 39%;
	right: auto;
	padding: 8px 0px 0px 0px;
	height: 20px;
	line-height: 1.8em;

}

#footer a {
	text-decoration: none;
}

#footer a:hover {
	text-decoration: underline;
}

#sidecontainer {
	padding: 0;
}

#side_plus {
	/*margin: 10px;
	border: 1px solid #b1b1b1;*/
	padding: 0;
	width: 86%;
	margin: 2em 7%;
}

#side_plus a {
	font-weight: normal;
}

#sidecontainer #side_plus p {
}


	
/* @end */

/* @group Bread-crumb */

#breadcrumbcontainer {
	position: relative;
	margin-bottom: auto;
	margin-left: auto;
	margin-right: auto;
	padding-right: 8%;
	padding-left: 8%;
	text-align: right;
	width: auto;
	font-size: 11px;
	line-height: 14px;
	height: 25px;
	/*border-bottom: 1px solid #ccc;*/

}

#breadcrumbcontainer ul {
	padding: 0;
	list-style-type: none;
	padding-top: 5px;
	margin: 0;
}

#breadcrumbcontainer li {
	margin: 0;
	display: inline;
}


#breadcrumbcontainer a {
	text-decoration: none;
}

#breadcrumbcontainer a:hover {
	font-weight: bold;
}

#breadcrumbcontainer ul li #selected {
	font-weight: bold;
}
	
/* @end */


/* @group Global Classes */



.imageStyle {
	padding: 0;
	margin: 0;
}

p.description {
	margin-top: 0;
	font-style: italic;
}
	
/* @end */

/* @group Contact Form */
.message-text { } 

.required-text {
} 

.form-input-field {
	border-width: 1px;
	border-style:solid;
	width: 100%;
}

textarea.form-input-field {
} 

.form-input-button { 
} 

/* @end */

/* NO RESIZE */
.image-left {
}

.image-right {
}

.imageStyle {
}
/* END NO RESIZE */


#imagecontainer {
	height: 201px;
	width: auto;
}


#teampic {
	float: right;
	width: 80px;
	padding-left: 10px;
}

#mapframe {
	float: right;
	padding-left: 10px;
}
</style>


</head>

<body>
  <div id="container">
    <div id="pageHeader_top">
      <h1></h1>
      <h2></h2>
    </div>

    <div id="pageHeader">
      <h1></h1>
      <h2></h2>
      <div id="logo"><img src=# width="113" alt="site logo" /></div>
    </div>

    <div id="mainContent">
      <div id="sidebar" style="background-color: #CC9900">
        <div id="sidecontainer">
          <div id="navcontainer">
            <ul>
              <li><a href="../index.html" rel="self">home</a></li>
              <li><a href="firm.html" rel="self">testmenu 1</a>
                <ul>
                  <li><a href=# rel="self">testsubmenu 2</a></li>
                  <li><a href=# rel="self">testsubmenu 3</a></li>
                  <li><a href=# rel="self">testtesttest submenu 1</a></li>
                </ul>
              </li>
              <li><a href="firm.html" rel="self">testmenu 1</a>
                <ul>
                  <li><a href=# rel="self">testsubmenu 2</a></li>
                  <li><a href=# rel="self">testsubmenu 3</a></li>
                  <li><a href=# rel="self">testtesttest submenu 1</a></li>
                  <li><a href=# rel="self">testtesttest submenu 3</a></li>
                </ul>
              </li>
              <li><a href="trans.html" rel="self">testtestmenu 3</a></li>
              <li><a href="press.html" rel="self">testmenu 4</a></li>
              <li><a href="contact.html" rel="self" id="current" class="current" name="current">testmenu 5</a></li>
            </ul>
          </div>
          <div id="side_plus">
            <div class="sideHeader"></div>
          </div>
        </div>
      </div>

      <div id="sidebar2">
        <div class="sideHeader"></div>
      </div>

      <div id="content">
        <div id="breadcrumbcontainer">
          <ul>
            <li><a href="../de/firm.html">de</a>&nbsp;&nbsp;&middot;&nbsp;&nbsp;</li>
			<li><a href="../ca/firm.html">ca</a>&nbsp;&nbsp;&middot;&nbsp;&nbsp;</li>
			<li><a href="../fr/firm.html">fr</a>&nbsp;&nbsp;&middot;&nbsp;&nbsp;</li>
            <li><a href="../en/firm.html" id="selected">en</a>&nbsp;&nbsp;&middot;&nbsp;&nbsp;</li>
            <li><a href="../es/firm.html">es</a></li>
          </ul>
        </div>

        <div id="content_text">
        	<div id="imagecontainer"> </div>    
          <br/>
          <br/>
          <br/>
<!--   TEXT CONTENT INPUT -->
          <p><span id="firm">XXX</span></p>
          <p>XXX</p>
<!--   END TEXT CONTENT INPUT -->
        </div>
      </div>
      <br style="clear: both;" />
    </div>

    <div id="footer">
      <p>xxx</p>
    </div>
</div>
</body>
</html>

Fragestellung: Welches sind die CSS-Anpassungen, die vorgenommen werden müssen, damit die Darstellung des Menüs im IE7 funktionert?

Danke
mat