CSS Issue

**RealitY** · 12-30-2004, 06:55 PM

I have a web page that has 2 css files from merging 2 ideas. When I go to the main page which has a logo graphic setup all is fine. Although when I go to sub pages without the logo the text on the nav bar changes from small to large, yuk.

Ive tried deleting the second css file yet the issue continues. Ive put both css files here, without the first the font is big which I dont want. Ive tried deleting the ssecond but yet the issue continues so it must be something in the first one I think...

css1.css

Code:

BODY
{
}
.NoBreakBeforeAfter
{
    MARGIN-BOTTOM: 0px;
    MARGIN-TOP: 0px
}
P
{
    COLOR: #444444;
    FONT-FAMILY: Tahoma;
    FONT-SIZE: 11px;
    MARGIN-BOTTOM: 4px;
    MARGIN-TOP: 4px
}
.DoubleBreakBefore
{
    MARGIN-TOP: 8px
}
.HalfBreakBefore
{
    MARGIN-TOP: 2px
}
TABLE.Middle
{
    BACKGROUND-COLOR: #ebedec;
    BORDER-BOTTOM: #000000 1px;
    BORDER-LEFT: #000000 1px solid;
    BORDER-RIGHT: #000000 1px solid;
    BORDER-TOP: #000000 1px
}
TABLE.Bottom
{
    BACKGROUND-COLOR: #ebedec;
    BORDER-BOTTOM: #000000 1px solid;
    BORDER-LEFT: #000000 1px solid;
    BORDER-RIGHT: #000000 1px solid;
    BORDER-TOP: #000000 1px
}
.DoubleBreakBeforeAfter
{
    MARGIN-BOTTOM: 8px;
    MARGIN-TOP: 8px
}
.NoBreakBefore
{
    MARGIN-TOP: 0px
}
.Indented8
{
    MARGIN-LEFT: 8px;
    MARGIN-RIGHT: 8px
}
.HalfBreakBeforeAfter
{
    MARGIN-BOTTOM: 2px;
    MARGIN-TOP: 2px
}
A
{
    COLOR: #000000;
    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
    FONT-SIZE: 11pt;
    TEXT-DECORATION: none
}
TABLE.Top
{
    BACKGROUND-COLOR: #ebedec;
    BORDER-BOTTOM: #000000 1px;
    BORDER-LEFT: #000000 1px solid;
    BORDER-RIGHT: #000000 1px solid;
    BORDER-TOP: #000000 1px solid
}
INPUT
{
    COLOR: #444444;
    FONT-FAMILY: Tahoma;
    FONT-SIZE: 11px;
    MARGIN-BOTTOM: 0px;
    MARGIN-TOP: 0px
}
P.Title
{
    COLOR: #a10000;
    FONT-FAMILY: Arial;
    FONT-SIZE: 10px;
    FONT-WEIGHT: bold
}
.TripleBreakBefore
{
    MARGIN-TOP: 16px
}
TD.Top1
{
    BACKGROUND-IMAGE: url(images/Top1Back.jpg);
    BACKGROUND-REPEAT: repeat-x
}
.Indented18
{
    MARGIN-LEFT: 18px;
    MARGIN-RIGHT: 18px
}
TD.Bottom1
{
    BACKGROUND-IMAGE: url(images/Bottom1Back.jpg);
    BACKGROUND-REPEAT: repeat-x
}
TD.Box2
{
    BACKGROUND-IMAGE: url(images/Box2Back.gif);
    BACKGROUND-REPEAT: repeat-x
}
INPUT.Box1
{
    WIDTH: 120px
}
TD.Top4Left
{
    BACKGROUND-IMAGE: url(images/Top4LeftBack.jpg);
    BACKGROUND-REPEAT: repeat-x
}
TD.Top4Right
{
    BACKGROUND-IMAGE: url(images/Top4RigthBack.jpg);
    BACKGROUND-REPEAT: repeat-x
}
TD.Box8
{
    BACKGROUND-IMAGE: url(images/Box8Back.gif);
    BACKGROUND-REPEAT: repeat-x
}
TD.Box4
{
    BACKGROUND-IMAGE: url(images/Box4Back.gif);
    BACKGROUND-REPEAT: repeat-y
}
TD.Box6
{
    BACKGROUND-IMAGE: url(images/Box6Back.gif);
    BACKGROUND-REPEAT: repeat-y
}
TD.HBar
{
    BACKGROUND-IMAGE: url(images/HBarBack.jpg)
}
TD.PinkBox5
{
    BACKGROUND-IMAGE: url(images/PinkBox5Back.jpg);
    BACKGROUND-REPEAT: repeat-x
}
TD.Header1
{
    BACKGROUND-IMAGE: url(images/Header1Back.jpg)
}
TD.Header2
{
    BACKGROUND-IMAGE: url(images/Header2Back.jpg)
}
P.Color1
{
    COLOR: #f24040
}

