Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

z-index for Mac IE

Status
Not open for further replies.
duffs

duffs

Programmer
Sep 22, 2000
48
US
Hi,

Mac IE doesn't seem to handle z-index properly. I have a simple test stylesheet:

#logo{
position:relative;
height: 112px;
padding: 0px;
margin:0px;
border-style: none;
z-index:3;
}
#logo2{
height: 112px;
padding: 0px;
margin:-20px;
border-style: none;
z-index:2;
}

with the corresponding html:

<DIV id="logo">
<img src="images/MLlogo_01.jpg" width="112" height="112">
</div>
<DIV id="logo2">
<img src="images/MLlogo_02.jpg" width="112" height="112">
</div>

MLlogo_02 is supposed to be under MLlogo_01. This works fine on the PC browsers IE, Opera, Firefox, Netscape 6. I can't get this to work on IE Mac. Note position:relative in #logo is needed to get it to work on IE PC.

Any help would be appreciated.

Thanks.
 
Sort by date Sort by votes

I'll have a look on a Mac later today, but as a guess, are they both contained within another positioned element (either absolute or relative)? if not, can you put them in one?

Can you show the code surrounding the two divs?

Dan

 
Upvote 0 Downvote

The following replacement will do what you want in both Safari and IE 5.2 on MacOSX:

Code: 
#logo
{
	position:relative;
	height: 112px;
	padding: 0px;
	margin:0px;
	border-style: none; 
}
.absolute
{
	position:absolute;
}

And then the following HTML:

Code: 
<div id="logo">
	<img src="images/MLlogo_01.jpg" width="112" height="112" class="absolute"><img src="images/MLlogo_02.jpg" width="112" height="112">
</div>

Hope that works for you on those other browsers too,
Jeff

 
Upvote 0 Downvote
Hi,

That fix didn't work. When testing further and getting different results for no apparent reason (which was driving me crazy), I pinpointed the problem. I get different results if the style is in the html vs. externally. Doesn't make any sense to me at all, but I'm kind of new to this sort of thing, so maybe someone else will see the problem.

This html works fine. If I alternate which logo is 2 and which is 3, the page correctly puts the higher number on top:

testzindexworksonmac2.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"<html>
<head>
<title>Moneyletter Mutual Fund Newsletter Introduction</title>

<STYLE>
#logo{
position:relative;
height: 112px;
padding: 0px;
margin:0px;
border-style: none;
z-index:2;
}

#logo2{
position:relative;
height: 112px;
padding: 0px;
margin:-20px;
border-style: none;
z-index:3;
}
</STYLE>
</head>
<body>
<DIV id="logo">
<img src="images/MLlogo_01.jpg" alt="logo" width="112" height="112" >
</div>
<DIV id="logo2">
<img src="images/MLlogo_02.jpg" alt="logo2" width="112" height="112" >
</div>
</body>
</html>


However, this page which uses an external stylesheet does not work properly. No matter which logo is 2 vs. 3, it always puts logo on top and logo2 on the bottom. As far as I can tell, the external stylesheet exactly matches the style from the example above.

testzindexdoesntworkonmac.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"<html>
<!-- DW6 -->
<head>
<title>Moneyletter Mutual Fund Newsletter Introduction</title>
<link rel="stylesheet" href="styles/MLmaintryingtofix2.css" type="text/css" media="screen">
</head>
<body>
<DIV id="logo">
<img src="images/MLlogo_01.jpg" alt="logo" width="112" height="112" >
</div>
<DIV id="logo2">
<img src="images/MLlogo_02.jpg" alt="logo2" width="112" height="112" >
</div>
</body>
</html>

MLmaintryingtofix2.css

#logo{
position:relative;
height: 112px;
padding: 0px;
margin:0px;
border-style: none;
z-index:2;
}

#logo2{
position:relative;
height: 112px;
padding: 0px;
margin:-20px;
border-style: none;
z-index:3;
}

Does anyone know the problem?

Thanks, Susie
 
Upvote 0 Downvote

There is a noticable difference - when you have your stylesheet on the page, you have not specified a type (type="text/css").

If you include this, does it make a difference?

Dan



The answers you get are only as good as the information you give!

 
Upvote 0 Downvote
Um...er...ah...sheepish look. Ok, you recall up above when I mentioned I'm new at this? Here's the deal. I opened a new browser before making any changes, and now the "doesntwork" html DOES work.

I'm totally new to stylesheets and I'm trying to learn them. So...from this behavior, should I conclude that when I tested earlier, my browser had the external stylesheet cached, and when I made a change, uploaded it, and refreshed the page, it was still looking at the old version of the stylesheet?

If that's the case, how would I get the browser to refresh it and see my changed stylesheet?

Thanks.
 
Upvote 0 Downvote

how would I get the browser to refresh it and see my changed stylesheet?
Click to expand...

Clear your browser cache.

You might also want to set your browser to check for new files "every time". I'm not sure where this setting is on any Mac browser, so you might need to hunt around a bit.

Dan


The answers you get are only as good as the information you give!

 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
230
Alt255
Alt255
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
770
3esolar
3
pendle666
  • Locked
  • Question
new website renders fine in IE/Edge but not in Chrome - test site was fine
Replies
2
Views
186
pendle666
pendle666
Camila James
  • Locked
  • Question
Shopify vs. WooCommerce – Which Platform To Use For Your Online Store?
Replies
3
Views
183
lucasbrown
lucasbrown
ashokkumary
  • Locked
  • Question
missing leading zero when we download in excel from html table data.
Replies
1
Views
192
spamjim
spamjim

Part and Inventory Search

Sponsor

Back
Top