css conflict
 

Hi everyone, I just implemented my own header and footer to my forums but the fonts on the header and footer are different from the original on the rest on my site. There is a conflict with the css. Can someone help me solve this problem please? here is the link to my forum: http://www.timeshareorlando.com/forums

Thank you,

Jorge B.

The whole page looks like it is some type of sans-serif type font. It looks fine to me in firefox.

yes, but if you compare the size of the fonts on the menues for the header and footer, they are much bigger than in the rest of the site.

the reason is simple... your main site and style use 1em kind of font-size, but vBulletin use 10pt for the basic body font...

you just have to fix this by editing the CSS for the body the exact same way it is on your main site...

Please post your CSS for your added header & footer.

Thank you so much for your help, but could you please tell me where do I find this body section of the css? Thanks

Didn't you add the CSS for it to the Additional CSS Definitions Section?

Admincp/Styles & templates/style manager. Click "go" scroll down until you see that section.

I also see that the small square that is in the header navbar is in the banner while viewing the
home page, not in the navbar, where it belongs.

Please edit your post and add code brackets around your code. You need to add the CSS for your newly added header & footer to the
Additional CSS Definitions Section

Sorry I'm lost here. I look at the dropdown list of the style manager but I get lost as to where I add the css code section of my header and footer.

--------------- Added [DATE]1217946731[/DATE] at [TIME]1217946731[/TIME] ---------------

Here is the css for the header:

header {
CLEAR: both;
MARGIN: 0px auto;
BORDER-BOTTOM: #48525b 2px solid;
POSITION: relative;
HEIGHT: 3em;
background-color: #48525b;
background-image: url(../images/bg/header.gif);
background-repeat: repeat-x;
background-position: left bottom;
}
#header IMG {
LEFT: 10px; POSITION: absolute; TOP: 5%
}
#header UL {
FLOAT: right;
padding: 0px;
margin-top: 1.5em;
margin-right: 0.5em;
margin-bottom: 0px;
margin-left: 0px;
}
#header UL LI {
DISPLAY: inline; LIST-STYLE-TYPE: none
}
#header UL LI A {
BORDER-RIGHT: #4d5760 1px solid; PADDING-RIGHT: 1em; PADDING-LEFT: 1em; FLOAT: left; PADDING-BOTTOM: 0px; FONT: 400 1.1em/1em arial, sans-serif; COLOR: #fff; PADDING-TOP: 0px; LETTER-SPACING: 0.1em
}
#header UL LI A.last {
PADDING-RIGHT: 0px; BORDER-RIGHT-WIDTH: 0px
}
#header UL LI A:hover {
COLOR: #a8c9dc
}
#headerImg {
HEIGHT: 169px;
background-image: url(../images/beach_banner.jpg);
background-repeat: no-repeat;
background-position: left top;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;

and here is the css for the footer:

#footer {
CLEAR: both; MARGIN-TOP: -5em; FLOAT: left; WIDTH: 100%; HEIGHT: 5em
}
#footer #bg {
MARGIN: 0px auto;
POSITION: relative;
HEIGHT: 6em;
background-color: #49525b;
background-image: url(../images/bg/footer.gif);
background-repeat: repeat-x;
background-position: left bottom;
}
#footer #bg UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: right; PADDING-BOTTOM: 0px; MARGIN: 2em 0.5em 0px 0px; PADDING-TOP: 0px
}
#footer #bg UL LI {
DISPLAY: inline; LIST-STYLE-TYPE: none
}
#footer #bg UL LI A {
BORDER-RIGHT: #ccc 1px solid; PADDING-RIGHT: 1em; PADDING-LEFT: 1em; FLOAT: left; PADDING-BOTTOM: 0px; FONT: 400 1em/1em arial, sans-serif; COLOR: #ccc; PADDING-TOP: 0px; LETTER-SPACING: 0.1em
}
#footer #bg UL LI A.last {
PADDING-RIGHT: 0px; BORDER-RIGHT-WIDTH: 0px
}
#footer #bg UL LI A:hover {
COLOR: #a8c9dc
}
#footer #bg IMG {
LEFT: 10px; POSITION: absolute; TOP: 6%

Follow these steps to add your additional CSS