Css Menus
Dale
found out about Railo.
I loaded it on a spare server and ported over one of my Coldfusion
Applications. The first thing that I noticed was my css menu's were
not working.
First, the positioning was not correct. Second, the dropdowns were
not functioning.
I tried using info from another post where you use the cfcontent at
the top of the css file and rename the css file to .css.cfm. Still no
change.
Has anyone experience this problem? If so, does anyone have a
suggestion as to a fix?
Todd Rafferty
~Todd Rafferty
Volunteer Community Manager
Railo Server - Open Source
----
Dale
The css file is in the same virtual directory with the other files.
Here is my link:
<link rel="stylesheet" href="stylegreen.css" type="text/css">
On Dec 2, 8:43 am, Todd Rafferty <t...@getrailo.org> wrote:
> It's not Railo related. Sounds like you're depending on a virtual mapping
> that isn't there or something. Railo doesn't care about your CSS file
> unless you've indeed shoved the entire css file into a .cfm file.
>
> Show us how you're linking the css file?
>
>
>
>
>
> On Fri, Dec 2, 2011 at 11:39 AM, Dale <trivalleybrew...@gmail.com> wrote:
> > I've been a coldfusion user for severals years and just yesterday
> > found out about Railo.
> > I loaded it on a spare server and ported over one of my Coldfusion
> > Applications. The first thing that I noticed was my css menu's were
> > not working.
>
> > First, the positioning was not correct. Second, the dropdowns were
> > not functioning.
>
> > I tried using info from another post where you use the cfcontent at
> > the top of the css file and rename the css file to .css.cfm. Still no
> > change.
>
> > Has anyone experience this problem? If so, does anyone have a
> > suggestion as to a fix?
>
> --
> ~Todd Rafferty*
> Volunteer** *Community Manager
> Railo Server - Open Source
> ----
> Get Railo:http://getrailo.org/
> Write Documentation:http://wiki.getrailo.org/
> Report Bugs:https://issues.jboss.org/browse/RAILO
> Request Features:https://railo.uservoice.com/- Hide quoted text -
>
> - Show quoted text -
Todd Rafferty
Otherwise, if your file is located in /somedirectory/somefile.cfm, then... stylegreen.css needs to be local to somedirectory as well unless you have a <base href=""> tag implemented somewhere? What are you not telling me? :)
~Todd Rafferty
Volunteer Community Manager
Peter Boughton
Do you have a web server involved, and are you using Railo Express or
the Railo installer?
Dale
Here's everything.
I created a virtual directory from root called test.
Within the test directory there is a file called index.cfm.
The contents of which is <cfinclude template="menu.txt"> .
In my application, this is at the top of every page to display the
menu.
Menu.txt consists of the following:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://
www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html" charset="utf-8">
<link rel="stylesheet" href="/stylegreen.css" type="text/css">
</head>
<cfquery name="categories" datasource="#request.dns#">
select * from (
select menu.* ,
( select Count(*) from menu as categorySubQuery
where categorySubQuery.lft < menu.lft and categorySubQuery.rgt >
menu.rgt) as depth,
(( menu.rgt - menu.lft - 1) / 2) as descendants FROM menu
order by lft) a
where depth <> 0
</cfquery>
<cfset categoryCount = categories.recordcount>
<body>
<div style="float: right; position:relative; left: -50%;">
<cfoutput><ul id="css3menu" style="position:relative; left: 50%;"></
cfoutput>
<cfloop query="categories">
<cfset dpth = depth[currentrow]>
<cfset dminus1 = dpth - 1>
<cfif categoryCount gt currentrow>
<cfset nextdepth = depth[currentrow+1]>
<cfelse>
<cfset nextdepth = depth[currentrow]>
</cfif>
<cfoutput><cfif rgt[currentrow] - lft[currentrow] gt 1> <li><a
href="#categories.websitefile#">#name[currentrow]#</a><cfelse> <li><a
href="#categories.websitefile#">#name[currentrow]#</a></li></cfif></
cfoutput>
<cfif descendants[currentrow] gt 0>
<cfoutput><ul></cfoutput>
<cfelse>
<cfif nextdepth lt depth[currentrow] >
<cfloop from="#nextdepth#" to="#dpth-1#" index="index">
<cfoutput></ul></li></cfoutput>
</cfloop>
</cfif>
<cfif categorycount eq currentrow>
<cfoutput></ul></cfoutput>
</cfif>
</cfif>
</cfloop>
<cfoutput></ul></cfoutput>
</div>
</body>
</html>
stylesheetgreen.css consists of the following:
ul#css3menu,ul#css3menu ul{
margin:0;list-style:none;padding:0;background-color:#dedede;border-
width:1px;border-style:solid;border-color:#5f5f5f;-moz-border-radius:
5px;-webkit-border-radius:5px;border-radius:5px;}
ul#css3menu ul{
display:none;position:absolute;left:-1px;top:98%;-moz-box-shadow:
3.5px 4px 5px #000000;-webkit-box-shadow:3.5px 4px 5px #000000;box-
shadow:3.5px 4px 5px #000000;padding:0 10px 10px;background-
color:#FFFFFF;border-radius:6px;-moz-border-radius:6px;-webkit-border-
radius:6px;border-color:#d4d4d4;}
ul#css3menu li:hover>*{
display:block;}
ul#css3menu li:hover{
position:relative;}
ul#css3menu ul ul{
position:absolute;left:98%;top:-2px;}
ul#css3menu{
display:block;font-size:0;position:absolute;z-index:1000;}
ul#css3menu li{
display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu>li,ul#css3menu li{
margin:0;}
ul#css3menu a:active, ul#css3menu a:focus{
outline-style:none;}
ul#css3menu a{
display:block;vertical-align:middle;text-align:left;text-
decoration:none;font:bold 14px Trebuchet MS,sans-
serif;color:#000000;text-shadow:#FFF 0 0 1px;cursor:pointer;padding:
10px;background-color:#c1c1c1;background-
image:url("mainbk.png");background-position:0 0;border-width:0 0 0
1px;border-style:solid;border-color:#C0C0C0;}
ul#css3menu ul li{
float:none;margin:10px 0 0;}
ul#css3menu ul a{
text-align:left;padding:4px;background-color:#ffffff;background-
image:none;border-width:0;font:14px Tahoma,serif;color:#000;text-
decoration:none;}
ul#css3menu li:hover>a{
background-color:#ccffcc;border-color:#C0C0C0;border-
style:solid;font:bold 14px Trebuchet MS,sans-serif;color:#000000;text-
decoration:none;text-shadow:#fff 0 0 1px;background-
image:url("mainbk.png");background-position:0 100%;}
ul#css3menu img{
border:none;vertical-align:middle;margin-right:20px;width:16px;height:
16px;}
ul#css3menu ul img{
width:16px;height:16px;}
ul#css3menu img.over{
display:none;}
ul#css3menu li:hover > a img.def{
display:none;}
ul#css3menu li:hover > a img.over{
display:inline;}
ul#css3menu span{
display:block;overflow:visible;background-position:right
center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menu ul span{
background-image:url("arrowsub.png");padding-right:28px;}
ul#css3menu ul li:hover>a{
background-color:#ccffcc;background-image:none;font:14px
Tahoma,serif;color:#868686;text-decoration:none;}
ul#css3menu li.topfirst>a{
border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 5px;-webkit-
border-radius:5px 0 0 5px;}
ul#css3menu li.toplast>a{
border-radius:0 5px 5px 0;-moz-border-radius:0 5px 5px 0;-webkit-
border-radius:0 5px 5px 0;}
All files are in the test directory.
Todd Rafferty
Dale
The stylesheet page is stylegreen.css, not stylesheetgreen.css.
Dale
on my main coldfusion mx 6.1 server. It works perfect there.
Since I was just including this file in every cfm page, I just wanted
to distinguish it from the other pages in my directory. I didn't
think it mattered what the extension was.
If I try to access the menu.txt or the stylegreen.css on my test
server, I get the page cannot be found.
> ~Todd Rafferty*
> Volunteer** *Community Manager
> Railo Server - Open Source
> ----
> Get Railo:http://getrailo.org/
> Write Documentation:http://wiki.getrailo.org/
> Report Bugs:https://issues.jboss.org/browse/RAILO
Peter Boughton
> Since I was just including this file in every cfm page, I just wanted
> to distinguish it from the other pages in my directory. I didn't
> think it mattered what the extension was.
When you cfinclude, extension of the included file doesn't matter.
However, a common way to differentiate files like this is to prefix
with an underscore, or call it "inc_menu.cfm" or similar.
Todd Rafferty
If you go to http://tvmsbl.info, you can see the menu system running
on my main coldfusion mx 6.1 server. It works perfect there.
Since I was just including this file in every cfm page, I just wanted
to distinguish it from the other pages in my directory. I didn't
think it mattered what the extension was.
If I try to access the menu.txt or the stylegreen.css on my test
server, I get the page cannot be found.
~Todd Rafferty
Volunteer Community Manager
Peter Boughton
> If I try to access the menu.txt or the stylegreen.css on my test
> server, I get the page cannot be found.
This sounds like the root of the problem - they should be found.
You need to make sure you have the IIS website root directory pointing
to the same location as the Railo webroot.
For HTTP access, Railo only handles *.cfm and *.cfc files (by default)
- so accessing *.css and *.txt in a browser is handled by the web
server (in your case, IIS).
Dale
position is off and the dropdown movement doesn't work.
If I leave the css file as a .css, only the unordered list format
appears.
Where is the problem with the css. You say it's not Railo. Could it
be tomcat?
Todd Rafferty
Peter Boughton
> If your file is indeed menu.txt, Railo (or CF 6.1) is not protecting your
> file. Here's your full source code: http://tvmsbl.info/menu.txt
>
> Not a good thing to reveal.
Well it shouldn't matter really - the only case knowing the source
matters is if there are security flaws in it.
But yeah, definitely better to avoid the issue than risk it.
If Dale doesn't want to switch to _menu.cfm (or similar), he can set
permissions in IIS to block that file (can't remember precise details,
but exploring the site, right-clicking on menu.txt and going to
properties is a start).
Dale
code viewable?
On Dec 2, 9:14 am, Todd Rafferty <t...@getrailo.org> wrote:
> If your file is indeed menu.txt, Railo (or CF 6.1) is not protecting your
> file. Here's your full source code:http://tvmsbl.info/menu.txt
>
> Not a good thing to reveal.
>
> On Fri, Dec 2, 2011 at 12:09 PM, Dale <trivalleybrew...@gmail.com> wrote:
> > If you go tohttp://tvmsbl.info, you can see the menu system running
> > on my main coldfusion mx 6.1 server. It works perfect there.
>
> > Since I was just including this file in every cfm page, I just wanted
> > to distinguish it from the other pages in my directory. I didn't
> > think it mattered what the extension was.
>
> > If I try to access the menu.txt or the stylegreen.css on my test
> > server, I get the page cannot be found.
>
> --
> ~Todd Rafferty*
> Volunteer** *Community Manager
Dale
Thank you for being so patient.
Todd Rafferty
How do you recommend including that file without making the source
code viewable?
~Todd Rafferty
Volunteer Community Manager
Dale
create the virtual directory within tomcat?
Todd Rafferty
~Todd Rafferty
Volunteer Community Manager
Brad Wood
Dale, I'm not sure what tools you're using, but an HTTP sniffer like Fiddler or FireBug is pretty much inspensible when it comes to figuring out what's happening with CSS and JS files. It will show you WHERE the browser is looking for them, and if you're getting 404s.
Thanks!
~Brad
Sent from my ASUS Eee Pad
>
> --
> ~Todd Rafferty*
> Volunteer** *Community Manager
> Railo Server - Open Source
> ----
> Get Railo:http://getrailo.org/
> Write Documentation:http://wiki.getrailo.org/
> Report Bugs:https://issues.jboss.org/browse/RAILO
> Request Features:https://railo.uservoice.com/- Hide quoted text -
>
> - Show quoted text -
Todd Rafferty
Todd Rafferty
And, yes, this was my confusion too since omitting the / would make it
relative to the directory that you're in unless there's a <base
href=""> tag somewhere.
Thanks for suggesting Fiddler/Firebug, great idea.
On Dec 2, 7:24 am, Brad Wood <b...@bradwood.com> wrote:
> I know this thread has moved on, but the message below confused me. If the path is "/stylegreen.css" wouldn't that be relative to your web root? The absense of the leading slash would make it relative to the current directory (or any base tag).
>
> Dale, I'm not sure what tools you're using, but an HTTP sniffer like Fiddler or FireBug is pretty much inspensible when it comes to figuring out what's happening with CSS and JS files. It will show you WHERE the browser is looking for them, and if you're getting 404s.
>
> Thanks!
>
> ~Brad
>
> Sent from my ASUS Eee Pad
>
>
>
>
>
>
>
> Todd Rafferty <t...@getrailo.org> wrote:
> >....? So, is this in every local directory that uses that file?
>
> ><link rel="stylesheet" href="/stylegreen.css" type="text/css"> <--
> >stylegreen.css is relative to */* (note the slash)
>
> >Otherwise, if your file is located in /somedirectory/somefile.cfm, then...
> >stylegreen.css needs to be local to somedirectory as well unless you have a
> ><base href=""> tag implemented somewhere? What are you not telling me? :)
>
> >> > Request Features:https://railo.uservoice.com/-Hide quoted text -
>
> >> > - Show quoted text -
>
> >--
Dale
I'm using <link rel="stylesheet" href="./stylegreen.css.cfm"
type="text/css">
to reference my stylesheet from menu.cfm(renamed).
I've enclosed the stylegreen.css.cfm contents within <cfcontent reset
type="text/css"></cfcontent>, so it knows it's css.
I get the menu in menu format. So, it is obviously seeing the css.cfm
file to produce this format and processing some of the css. I'm
assuming it's Railo, since the file is a .cfm .
I have code in tomcat for the context, but not sure that's doing
anything.
Why is some of the css getting processed, but not correctly?
Dale
I got so caught with the css, I just realized the IE version on this
server is 6.0.
When I accessed the page from my client pc, it works fine.
Thank you so much for all your suggestions.
Dale
Todd Rafferty
~Todd Rafferty
Volunteer Community Manager
Brad Wood
Railo, (or a lack of understanding) is probably playing a role here, but the ultimate symptoms you're describing is that the expected styles are not being applied.
Trust me, you NEED to troubleshoot this from the browser end in my opinion. Install FireBug and verify the following:
1) Are the paths to the style sheets you expect being resoled by the browser an downoaded?
2) Are the contents of the style sheets what you expect. (the CSS files may have ColdFusion errors in them since they are .cfm)
3) Do the DOM elements in the page have the expected styles applied to them (Inspect th element to find out)
Thanks!
~Brad
Sent from my ASUS Eee Pad
Dale <trivalle...@gmail.com> wrote:
>Todd,
>
Brad Wood
~Brad
Sent from my ASUS Eee Pad
Todd,
I got so caught with the css, I just realized the IE version on this
server is 6.0.
When I accessed the page from my client pc, it works fine.
Thank you so much for all your suggestions.
Dale