search.css

Code:

h3 {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: normal; color:#6f6f6f}
p {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt}
li {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; margin-left: 5%;}
.xtitle { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12pt; font-weight: normal}
.xresult { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 9pt; font-weight: normal}
.xlocation { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 10pt; color:green; font-weight: normal}
.xsmall { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 8pt; color:green; font-weight: normal}

**Cl1mh4224rd** · 12-30-2004, 08:07 PM

Umm... which one of those style definitions affects the navigation bar?

**tesco** · 12-30-2004, 08:11 PM

couldn't you just use one css file and have different names for the classes and ids of stuff that needs to be different (example: .titlemain and .titlesub or somehting like that).
would make it easier to edit and find problems like this...

**RealitY** · 12-30-2004, 08:26 PM

The first css is taken form a template which is all fine. The second comes from another part of the site which is a catalog type template so when mixed the first template screwup the nav bar on the catlog pages without the logo stuff.

I only need to keep the first one if it makes it simpler to understand and somehow it must be that one that tweaks the nav bar to different sizes on different pages. I am not savy on css so perhaps someone could edit it. Oh and yes moved now...

**RealitY** · 01-12-2005, 08:58 PM

Ive attached 2 images of the site and the 1st one has a different font than the 2nd.
I want the pages on the site to keep the font as shown in the 1st although it dosent oddly....

**tesco** · 01-12-2005, 09:05 PM

posting the site would be soooooooooooo much easier...
but basically it looks like a larger font and that it's bold.

**Rick Phlegm** · 01-13-2005, 01:45 AM

Let's see if I understand this properly...

Is the text of the navigation bar enclosed in a table? If so, the text within a table is treated differently than the text inside a normal paragraph (it'll go to default values inside a table), so you might have to define your text style, size etc. in the table attributes of the css file.

Try adding a sort of catch-all at the start of the file like this:

Code:

table {    
    COLOR: #444444;
    FONT-FAMILY: Tahoma;
    FONT-SIZE: 11px;
    MARGIN-BOTTOM: 4px;
    MARGIN-TOP: 4px
}

Apologies if I've misunderstood the problem. I'm a little rusty on css myself.

**RealitY** · 01-13-2005, 06:13 AM

Originally Posted by rossco_2004

but basically it looks like a larger font and that it's bold.

I take it that supposed to be funny. Anyway the text appears as small on some pages and big on anothers yet its the same text in the same nav bar on both. Seems rather obvious to me now that the text where it show as I want it has a pieced together banner that uses a css file whereas the other pages do not and since they were created via the cart software they do not have any referance to the css file thus going to a default text.

If I insert <link rel="stylesheet" type="text/css" href="css1.css"> in every page then all would be fine although considering the number of pages and the amount of resetting that is done which would remove that line its just not realistic so I guess I will do what I have done with other similar issues and attempt to hack the cart template which creates the pages themselves...

**RealitY** · 01-13-2005, 06:30 AM

Well there it is simple as that, perhaps could be clean up a little but this works.
I found a file in the zip template named menu.htm which contained the following...

Code:

<table border="0" width="130" cellspacing="0" cellpadding="2" bordercolor="#FFFFFF">
<tr><td width="100%" height="16"><font size="2"><a href="VARI=CatCtrlFile">
VARI=CategoryFile</a></font></td>
</tr></table>
FILE=TempAux.txt
<!--FIM-->

I then chagned it to

Code:

<table border="0" width="130" cellspacing="0" cellpadding="2" bordercolor="#FFFFFF">
<link rel="stylesheet" type="text/css" href="css1.css">
<tr><td width="100%" height="16"><font size="2"><a href="VARI=CatCtrlFile">
VARI=CategoryFile</a></font></td>
</tr></table>
FILE=TempAux.txt
<!--FIM-->

Once I did this and reloaded the template all the pages created with the template now have the same font and size.

**Cl1mh4224rd** · 01-15-2005, 09:02 AM

Oh God... Don't put that there. The <link> tag should only be placed between <head> and </head>, at the beginning of the page...

Thread: CSS Issue

Thread Tools

Bookmarks

Bookmarks

Posting Permissions