Trouble with menu items having a transparent background

[Ruth]

Hi,

The problem is in the css. Can you tell me what colors you want as to the text and bg for the pageclass, the offclass and the onclass?

Ruth

[ljhost]

Not sure what the heck happend here but my account was deleted as was all the posts in this thread!

So again you can see the issue here: http://football99.myfantasyleague.com/2009/home/76457#0

Click on My Leagues > LJ Demo

I have added this css:

Code: Select all

a.mainmenucurrent {
   background-color:#000 !important;
}

In an effort to resolve the issue but now I'm seeing a 3px clear border around the items. If I don't have that line the entire background of the current item is transparent.

I see that background:none is being dropped into the the HMTL via the javascript.. can we just stop this?

[Andy]

Not sure what the heck happend here but my account was deleted as was all the posts in this thread!

Sorry about that - my mistake - I was half asleep this morning and it looked spammy so deleted it (in haste) without actually reading the posts

[Ruth]

Hi,

Whew! THe problem is with the LJ20100601.css and the generic anchor link, visited, active, hover etc. When you code certain generic codes they over ride everything else in css. It took me a while to find it. Now, I have found a solution, but since I don't know what each of these various css files are for I could only play around with some to see what would work. You'll need to check all of them. 1st remove the generic link coding from this main file and then your milonic menu works correctly, but the horizontal menu with Home Live Scoring etc, and the vertical one at the left side goes to default blue. So, I opened your submenu.css file and I added the link coding to the IDs so with the horizontal one has this added to it

Code: Select all

#hsubmenu a:link{COLOR: #fff; TEXT-DECORATION: underline;}
#hsubmenu A:active {COLOR: #fff; TEXT-DECORATION: underline;}
#hsubmenu A:visited {COLOR: #fff; TEXT-DECORATION: underline;}
#hsubmenu A:hover {	COLOR: #ffdf5e; TEXT-DECORATION: underline}

and the vertical one has this added to it

Code: Select all

#vsubmenu a:link{COLOR: #fff; TEXT-DECORATION: underline;}
#vsubmenu A:active {COLOR: #fff; TEXT-DECORATION: underline;}
#vsubmenu A:visited {COLOR: #fff; TEXT-DECORATION: underline;}
#vsubmenu A:hover {	COLOR: #ffdf5e; TEXT-DECORATION: underline}

Also, in that LJ20100601.css you have the following coding, note that the classes in this are the same name as those in the menu.css file, but the colors are different, so you need to change the name of the class. I don't know what this goes with, but since you are using the same class names with different colors, it looks as if this class is what is being pulled by the menu. Not sure what this one is for, but maybe you could just add a 1 to the names, that would mean they are different classes.

Code: Select all

