papa5murf Posted April 23, 2009 Report Share Posted April 23, 2009 This is probably a very simple fix, but I just can't seem to figure it out. Basically, I can't get the side bar to line up properly. It's fine in Explorer but for some odd reason it goes under the banner in Firefox. If you click the link below, I'm talking about the white box on the left. http://www.dylanpearson.com/websites/ciodash/index.html http://www.dylanpearson.com/websites/ciodash/style.css This side bar will have additional links in it (which shouldn't be a problem once I get the alignment of the box itself sorted). I will be adding another box on the right and a footer at a later time. Thanks in advance for any help. Quote Link to comment Share on other sites More sharing options...
virtual Posted April 23, 2009 Report Share Posted April 23, 2009 (edited) In Firefox, Opera and Safari it shows up under the banner. Add 20px to the top margin in the sidebar div to move it down the page. Edited April 23, 2009 by virtual Quote Link to comment Share on other sites More sharing options...
newseed Posted April 23, 2009 Report Share Posted April 23, 2009 I am not sure why you need all those position: relative but you should establish your bannercontainer to have a fixed height that will fit all those other child divs. This will then clear the bodycontainer thus pushing the sidebar down naturally. Quote Link to comment Share on other sites More sharing options...
papa5murf Posted April 24, 2009 Author Report Share Posted April 24, 2009 Neither of those worked. I've refined the coding, the URL's are the same as posted above. There is a further underlying issue. The problem now is that in Firefox the spacing between the bottom of the banner and the top of the side bar is massive, it's perfect in Explorer. I need the spacing between the two browsers to be the same. Quote Link to comment Share on other sites More sharing options...
Wickham Posted April 24, 2009 Report Share Posted April 24, 2009 (edited) First add a background-color to #bannercontainer:- #bannercontainer { background-color: skyblue; text-align: left; width: 851px; height: 300px; } This shows you that the white div with blah blah is tight up under the #bannercontainer in IE7 and Firefox. It also shows that Firefox has placed the logo.jpg right up at the top of #bannercontainer which has raised the banner.gif below so that there appears to be a bigger space above the white div. This is because Firefox has not applied the top margin of 20px to the h3 tag, so I changed it from margin to padding and it works in Firefox so IE7 is unchanged and Firefox shows to 20px top space above logo.jpg:- #bannercontainer h3 { height: 61px; width: 169px; text-align: left; margin: 0 0 0 20px;/*20px 0px 0px 20px;*/ padding: 20px 0 0 0;/*0px 0px 0px 0px;*/ z-index: 1; } I don't know why Firefox doesn't apply the margin to the top. I used the files as they were in your first post within the last few minutes (in case you've changed them); I didn't apply Virtual's or newseed's suggestions. Edited April 24, 2009 by Wickham Quote Link to comment Share on other sites More sharing options...
papa5murf Posted April 24, 2009 Author Report Share Posted April 24, 2009 Cheers Wickham. That worked perfectly. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.