PDA

View Full Version : css conflict


bat3
05 Aug 2008, 01:17
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.

Lynne
05 Aug 2008, 04:02
The whole page looks like it is some type of sans-serif type font. It looks fine to me in firefox.

bat3
05 Aug 2008, 10:08
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.

nexialys
05 Aug 2008, 12:10
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...

blind-eddie
05 Aug 2008, 13:17
Please post your CSS for your added header & footer.

bat3
05 Aug 2008, 13:18
Thank you so much for your help, but could you please tell me where do I find this body section of the css? Thanks

blind-eddie
05 Aug 2008, 13:21
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.

blind-eddie
05 Aug 2008, 14:04
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

bat3
05 Aug 2008, 14:25
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 1217946731 at 1217946731 ---------------

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%

blind-eddie
05 Aug 2008, 14:35
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.


Follow these steps to add your additional CSS

bat3
05 Aug 2008, 15:10
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.

Lynne
05 Aug 2008, 16:01
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.

bat3
05 Aug 2008, 17:04
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 1217957833 at 1217957833 ---------------

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