Jammy_Stuff Posted April 9, 2007 Share Posted April 9, 2007 I'm currently working on a new design for my website and I'm going for a two tone idea. I have centered the content of the page and made it 780px wide. I want the center bit to be a different color to the rest. Here is the code currently:body{background-color:#333333;color:#999999}h1, h2{text-align:center;}#outer{width:780px;background-color:#000000;margin:auto;}The problem is, when a page is less tall than the monitor, I just get a gray background with a black box in it (when I want sort of a black stripe in the middle and a gray stripe on either side.Any ideas? Link to comment Share on other sites More sharing options...
real_illusions Posted April 9, 2007 Share Posted April 9, 2007 it sounds like everything is how it should be from what you've said and css you provided.Have you a link to the page so we can look at the html too? Link to comment Share on other sites More sharing options...
msd Posted April 9, 2007 Share Posted April 9, 2007 Maybe you should use min-height. Link to comment Share on other sites More sharing options...
Jammy_Stuff Posted April 9, 2007 Author Share Posted April 9, 2007 Ok. Adding min-height:768px to it has kind of sorted out the problem of it not reaching the bottom of the page but I'm not too keen on it as it is screen resolution specific. It still means there is a gray bit at the top as well so I would like to get rid of that. Anyway, I've thrown together a quick example page so you can see it.http://www.james-wheatley.co.uk/css/index.php Link to comment Share on other sites More sharing options...
msd Posted April 9, 2007 Share Posted April 9, 2007 body{margin:0; padding:0;background-color:#333333;color:#999999} Min-height doesn't work for Internet Explorer, search for "min-height hack"! Link to comment Share on other sites More sharing options...
Jammy_Stuff Posted April 9, 2007 Author Share Posted April 9, 2007 I've added your bit about margins and padding and I'm still getting the bit at the top. Here's a screenshot with the bit I want rid of circled in red.http://www.james-wheatley.co.uk/files/Screenshot.jpg(left as a link for dial up users) Link to comment Share on other sites More sharing options...
msd Posted April 9, 2007 Share Posted April 9, 2007 Sorry, I forgot something.Put margin:0; padding:0; for h1 and h2. Link to comment Share on other sites More sharing options...
Jammy_Stuff Posted April 10, 2007 Author Share Posted April 10, 2007 Done. It still shows up . Link to comment Share on other sites More sharing options...
msd Posted April 10, 2007 Share Posted April 10, 2007 In your file "normal.css" I don't see margin:0; padding:0; for h1 and h2.Check it again! Link to comment Share on other sites More sharing options...
Jammy_Stuff Posted April 10, 2007 Author Share Posted April 10, 2007 Works now. Strange. It wasn't working on the actual site but when I uploaded it on the testing site, it started working on both. Cheers. Link to comment Share on other sites More sharing options...
msd Posted April 10, 2007 Share Posted April 10, 2007 :)I repeat, search for "min-height hack"!Just min-height is not enough for Internet Explorer! Link to comment Share on other sites More sharing options...
psypent81 Posted June 5, 2007 Share Posted June 5, 2007 :)I repeat, search for "min-height hack"!Just min-height is not enough for Internet Explorer!This min-height hack doesnt seem to work for what Im trying to do. What about for when the bleed is for a higher resolution monitors? Does this work for 800x600 to 1070xXXXX monitors? When viewed on higher resolution monitors, the blled doesnt reach all the way to the top..Any help would be appreciated. Thanks-psypent Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now