Problem using SE Friendly URLs

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

jasonpresley - 03 Sep 2007 15:31 GMT

Anyone had issues using search engine friendly urls and css? I have a page
that looks just fine when I go to the page with the following url:
http://localhost/demo/index.cfm. However If I change the url to
http://localhost/demo/index.cfm/about-our-company the page acts as if the css
style sheet is not found. I am totally clueless as to what could be causing
this. Anyone have any idea? I would really appreciate it!

Thanks,

Jason

Reply to this Message

Stressed_Simon - 03 Sep 2007 18:34 GMT

I bet you are using a relative path for your css include instead of a root
path. So if you have the following in your http://localhost/demo/index.cfm
<link href="../styles/main.css" rel="stylesheet" type="text/css" />

then it will look in the next folder up for a folder called styles with a file
called main.css

If you have the same line of code in
http://localhost/demo/index.cfm/about-our-company then it will look for a
folder in the root called demo with a folder in called index.cfm with a folder
in called styles with a file in called main.css.

To solve this you need to reference your style sheet as follows:-
<link href="/styles/main.css" rel="stylesheet" type="text/css" />

Notice how the href begins with a forward slash (/) this means to always
access it from the webroot. You will need to do this for all your internal
links as well because they will not work, this means links and image references
the works.

HTH

Reply to this Message

jasonpresley - 03 Sep 2007 20:14 GMT

Actually I have tried several different paths including:

/styles/main.css
http://localhost/demo/styles/main.css

I have even embed the css directly onto the page. The index file looks fine
when the /about-our-company is not included but as soon as I add the suffix to
the end the css won't render.

Here is my code with styles embedded in the head:

index.cfm

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <style type="text/css">
            body {
                font-family:arial;
                font-size:12px;
            }

            #HNav, #HNav ul {
                /* horizontal alignment (left, right) */
                float: left;
                /* removes bullets from list */
                list-style: none;
                /* font weight of menu item text */
                font-weight: bold;
                /* padding from edge (moves left or right) */
                padding: 0;
                /* border around links */
                border: solid #000000;
                /* width of border around menu item */
                border-width: 0;
                /* margin space around menu */
                margin: 0;
            }

            #HNav a {
                display: block;
                /* color of link text */
                color: #FFFFFF;
                /* remove border from links */
                text-decoration: none;
                /* padding of links from edge */
                padding: 0.25em 1em;
            }

            #HNav a.daddy {
                /* background of item with class daddy (item with subitems - not currently
used) */
                background: url(rightarrow2.gif) center right no-repeat;
            }

            #HNav li {
                /* float: right; = right aligns menu and reverses order of menu items */
                float: left;
                /* width of top level menu items, if used widths are all equal
                width: 10em;
                */
            }

            #HNav li ul {
                position: absolute;
                left: -999em;
                height: auto;
                /* width of rollover color */
                width: 12em;
                /* width of subitem menu box */
                w\idth: 12em;
                /* font weight of subitem menus */
                font-weight: normal;
                /* border width of subitem menu box*/
                border-width: 1px;
                /* background color of sub menu items */
                background: #666666;
                /* distance of subitem menus below top menu */
                margin: 0px;
            }

            #HNav li li {
                /* adjusts right padding for items without child elements */
                padding-right: 1em;
                /* adjusts the width of items without child elements */
                width: 11em
            }

            #HNav li ul a {
                /* adjusts the width of the sub menu margins for links - (*SET*) */
                width: 11em;
                /* adjusts the width of the sub menu margins for links - (*SET*) */
                w\idth: 10em;
            }

            #HNav li ul ul {
                /* first number is the vertical placement of the second level subitem
menus */
                /* last number is the horizontal offset of the second on level of subitem
menus*/
                    /* the last number should be set to at least equal that of the width */
                    /* property of the "li ul" class */
                margin: -22px 0 0 12em;
            }


            #HNav li:hover, #HNav li.sfhover {
                /* color of background on rollover */
                background: #999999;
            }

            /* These classes show and hide the sub menus -- DO NOT ALTER -- */
            #HNav li:hover ul ul, #HNav li:hover ul ul ul, #HNav li:hover ul ul ul ul,
#HNav li.sfhover ul ul, #HNav li.sfhover ul ul ul, #HNav li.sfhover ul ul ul ul
{
                left: -999em;
            }

            #HNav li:hover ul, #HNav li li:hover ul, #HNav li li li:hover ul, #HNav li
