IE 7 is giving me two issues: 1. Sidebar is floating way out to the right creating a horizontal scroll. not sure why its not respecting the width of the page-wrap that it is included in 2. Footer lifts up off the page This is surely because of the negative positioning i used on the footer navigation. to clarify: i have a footer div with width set to 100% to get a solid background color, then i placed a div over that with my gradient background image. Then i used negative relative positiong to bring the footer-nav up over the background image.
Any help will be much appreciated as usual. Cheers
1) Change you #sidebar to be "margin:0" and add "right:0;" 2) Delete the #footer-burst element and add the background image straight to the Footer div: background: #9B9F9F url(burst.png) no-repeat 420px 0; You'll also need to fiddle with some other footer elements to get them back in the box.
The main note is that Float:right won't affect a position:absolute (or relative). If you are using position: absolute, USE IT to position the element. Use Left, right, top, and bottom; Don't use margin, padding or float.
Live link : http://bepeace.org/test/index.html
IE 7 is giving me two issues:
1. Sidebar is floating way out to the right creating a horizontal scroll. not sure why its not respecting the width of the page-wrap that it is included in
2. Footer lifts up off the page This is surely because of the negative positioning i used on the footer navigation. to clarify:
i have a footer div with width set to 100% to get a solid background color, then i placed a div over that with my gradient background image. Then i used negative relative positiong to bring the footer-nav up over the background image.
Any help will be much appreciated as usual.
Cheers
1) Change you #sidebar to be "margin:0" and add "right:0;"
2) Delete the #footer-burst element and add the background image straight to the Footer div:
background: #9B9F9F url(burst.png) no-repeat 420px 0;
You'll also need to fiddle with some other footer elements to get them back in the box.
Let's look at this real quick:
#sidebar {float:right;
margin:0 0 0 650px;
padding:0;
position:absolute;
top:235px;
width:260px;
}
The main note is that Float:right won't affect a position:absolute (or relative).
If you are using position: absolute, USE IT to position the element. Use Left, right, top, and bottom; Don't use margin, padding or float.
Hope that helps.