Hi everyone
I'm in desperate need of some guidance here - as can be seen if you open the following link:
http://www.nutritionundressed.com.au/site_stack/
The 'floating' nav bar anchored to the bottom of the window resizes perfectly in firefox, but not in internet explorer. For some reason explorer is associating it with the div "background_inner", as it only stretches to the left edge of said DIV.
As the DIV containing the bar is above the problem DIV in the markup, and has a higher z-index, I can't understand the problem!
Help Please!
CODE:
HTML==================================================================
<!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>Rockstack // Guitar, Bass, Drum & Vocal Resource</title>
<link href="styles1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="nav_bar">
<div id="nav_bar_left">
<b>CURRENT LOCATION</b> : <a href="#">ROCKSTACK</a> > <a href="#">GUITAR</a> > <a href="#">LEARN</a>
</div>
<div id="nav_bar_right">
</div>
</div>
<div id="background_inner">
<div id="content_wrapper">
<div id="navigation">
<div id="navigation_top">
<img src="images/nav_images/rockstack.jpg" alt="Home"/>
</div>
<div id="navigation_bottom">
<div id="navigation_bottom_left">
<a id="imagestack" href="#" title="Imagestack, Baby!"><span>Imagestack</span></a><a id="guitar" href="#" title="Shred!"><span>Guitar</span></a>
</div>
<div id="navigation_bottom_right">
<a id="bass" href="#" title="Slap!"><span>Bass</span></a><a id="drums" class="selected" href="#" title="Bang!"><span>Drums</span></a><a id="vocals" href="#" title="Scream!"><span>Vocals</span></a>
</div>
<div id="navigation_bottom_far_right">
<a id="learn" href="#" title="Learn"><span>Learn</span></a><a id="teach" href="#" title="Teach"><span>Teach</span></a><a id="gear" href="#" title="Gear"><span>Gear</span></a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<CSS>===================================================================
@charset "utf-8";
/* CSS Document */
* {margin:0; padding:0; border:0;}
/* Layout & General Styles
---------------------------------------------------------------------------------*/
html{
height:100%;
}
body{
height:100%;
background:#000 url(images/bg_new_outer.jpg) no-repeat center top;
width:100%;
}
#nav_bar{
z-index:10;
height:32px;
width:100%;
position:fixed;
bottom:0px;
font-family:Arial, Helvetica, sans-serif;
font-size:8pt;
color:#f4edd8;
text-decoration:none;
background:url(images/nav_images/nav_bar_bg.png) top left repeat-x;
}
#nav_bar a{
font-family:Arial, Helvetica, sans-serif;
font-size:8pt;
color:#f4edd8;
text-decoration:none;
}
#nav_bar a:hover{
color:white;
text-decoration:underline;
}
#nav_bar_left{
height:23px;
width:300px;
float:left;
margin:auto;
padding-left:20px;
padding-top:9px;
}
#nav_bar_right{
height:32px;
width:300px;
background:url(images/nav_images/search_bar_bg.png);
float:left;
}
#background_inner{
background:url(images/bg_new_inner.jpg) no-repeat center top;
width:906px;
height:900px;
margin:0 auto 0;
}
#content_wrapper{
position:absolute;
margin-top:66px;
margin-left:23px;
}
#navigation{
position:relative;
}
#navigation span{
display:none;
}
#navigation_top{
position:relative;
width:906px;
height:66px;
display:inline-block;
}
#navigation_bottom{
position:relative;
width:906px;
height:100px;
}
#navigation_bottom_left{
position:relative;
width:125px;
height:100px;
float:left;
}
#navigation_bottom_right{
position:relative;
width:223px;
height:100px;
display:inline-block;
float:left;
}
#navigation_bottom_far_right{
position:relative;
width:195px;
height:100px;
display:inline-block;
margin-right:46px;
float:right;
}
/* Navigation Classes
---------------------------------------------------------------------------------*/
#imagestack{
display:block;
width:125px;
height:36px;
background:url(images/nav_images/imagestack.jpg) no-repeat 0 0;
}
#imagestack:hover{
background-position:0 -36px;
}
#guitar{
display:block;
width:125px;
height:64px;
background:url(images/nav_images/guitar.jpg) no-repeat 0 0;
}
#guitar:hover{
background-position:0 -64px;
}
#bass{
display:block;
width:64px;
height:100px;
float:left;
background:url(images/nav_images/bass.jpg) no-repeat 0 0;
}
#bass:hover{
background-position:0 -100px;
}
#drums{
display:block;
width:80px;
height:70px;
position:relative;
float:left;
background:url(images/nav_images/drums.jpg) no-repeat 0 0;
}
#drums:hover{
background-position:0 -100px;
}
#vocals{
display:block;
width:79px;
height:60px;
position:relative;
float:left;
background:url(images/nav_images/vocals.jpg) no-repeat 0 0;
}
#vocals:hover{
background-position:0 -100px;
}
#learn{
display:block;
width:70px;
height:50px;
position:relative;
float:left;
background:url(images/nav_images/learn.png) no-repeat 0 0;
}
#learn:hover{
background-position:0 -100px;
}
#teach{
display:block;
width:60px;
height:50px;
position:relative;
float:left;
background:url(images/nav_images/teach.png) no-repeat 0 0;
}
#teach:hover{
background-position:0 -100px;
}
#gear{
display:block;
width:60px;
height:50px;
position:relative;
float:left;
background:url(images/nav_images/gear.png) no-repeat 0 0;
}
#gear:hover{
background-position:0 -100px;
}