khaos337 Posted February 28, 2011 Share Posted February 28, 2011 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 More sharing options...
cousineaug Posted February 28, 2011 Share Posted February 28, 2011 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 trydiv.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 More sharing options...
jeffman Posted February 28, 2011 Share Posted February 28, 2011 Agreed on the wrapper width. 1024px wide is EXTREMELY common out there. Take some off for scrollbars, and the widest I ever recommend is 980px. Link to comment Share on other sites More sharing options...
khaos337 Posted February 28, 2011 Author Share Posted February 28, 2011 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 trydiv.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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.