AnthonyJ 0 Report post Posted October 14, 2011 Hello out there, Can you guys look at this code and show me where I went wrong. you will see at the top of the page I want the site title just below the grey outer shell. I attached the files below. arj_help.html arj_help.css Share this post Link to post Share on other sites
Wickham 8 Report post Posted October 15, 2011 Add .container { padding-top: 10px; } to the css file. I have a suspicion that margin-collapse is having an effect from the h1 and causing the problem but I haven't tested any further as the .container class makes the space in Firefox. IE 9 doesn't show any header backgrounds so the page looks terrible. IE9 doesn't process the header background gradient and IE6 to IE8 don't process the border-radius. See http://www.findmebyip.com/litmus/ For IE9 to show a background add a plain background-color and border-radius after the styles for linear-gradient and gradient with the browser prefixes. .container { padding-top: 10px; } /*added style*/ header { padding-top: 20px; margin-top: 20px; color: #fff; text-align:center; font-size: 24px; height: 80px; width: 900px; background: -moz-linear-gradient( center top, rgb(12,12,50) 0%, rgb(120,120,160) 100% ); background: -webkit-gradient( linear, right top, right bottom, color-stop (0,rgb(12,12,50)), color-stop (1,rgb(120,120,160)) ); -moz-border-radius: 12px 12px 12px 12px; -webkit-border-radius: 12px 12px 12px 12px; background-color: #ccc; border-radius: 12px 12px 12px 12px; /*added styles for IE9*/ } which shows color with border-radius in IE9 but no radius in IE6 to IE8, or use javascript for IE rounded corners. Share this post Link to post Share on other sites
virtual 3 Report post Posted October 15, 2011 Take the width off your body tag. On section tag replace margin-left: 120px with margin: 0 auto. Define .container in your css, give it width of 900px and center it with margin: 0 auto, then push it down into the container with padding-top: 20px. Not sure if that is the look you want. Share this post Link to post Share on other sites
AnthonyJ 0 Report post Posted October 17, 2011 No that is not quite what I was after but you gave me an idea... How would I go about doing this?...First take a look at the site currently with attached files. Let's say that I add three more colors to the right of the grey container. So I would have the white container with the content, then the grey then say..red, yellow, and green ( not that I would use those colors but for arguments sake). Now I want the pages in my nav bar to be one of those colors. How would I stagger those containers and when you click on the nav bar the appropriate page comes the fore-front? Make sense? helpme.css helpme.html Share this post Link to post Share on other sites