Jump to content

Help with fixed div in IE7


khaos337
 Share

Recommended Posts

I have a page that displays correctly in every browser except IE 7.Basically there is a narrow bar i want fixed across the top of the page at all times, then the content to be centered in teh rest of the page.below is the 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><title></title><link rel="stylesheet" type="text/css" href="includes/ie7.css"/></head><body><div class="topbar">		</div><div class="wrapper"></div></body></html>

and CSS:

html, body{	background: #000000;	margin: 0px;	height: 100%;}div.wrapper{		background: #FFFFFF;	width: 1050px;	min-height: 100%;	height: auto !important;	height: 100%;	margin: 0 auto;}div.topbar{	position: fixed;	background: #dfdfdf;	height: 40px;	width: 100%;}

It will display properly in IE 7 if i change the position of the .topbar to relative. When it's fixed though, the bar begins at the left margin of the wrapper, and not the body.code can be viewed at www.khaos337.com/ie7.phpAny help would be greatly appreciated!

Link to comment
Share on other sites

It will display properly in IE 7 if i change the position of the .topbar to relative. When it's fixed though, the bar begins at the left margin of the wrapper, and not the body.
I don't have IE7 but try this outYou have set top bar FIXED but you did not say WHERE to fix it. I suspect IE7 has a default of TOP LEFT of current container.so try
div.topbar{	position: fixed;	background: #dfdfdf;	height: 40px;	width: 100%;	top: 0px;	left: 0px;}

question: why a width of 1050 on the wrapper? That is really wide even by today's standards....Guy

Link to comment
Share on other sites

I don't have IE7 but try this outYou have set top bar FIXED but you did not say WHERE to fix it. I suspect IE7 has a default of TOP LEFT of current container.so try
div.topbar{	position: fixed;	background: #dfdfdf;	height: 40px;	width: 100%;	top: 0px;	left: 0px;}

question: why a width of 1050 on the wrapper? That is really wide even by today's standards....Guy

Thanks, that did it. When you look back on it the solutions are always so simple, yet so hard to see sometimes.As for the width, there background i'm using has a shadow, the actual width of the "page" is 1000px, and then the content w/in it 960px. I see where you're coming from though. Will keep it in mind in the future.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...