Executive Pro Header-Footer Dimensions

[BlakeN]

Hi,

For some reason the executive pro header and footer is slightly smaller in width than the rest of the page. I have tried reloading the original style sheet to see if it was something I altered but that was not the case.

It looks like both are off by about 1px but I would like to know how to get it to line up with the rest of the site.

What can be done to accomplish this?

Thank you,
Blake

http://directmktg101.com/

[cwalsh]

It looks like it is the box shadow on .site-inner. Either remove them from the CSS or change the 1px to 0

.site-inner {
-moz-box-shadow: 0 0 0 1px #fff;
-webkit-box-shadow: 0 0 0 1px #fff;
background-color: #fff;
box-shadow: 0 0 0 1px #fff;
clear: both;
margin: 0 auto;
overflow: hidden;
}

---

Need website customization services or other help? Caley @ PixelPerfect Design Studio | Connect with me on Twitter: @pixelsperfect | Like me on Facebook: https://www.facebook.com/PixelPerfectDesignStudio

[nutsandbolts]

Try this... Hopefully it doesn't cause a domino effect that breaks something else.

Find this:

.site-inner {
-moz-box-shadow: 0 0 0 1px #fff;
-webkit-box-shadow: 0 0 0 1px #fff;
background-color: #fff;
box-shadow: 0 0 0 1px #fff;
clear: both;
margin: 0 auto;
overflow: hidden;
}

and change it to this:

.site-inner {
background-color: #fff;
clear: both;
margin: 0 auto;
overflow: hidden;
}

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[BlakeN]

I actually do not believe the mistake is occurring because of the box shadow. I tried removing the box shadow coding and the error was still apparent.

Here is what is currently implemented:

/* Site Containers
--------------------------------------------- */

.site-container {
margin: 0 auto;
max-width: 1140px;
box-shadow: rgb(170, 170, 170) 0px 0px 15px;
}

.executive-pro-landing .site-container {
max-width: 800px;
}

.site-inner {
-moz-box-shadow: 0 0 0 1px #fff;
-webkit-box-shadow: 0 0 0 1px #fff;
background-color: #fff;
box-shadow: 0 0 0 1px #fff;
clear: both;
margin: 0 auto;
overflow: hidden;
}

.executive-pro-home .site-inner {
overflow: visible;
}

I went ahead and removed the shadowing (box-shadow: rgb(170, 170, 170) 0px 0px 15px;) so you can see where the header is still apparent.

Thanks for the help!

[nutsandbolts]

You didn't take out all of it - there are 3 rules assigned to .site-inner for box shadow, two of which are still there. That's why I said to remove what was there and replace it with what I had above - was easier than explaining that there are 3 rules there. 🙂

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[BlakeN]

It looks like it is working out.

Thank you!

[Author]

Posts