ShootingBlanks Posted February 18, 2009 Share Posted February 18, 2009 I can only get my page to display correctly in IE6. Not IE7 or Firefox. If anyone could help, it'd be much appreciated! Basically, the borders on the left/right don't stretch all the way down the page in IE7 and Firefox (like they do in IE6). Here is the website: http://www.stacyandmatt.com/ Here's the simple HTML: <body> <div id="container"> <div id="maincontent"> <div id="header"> <p> </p> </div> <div id="navBar"> <p> </p> </div> <div id="mainRight"> <img src="images/mainPic.jpg" /> </div> <div class="spacer"> </div> </div> </div> </body> And here is the CSS: html, body { background: #000; font-family: Arial, Helvetica, sans-serif; padding: 0; margin: 0; color: #F09; height: 100%; line-height: 1.5em; } #container { background: #000; height: 100%; width: 780px; margin:auto; padding: 0; text-align: justify; } #maincontent { background: #000 url(../images/borderTest.jpg) repeat-y top left; height: 100%; margin: 0px; padding: 0px; width: 100%; border-right: 6px solid #F09; overflow: visible; } #header { background: url(../images/header.gif) no-repeat top left; width: 100%; height: 141px; margin: 0px; padding: 0px; } #navBar { width: 155px; float: left; padding: 20px 0px 0px 40px; margin: 0px; color: #000000; } #mainRight { width: 555px; float: right; padding: 20px 5px 0px 5px; margin: 0px; } .spacer { clear: both; } Thanks! Quote Link to comment Share on other sites More sharing options...
ShootingBlanks Posted February 19, 2009 Author Share Posted February 19, 2009 UPDATE: Okay - I actually just figured this out. But now there's a new problem. I fixed the above problem by changing this part: #container { background: #000; height: 100%; width: 780px; margin:auto; padding: 0; text-align: justify; } * html #container { height: 100%; } However, now only in Firefox there appears to be an approximately 10-20px gap (margin-top?) on the top of the page (above the #container). Any thoughts on this one???... Quote Link to comment Share on other sites More sharing options...
djjamiegee Posted February 19, 2009 Share Posted February 19, 2009 hiya im still new to css but try in the #container top:0px; Quote Link to comment Share on other sites More sharing options...
ShootingBlanks Posted February 19, 2009 Author Share Posted February 19, 2009 hiya im still new to css but try in the #container top:0px; Nope - no luck. Any other ideas??? Quote Link to comment Share on other sites More sharing options...
jcombs_31 Posted February 19, 2009 Share Posted February 19, 2009 could be margin:auto; should be margin: 0 auto; Quote Link to comment Share on other sites More sharing options...
ShootingBlanks Posted February 19, 2009 Author Share Posted February 19, 2009 could be margin:auto; should be margin: 0 auto; Still no luck. :0( Quote Link to comment Share on other sites More sharing options...
shadiadiph Posted February 21, 2009 Share Posted February 21, 2009 maybe try loosing line-height in your body add it somewhere else that maybe it i alsways start my css docs with something like this * { padding: 0; margin: 0; } body { background: #000; } #container{ margin: 0; width: 960px; background: #000; border: 0px solid #fcce31; } I never have any spaces at the top hope it helps Quote Link to comment Share on other sites More sharing options...
jcombs_31 Posted February 21, 2009 Share Posted February 21, 2009 maybe try loosing line-height in your body add it somewhere else that maybe it i alsways start my css docs with something like this * { padding: 0; margin: 0; } This is not a good idea as it takes longer to parse through every element. I personally don't think it is necessary to use any resets, but if you do you should use one that is more specific. Quote Link to comment Share on other sites More sharing options...
SuperBlue Posted February 22, 2009 Share Posted February 22, 2009 This is not a good idea as it takes longer to parse through every element. I personally don't think it is necessary to use any resets, but if you do you should use one that is more specific. Why is that? Some of us likely need to define custom margins/paddings anyway, and as such its a perfect method to get the job done. Quote Link to comment Share on other sites More sharing options...
jcombs_31 Posted February 22, 2009 Share Posted February 22, 2009 For one it can have undesirable effects. Form elements are picky and there are some things that you are better off not messing with. http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/ I've also read that it can be slower but I can't really confirm it. Quote Link to comment Share on other sites More sharing options...
haku Posted February 23, 2009 Share Posted February 23, 2009 I prefer to use a more specific reset sheet myself, rather than the blanket *. Quote Link to comment Share on other sites More sharing options...
TheFilmGod Posted February 23, 2009 Share Posted February 23, 2009 I have to disagree with Eric Meyer on this one - Listing all the elements to "reset them" is a waste of bandwidth and processing power. I developed thefilmGOD's reseting technique: * { margin, padding: 0; } I haven't experienced any problems with it yet. 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.