#menu0 {
	MARGIN-TOP: -10px
}
A.mainmenucurrent:link {FONT-SIZE: 10px; COLOR: #fff}
A.mainmenucurrent:visited {FONT-SIZE: 10px; COLOR: #fff}
A.mainmenucurrent:active {FONT-SIZE: 10px; COLOR: #fff}
.mainmenuon {FONT-SIZE: 10px; COLOR: #ffdf5e; BACKGROUND-COLOR: #000}
A.mainmenuon:hover {FONT-SIZE: 10px; COLOR: #ffdf5e; BACKGROUND-COLOR: #000}
A.mainmenuon:link {	FONT-SIZE: 10px; COLOR: #ffdf5e; BACKGROUND-COLOR: #000}
A.mainmenuon:visited {FONT-SIZE: 10px; COLOR: #ffdf5e; BACKGROUND-COLOR: #000}
A.mainmenuon:active {FONT-SIZE: 10px; COLOR: #ffdf5e; BACKGROUND-COLOR: #000}
.mainmenuoff {FONT-SIZE: 10px; COLOR: #fff; BACKGROUND-COLOR: #000}
A.mainmenuoff:hover {FONT-SIZE: 10px; COLOR: #fff; BACKGROUND-COLOR: #000}
A.mainmenuoff:link {	FONT-SIZE: 10px; COLOR: #fff; BACKGROUND-COLOR: #000}
A.mainmenuoff:visited {FONT-SIZE: 10px; COLOR: #fff; BACKGROUND-COLOR: #000}
A.mainmenuoff:active {FONT-SIZE: 10px; COLOR: #fff; BACKGROUND-COLOR: #000}

Hope this helps, and that it made sense

Ruth

[ljhost]

Thanks for your details help.. I really appreciate it!

First just to explain the reason for the layered CSS files is that 76467.css is the main css file.. then the LJ one is for this particular skin. The way the skinning works is a 2nd style sheet is added and then you overwrite the styles you want to create the new look.

That being said I removed everything from all the css files except...

Code: Select all

.pageheader { width: 100%; background:green;}
.mainmenucurrent { font-size: 95%; text-decoration: none; }
.mainmenuon, A.mainmenuon:link, A.mainmenuon:visited, A.mainmenuon:hover, A.mainmenuon:active { color: tan; background-color: black; font-size: 95%; text-decoration: none; }
.mainmenuoff, A.mainmenuoff:link, A.mainmenuoff:visited, A.mainmenuoff:hover, A.mainmenuoff:active, A.mainmenucurrent:link, A.mainmenucurrent:visited, A.mainmenucurrent:hover, A.mainmenucurrent:active { color: black; background-color: tan; font-size: 95%; text-decoration: none; }

... for purpose of demonstration and I got the same results. This tells me we're missing a hook somewhere??

[Ruth]

Hi,

You only need to put in the colors, fonts etc in each class, but if you want to put in the other things for some reason I would guess you can but you can't do it the way you have it, that is putting the mainmenucurrent class inside the mainmenuoff class. I think that is confusing the menu. If you set it up like this it should work fine for the menu.

Code: Select all

.pageheader { width: 100%; background:green;}
.mainmenucurrent { color: tan; background-color: black; font-size: 95%; text-decoration: none; }
.mainmenuon{ color: tan; background-color: black; font-size: 95%; text-decoration: none; }
.mainmenuoff{ color: black; background-color: tan; font-size: 95%; text-decoration: none; }

If you can be a little more detailed I can try and set something up. What I'm not understanding is the use of the mainmenucurrent, mainmenuoff, mainmenuon in the main css file. You could put the colors you want the menu in each LJ skins file, then they would apply when that skin is chosen and it won't matter that the class names are the same since only the particular skins css file is on the page.

I hope this made sense. I am trying to guess what it is you are trying to do, for example, the main css file also has an @import so I am assuming that the submenu.css like a 'main' file, i.e. the same no matter what skin is chosen so that is why you need to do the coding for the hsubmenu, and vsubmenu links in that file as I did after fixing the previous setup. Anyway, let me know if this made sense or if you need more help

Ruth

[ljhost]

Excellent.. this seems to be working as expected. I'll alter that in the main CSS file then go through all the skins to fix the issue.

And yes we want everything declared in the main css file so that custom skins only need to declare what they want to change.

Thanks for your help.. I'll report back if there is any more trouble

[Ruth]

Hi,

Please keep in mind that you cannot put that mainmenucurrent, mainmenuoff, mainmenuon in the main css file and then expect to change it when the page loads a skin css file because the main css file is still on the page. So, you need to get the menu classes into the skin files and out of the main css file. If those classes were in the main css file as a 'default' color if one hasn't chosen a skin, then you really need to have a sort of 'default' skin that is there and put those menu classes in that 'default' skin.

Ruth

[ljhost]

But as they cascade if the skin sheet is after the main sheet it will override it no?

main.css
.mainmenucurrent{color:red;}

skin.css
.mainmenucurrent{color:black;}


Should render the color black..

[Ruth]

Hi,

The menu doesn't have a clue which style sheets go in what order, it just uses classes to apply different properties, i.e. colors, fonts, padding, etc. to a particular menu. I know browsers are programmed as to how to order style sheets, but that isn't in the menu. I don't know if it is even possible, well it's probably possible but it might be so involved as to not be feasible. I'm not a programmer so maybe I am not explaining it very well, I just know from working with the menu for years how it acts. It looks for the style to apply to whatever menus are using that style, as a 'sub' action, if it sees an off, on, page, or click class listed in a style, it then looks for that class so it can apply whatever css properties are in that class, but it has no idea that it is supposed to choose this or that stylesheet from which to pick the class.
That is why I said you need to have the classes for the menu in the skins sheets and not in the main css file.

If you could explain more fully why you need it in the main one, maybe I can figure out a work around, though I think the only way is to have a different css file for each skin including a 'default' one

Ruth

[ljhost]

Wow that is a poor design.. are you saying it's writing all the CSS it finds as inline style on the fly?

OK well I'll play around with it on the system a bit and see how it goes.. thanks so much for your help.

[Ruth]

Hi,

No I am not saying it is writing all the css. It is only 'writing' the class that is listed in the menu.

I just can't figure out how you can create a unique class name, put it in two css files on the same page with diferent properties depending on the css file have the browser, or whatever program it is know which file to use. I just created two css files, the only thing in the files was a class called .myclass, in one file the color is red the bg color is black, in the other file the color is aqua and bgcolor is red. Then I created two divs with class='myclass'. I then loaded the page. Every browser I tried, including an old NN4.79 only applied the last css file that was loaded. using the aqua text and red bg.

I can't seem to get my brain to go beyond the fact that you are using the same class name with different properties, it's like I hit a wall with that I have contacted Milonic and maybe they can straighten me out, since in all the years I have helped on the forum I have never had a problem posed like this. In the meantime, I can only suggest that you move those menu classes from the main css file and create a 'default' skin css file and put it in there. That way, those menu classes would only ever appear in a skins file and that would be the colors the menu uses, whichever skin is loaded.

Ruth

[ljhost]

Ah ok that is how I had assumed it worked previously....


Here's how it works

If an item has a class on it.. say

Code: Select all

<p class="myclass">Your text here</p>

Then you have two style sheets attached..
like in our case we have the master style sheet that is a number 76232.css or something.

Say it has:

Code: Select all

.myclass{color:red}

Then in the skin style sheet we have listed 2nd in the head is called myskin.css we have:

Code: Select all

.myclass{color:green}

Then the <p> will be green. Since that was the final item listed in any CSS file. This is just how CSS works. Make sense?

The reason we're declaring it twice is we want users to have the option of NOT declaring it at all. So if they make a custom skin they just overwrite the items they want with their css file.

[Ruth]

Hi,

The problem is with having the same class name in two files on the same page. I used files I called 1.css and 2.css and called them in order, i.e. 1 first and 2 below that in the head of the doc. It seems that all the browsers used the 2.css, but is it possible to always guarantee that this is the one that will load second and be used, I have no clue.

I don't know anything about skins, I tried researching them but I couldn't find any 'what are skins' 'how skins work' like you can for css, html, js, etc. So, I'm kind of lost as to making reasonable suggestions, I just know you have to get those classes out of the main css file if the skins css files are going to change the menu colors and such. Is there a way to set up a separate menu css file with those classes which the person would include when they make the skins, that is when creating the skin they create a bobsskin.css and bobsmenu.css? I don't know if there's a way to have the site know that when skin bobskin.css loads it is also supposed to load bobsmenu.css where the person has made the color changes they want. Or maybe wherever the people have the option to use their own skin they are notified they have to include the menu classes with the colors they want? I'm sorry, those are the only things that crossed my mind and they may not be feasible options with skins use.

Ruth

[ljhost]

It seems that all the browsers used the 2.css, but is it possible to always guarantee that this is the one that will load second and be used

Yes. This is exactly how CSS works. The style sheets are always called in the order they are in the code and later mentions of classes always take priority.

While I am new to this menu system, I am an expert in CSS. So hopefully now that you've cleared some things up with the menu systems, I have cleared some things up for you regarding CSS

[Andy]

Hi,

Just thought I'd step in here.

As you are expert in CSS, would it be an idea to use our new Webplugs product? This is completely styled using CSS and will accept multiple styles.

Would you like to try Webplugs?

-- Andy

[ljhost]

Ideally I would like to move the site to a non javascript based menu and I actually rewrote the menu using pure css / html but there are so many skins and styles that need to be accommodate for we just haven't had time to switch over.

Thanks for all your help guys!