z-index bug IE (desperat... >.<)

MaxP2P · 9. februar 2009

Heisann!

Har nå slitt med en siste ting på en webside som jeg sitter og lager her.

Det er snakk om et meny system som fungerer i alle nettlesere bortsett fra IE, og siden IE fortsatt har en god del av markedet, så må dette fikses på en eller annen måte.

Jeg vet at z-index har vært et kjent problem i IE, og vil påstå at jeg har prøvd de fleste kjente hacks, men uten hell. Håper nå på at en av dere CSS guruer kanskje kan hjelpe meg litt. =)

Problemet:

For CSS koden, se postene under...

MaxP2P · 9. februar 2009

CSS

/**==--__ Global __--==**/
*
{
margin: 0;
padding: 0;
}

/**==--__ Layout __--==**/
body
{
background: #636363 url("../images/layout/bg_layer1.png") repeat-x;
height: 100%;
}
#pattern
{
	background: url("../images/layout/bg_pattern.png") repeat;
	position: absolute;
	top: 0px;
	left: 0px;
	height: auto;
	min-height: 100%;
	width: 100%;
	}

		/* START HEADER */
		#bg_layer2_header
		{
			background: url("../images/layout/bg_layer2_header.png") no-repeat;
			height: 216px;
			width: 980px;
			margin: 0 auto;
			position: relative;
			}
			#banner
			{
				background: url("../images/layout/banner.png") no-repeat;
				height: 184px;
				width: 909px;
				margin: 0 auto;
				position: relative;
				top: 32px;
				}
				#menu
				{
					background: url("../images/layout/ie/menu_bg.gif") no-repeat;
					height: 25px;
					width: 877px;
					border-top: 1px solid #cbcbcb;
					margin: 0 auto;
					position: relative;
					top: 158px;
					}
					#subtabs
					{
						background: url("../images/layout/bg_subMenu.png") no-repeat;
						height: 48px;
						width: 374px;
						position: relative;
						top: -28px;
						left: 450px;
						z-index: -1;
						}
						#subtabs .menuTabText li
						{
							list-style: none;
							display: inline;

							}
							.menuTabText /* Subtab links positioning */
							{
								position: relative;
								top: 5px;
								left: 20px;
								}
								.menuNudge
								{
									margin-right: 36px;	
									}
		/* END HEADER */

		/* START CONTENT */
		#bg_layer2_content
		{
			background: url("../images/layout/bg_layer2_content.png") repeat-y;
			height: auto;
			min-height: 100%;
			width: 980px;
			margin: 0 auto;
			}
			#bg_content
			{
				background: url("../images/layout/bg_content.png") repeat-y;
				height: auto;
				min-height: 100%;
				width: 909px;
				margin: 0 auto;
				}
				#content
				{
					width: 850px;
					margin: 0 auto;
					height: 700px;
					}
				/* START FOOTER */
				#footer
				{
					background: url("../images/layout/footer.png") no-repeat;
					height: 24px;
					width: 877px;
					margin: 0 auto;
					}
				/* END FOOTER */
		/* END CONTENT */

/**==--__ Text and Fonts __--==**/
a,
a:hover,
a:visited
{
text-decoration: none;
}

#selectedTab a
{
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 10pt;
color: #fff;
}
.menuTabText a
{
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 10pt;
	color: #000;
	}

HTML

<?PHP
header('Content-Type: text/html; charset=utf-8');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>***</title>
<?PHP
// Selects CSS according to which browser is used by the client
$agent = $_SERVER['HTTP_USER_AGENT'];
$agentIE = strpos ($agent, "MSIE");
if (!$agentIE) {
echo '<link rel="stylesheet" type="text/css" href="./css/scweb.css" />';
} else {
echo '<link rel="stylesheet" type="text/css" href="./css/scweb_ie.css" />';
echo '<style type="text/css"> img, div { behavior: url(./iepngfix.htc) } </style>';
/*	echo '<style type="text/javascript" src="./iepngfix_tilebg.js"></script>'; */ // Needs debugging...	
}
?>
</head>

<!-- START CUSTOM MENU STYLE -->
<style type="text/css" media="screen">
#selectedTab
{
background: url("./images/layout/tabSelected.png") no-repeat;
height: 66px;
width: 129px;
position: relative;
top: -89px;
left: 425px;
z-index: 5;
}
#selectedTab a
{
	position: relative;
	top: 12px;
	left: 42px;
	}
</style>
<!-- END CUSTOM MENU STYLE -->

<body>
<div id="pattern">
<!-- START HEADER -->
<div id="bg_layer2_header">
	<div id="banner">
		<div id="menu">
			<div id="subtabs">
				<ul class="menuTabText">
					<li class="menuNudge"><a href="./home.phtml">Home</a></li>
					<li class="menuNudge"><a href="./link1.phtml">Link1</a></li>
					<li class="menuNudge"><a href="./link2.phtml">Link2</a></li>
					<li class="menuNudge"><a href="./link3.phtml">Link3</a></li>
					<li><a href="./link4.phtml">Link4</a></li>
				</ul>
			</div>
			<div id="selectedTab"><a href="./home.phtml">Home</a></div>
		</div>
	</div>
</div>
<!-- END HEADER -->

<!-- START CONTENT -->
<div id="bg_layer2_content">
	<div id="bg_content">
		<div id="content">
		</div>
		<!-- START FOOTER -->
		<div id="footer">
		</div>
		<!-- END FOOTER -->
	</div>
</div>
<!-- END CONTENT -->
</div>
</body>

</html>

Endret 9. februar 2009 av MaxP2P

MaxP2P · 12. februar 2009

Ingen som klarer å knekke denne her heller?

Asterisk · 12. februar 2009

Du kan prøve å bruke line-height i stedet for/ i tillegg til height:

.menyElementene {

line-height: XXpx;

position: relative;

z-index: 1;

}

.menyBakgrunnsBar {

line-height: XXpx;

position: relative;

z-index: 0;

}

Jeg måtte i tillegg til line-heigt for bakgrunnsbaren jeg bruker legge til height. Slik at for min del ser det slik ut:

line-height: 5px;

height: 5px;

MaxP2P · 12. februar 2009

Hmm.. Funka ikke helt dessverre..

Logg inn

z-index bug IE (desperat... >.<)

Anbefalte innlegg

MaxP2P

Lenke til kommentar

Videoannonse

MaxP2P

Lenke til kommentar

MaxP2P

Lenke til kommentar

Asterisk

Lenke til kommentar

MaxP2P

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer