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

Ok, I followed those steps and save the changes but I didn't see any difference. I added the css code to the Additional CSS Definitions Section and I also tried to the header table section but no effect.

I just looked at the source code for your site and I don't see any of the css you posted above in your source code. Did you put it in a separate file? Take a look at the source code, do you see it?

And do you realize you have a second <head> section inside your <body> section? That's not good.

After saving the posted css and not seeing the changes, I went back and restore the original. I have placed the header html in the headerinclude section to avoid the duplicate head section and I reentered the css, but I still do not see any changes

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

Thank all of you for your help. I finally fixed it :D by making a copy of my site's css to a new directory and changing the font size to 10 pt as suggested by nexialys but instead changing it in the control panel I did it in my sites css. Thanks again

Jorge Batres
Orlando, FL