The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Horizontal stretch problems with Internet Explorer
tristan042
post Nov 2 2009, 11:41 AM
Post #1





Group: Members
Posts: 1
Joined: 2-November 09
Member No.: 10,205



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;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
aspmkt
post Nov 2 2009, 04:33 PM
Post #2


Member
***

Group: Members
Posts: 56
Joined: 28-October 09
Member No.: 10,164



It looks exactly the same to me in FF and IE8, other than the alignment of where the search field is at. In FF it's to the right slightly, in IE8 it lines up perfectly with your background IE6 is where it looks off, it's at the top and there is no transparency, it's a blue color I get in IE6 when I try to use png files. I don't think IE6 likes transparency in png files.

I don't know a lot about the coding to fix IE6 issues other than what I've searched out to fix my own problems I've found. Sorry.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 24th August 2019 - 05:43 PM