Hey I implemented a jquery show/hide menu on my testimonials page, however unfortunately it has messed up the rest of my page a little. On the rest of the other pages there is a gap of about 2 px where the black background stretches along on every page. However on the testimonials page it is not there and also the background image moves down when I insert <br/> tags which it doesn't on the rest of the pages. Think it is a problem with the testimonials css document but I don't know what? If anyone could help that would be amazing. The page is:- http://www.cherrietestingwebsite.com/testimonials.html

Hey I implemented a jquery show/hide menu on my testimonials page, however unfortunately it has messed up the rest of my page a little. On the rest of the other pages there is a gap of about 2 px where the black background stretches along on every page. However on the testimonials page it is not there and also the background image moves down when I insert <br/> tags which it doesn't on the rest of the pages. Think it is a problem with the testimonials css document but I don't know what? If anyone could help that would be amazing. The page is:- http://www.cherrietestingwebsite.com/testimonials.html

 

Your problem has to do with the "margin" property. Within testimonials.css, you have this code...

 

body {
width: 950px;
margin: 0px auto;
padding-top: 10px;
font: 75%/120% Arial, Helvetica, sans-serif;
}

 

The "margin: 0px auto;" gets rid of the default margins that some browsers will give your website. If you do want the top margin, there are several ways to accomplish this.

 

Personally, I'd get rid of "margin: 0px auto" altogether and replace it with two properties "margin-right: auto;" and "margin-left: auto;" By doing this, you get rid of the "0px" top margin value that's giving you the problem. So your code will look like...

 

body {
width: 950px;
margin-left: auto;
margin-right: auto;
padding-top: 10px;
font: 75%/120% Arial, Helvetica, sans-serif;
}

 

However, you shouldn't really rely on default browser values likes margins; Different browsers have different default values so that "black strip" at the top may be thicker or thinner depending on the browser. To correct this, in every page you have, you should set the margin of the body. So, add "margin-top: 10px;" to your code to gain a 10px top margin. And so, the resulting code will be...

 

body {
width: 950px;
margin-top: 10px;    
margin-left: auto;
margin-right: auto;
font: 75%/120% Arial, Helvetica, sans-serif;
}

 

Edit: Also, get rid of the "padding-top" property for your body in "testimonials.css" It's not needed and is overridden by "padding: 0px;" in "style.css"

 

Kind Regards

Edited June 10, 201214 yr by Renaissance-Design
Please use the code button or tags to format your code.

Good advice, +1.

Your problem has to do with the "margin" property. Within testimonials.css, you have this code...

 

body {
width: 950px;
margin: 0px auto;
padding-top: 10px;
font: 75%/120% Arial, Helvetica, sans-serif;
}

 

The "margin: 0px auto;" gets rid of the default margins that some browsers will give your website. If you do want the top margin, there are several ways to accomplish this.

 

Personally, I'd get rid of "margin: 0px auto" altogether and replace it with two properties "margin-right: auto;" and "margin-left: auto;" By doing this, you get rid of the "0px" top margin value that's giving you the problem. So your code will look like...

 

body {
width: 950px;
margin-left: auto;
margin-right: auto;
padding-top: 10px;
font: 75%/120% Arial, Helvetica, sans-serif;
}

 

However, you shouldn't really rely on default browser values likes margins; Different browsers have different default values so that "black strip" at the top may be thicker or thinner depending on the browser. To correct this, in every page you have, you should set the margin of the body. So, add "margin-top: 10px;" to your code to gain a 10px top margin. And so, the resulting code will be...

 

body {
width: 950px;
margin-top: 10px;    
margin-left: auto;
margin-right: auto;
font: 75%/120% Arial, Helvetica, sans-serif;
}

 

Edit: Also, get rid of the "padding-top" property for your body in "testimonials.css" It's not needed and is overridden by "padding: 0px;" in "style.css"

 

Kind Regards

 

in reply to that however rather than using three margin elements

 

body {
width: 950px;
margin-top: 10px;    
margin-left: auto;
margin-right: auto;
font: 75%/120% Arial, Helvetica, sans-serif;
}

 

 

you can do the following:

 

body {
width: 950px;
margin: 0 auto;
margin-top: 10px;
font: 75%/120% Arial, Helvetica, sans-serif;
}

 

this way you use less lines of code and is still valid markup

 

[/code]