The tabsh div and navbar div should always be shown behind the other divs. The
navimager and navimagel divs should always be shown in the front.
In Opera browsers the navimager and navimagel are shown behind the other
divs.
How can I move these two divs to the front? Thanks for any pointers
Webpage:
http://www.villa-corti.com/menus.htm
#navimagel {
position:relative;
width:85px;
height:115px;
z-index:1;
left: 13px;
top: 0px;
clear: left;
float: left;
}
#navimager {
position:relative;
width:239px;
height:90px;
z-index:3;
left: 250px;
top: 0px;
float: left;
}
Browser list with OS:
Opera 7.54u2 Windows XP
Opera 8.5.0 Windows XP
Opera 7.23 Windows 2000 Professional
Opera 8.5.0 Windows 2000 Professional
Opera 8.5.0 Macintosh OSX 10.4
Opera 7.5.4u1 Macintosh OSX 10.4
Opera 7.5.4u1 Macintosh OSX 10.3
Opera 8.5.0 Macintosh OSX 10.3
Opera 8.5.0 Linux Fedora Core 4
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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
body {
margin:0;
padding:0;
font: bold 11px/1.5em Verdana;
}
h2 {
font: bold 14px Verdana, Arial, Helvetica, sans-serif;
color: #000;
margin: 0px;
padding: 0px 0px 0px 15px;
}
#navimagel {
position:relative;
width:85px;
height:115px;
z-index:1;
left: 13px;
top: 0px;
clear: left;
float: left;
}
#navimager {
position:relative;
width:239px;
height:90px;
z-index:3;
left: 250px;
top: 0px;
float: left;
}
#logo {
position:relative;
width:238px;
height:73px;
z-index:2;
left: 100px;
top: 46px;
float: left;
}
/*- Menu Tabs H--------------------------- */
#tabsH {
float:left;
width:100%;
background:#fff;
font-size:93%;
line-height:normal;
}
#tabsH ul {
margin:0;
padding:10px 10px 0 94px;
list-style:none;
}
#tabsH li {
display:inline;
margin:0;
padding:0;
}
#tabsH a {
float:left;
background:url("tableftH.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsH a span {
float:left;
display:block;
background:url("tabrightH.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsH a span {float:none;}
/* End IE5-Mac hack */
#tabsH a:hover span {
color:#FFF;
}
#tabsH a:hover {
background-position:0% -42px;
}
#tabsH a:hover span {
background-position:100% -42px;
}
/*- Images for divs--------------------------- */
/* purple navigation */
#navbar {CLEAR: both; background:url("navtile.gif") repeat-x left top;
background-color: #9933CC; MARGIN: 0px; WIDTH: 760px;
}
#navbar UL {
PADDING-LEFT: 1em; MARGIN: 0px; LIST-STYLE-TYPE: none
}
#navbar LI {
PADDING-RIGHT: 0px; DISPLAY: inline; PADDING-LEFT: 0px; PADDING-BOTTOM:
0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
#navbar A:link {
BORDER-RIGHT: #c63 1px solid; PADDING-RIGHT: 6px; PADDING-LEFT: 6px;
FONT-SIZE: 12px; FLOAT: left; PADDING-BOTTOM: 5px; COLOR: #ccc; LINE-HEIGHT:
10px;
PADDING-TOP: 5px; WHITE-SPACE: nowrap; TEXT-DECORATION: none
}
#navbar A:visited {
BORDER-RIGHT: #c63 1px solid; PADDING-RIGHT: 6px; PADDING-LEFT: 6px;
FONT-SIZE: 1.1em; FLOAT: left; PADDING-BOTTOM: 5px; COLOR: #fff; LINE-HEIGHT:
10px;
PADDING-TOP: 5px; WHITE-SPACE: nowrap; TEXT-DECORATION: none
}
#navbar A.active:link {
TEXT-DECORATION: underline
}
#navbar A.active:visited {
TEXT-DECORATION: underline
}
#navbar A:hover {
TEXT-DECORATION: underline
}
</style>
</head>
<body>
<div id="navimagel"><img src="images/lake3.jpg"></div>
<div id="logo"><img src="images/lodgeadog.jpg" /></div>
<div id="navimager"><img src="images/dog1.jpg"></div>
<div id="tabsH">
<ul>
<li><a href="#" title="home"><span>home</span></a></li>
<li><a href="#" title="Link 2"><span>register</span></a></li>
<li><a href="#" title="Link 3"><span>aaaaaaaaa aaaa aa</span></a></li>
<li><a href="#" title="Longer Link Text"><span>aaaaa aa aaa
aaaaa</span></a></li>
<li><a href="#" title="Link 5"><span>about us</span></a></li>
</ul>
</div>
<DIV id=navshadow>
<DIV id=navbar>
<UL><LI><A href="">Search</A>
<LI><A href="">ssssssss</A>
<LI><A href="">sssssss sssssssssss</A>
<LI><A href="">fff fffffff</A>
<LI><A href="">Sfff</A>
<LI><A href="">Dffffffr</A>
<LI><A href="">Ddd Ddddd</A> </LI>
<br style="clear: both;" />
</UL></DIV>
</DIV>
</body>
</html>
---------------------------------
Inbox full of spam? Get leading spam protection and 1GB storage with All New
Yahoo! Mail.
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