li li li:hover ul, #HNav li.sfhover ul, #HNav li li.sfhover ul, #HNav li li
li.sfhover ul, #HNav li li li li.sfhover ul {
                left: auto;
            }
        </style>

        <script type="text/javascript" src="drop_down.js"></script>

    </head>

    <body marginheight="5" topmargin="5" bgcolor="#666666">
        <table width="600" border="0" align="center" cellspacing="0" cellpadding="0">
        <tr>
        <td height="26" colspan="2" background="sitefiles/images/link.png">
            <div align="right">
                 
                </div>
            </td>
        </tr>
        <tr>
        <td colspan="2"><img src="sitefiles/images/logo.jpg" alt="" width="760"
height="100" /></td>
        </tr>
        <tr>
        <td height="18" colspan="2" background="sitefiles/images/menu.png">
            <ul id='HNav'><li><a
href='http://localhost/demo/page.cfm/about-our-company'>About Us</a><ul
id='HNav'><li><a
href='http://localhost/demo/page.cfm/mission-statement'>Mission
Statement</a></li><li><a
href='http://localhost/demo/page.cfm/vision'>Vision</a></li><li><a
href='http://localhost/demo/page.cfm/leadership'>Leadership</a><ul
id='HNav'><li><a href='http://localhost/demo/page.cfm/ceo'>CEO</a></li><li><a
href='http://localhost/demo/page.cfm/cfo'>CFO</a></li><li><a
href='http://localhost/demo/page.cfm/coo'>COO</a></li></ul></li></ul></li><li><a
href='http://localhost/demo/page.cfm/contact'>Contact</a></li></ul>
            </td>
        </tr>
        <tr>
        <td width="184" valign="top" bordercolor="#050C14" bgcolor="#FFFFFF">
             
            </td>
        <td width="575" height="400" valign="top" bgcolor="#FFFFFF">
             
            </td>
        </tr>
        <tr>
        <td height="26" colspan="2" background="sitefiles/images/link.png">
            <div align="center">
                     
                </div>
            </td>
        </tr>
        </table>
    </body>
</html>

Reply to this Message

BKBK - 04 Sep 2007 06:01 GMT

[i]just fine when I go to the page with the following url:
http://localhost/demo/index.cfm. However If I change the url to
http://localhost/demo/index.cfm/about-our-company the page acts as if the css
style sheet is not found. [/i]

http://localhost/demo/index.cfm/about-our-company is simply a bad URL. Your
intention is to style the page index.cfm. However, as Simon has suggested, your
URL actually implies that the page you wish to style is
[i]about-our-company[/i], situated in a folder called index.cfm. It is not even
a CFML page.

Reply to this Message

jasonpresley - 04 Sep 2007 13:47 GMT

It is not the traditional format for a url but it is not a "bad" url. I am
using MangoBlog from ASFusion.com on my site and if you look at any of the blog
postings the url looks just the same and the page displays just fine with the
css rendering properly. Ray Camden uses these kinds of URLs in his blog
application and Ben Forta wrote an article on using these kinds of urls because
they were more search engine friendly. So this is not a "it can't be done"
thing because it is being done I just am running into a strange issue using it.
If anyone knows how to use these kinds of url successfully please let me know.

Jason

Reply to this Message

jasonpresley - 04 Sep 2007 20:08 GMT

Must have been some kind of cache bug issue or something. I have set all css
links and all image links to absolute links
(http://localhost/demo/styles/style.css). After coming back to it began to
work. don't understand but the url can have a
/search-engine-friendly-parameter following it and the page will display
correctly.

Thanks to Stressed_Simon and Ray Camden for pointing me in the right direction!

Jason

Reply to this Message

BKBK - 04 Sep 2007 20:56 GMT

[i]It is not the traditional format for a url but it is not a "bad" url. I am
using MangoBlog from ASFusion.com on my site and if you look at any of the blog
postings the url looks just the same and the page displays just fine with the
css rendering properly. Ray Camden uses these kinds of URLs in his blog
application and Ben Forta wrote an article on using these kinds of urls because
they were more search engine friendly. So this is not a "it can't be done"
thing because it is being done[/i]

"Bad" doesn't imply "it can't be done". I am aware of websites that use such
URLs. Some might be search-engine friendly, but they fail to be intuitive or
user-friendly. In any case, don't let me spoil it for you. The main thing is
that your pages are now running as you want them to.

Reply to this Message

jasonpresley - 04 Sep 2007 21:01 GMT

Sorry, I misunderstood. I took "bad" to mean exactly that - non functional. I
will agree with you to a point on non-user friendly. They are not as nice as
www.mysite.com/aboutme.htm. However they are better than
www.mysite.com/page.cfm?contentID=5&display=true.

Thanks for your help and input.

Reply to this Message

Webmaster Forum / ColdFusion / Advanced Techniques / September 2007

Problem using SE Friendly URLs