Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6

Thread: CSS question

  1. #1
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS question

    I set up a php header that included some style elements in it, and my page worked just fine. I had three icons that swapped out images when rolled over. However, I decided to move my style to a an external CSS and the first icon stopped displaying (the home icon, though the tooltip appears and there is a pixel or two i can click on still for the link). Everything else works just fine. Why would the same exact code work within a page, but not within an external CSS?

    Here is the code:

    <style type="text/css">
    .btnContinueHome {
    width: 60px;
    height: 60px;
    display: inline;
    font-size: 10px;
    text-decoration: none;
    background-repeat:no-repeat;
    background-image:url(img/homeicon1.png);
    }

    .btnContinueHome:hover {
    background-image:url(img/homeicon2.png);
    }
    .btnContinueContact {
    width: 60px;
    height: 60px;
    display: inline;
    font-size: 10px;
    text-decoration: none;
    background-repeat:no-repeat;
    background-image:url(img/contacticon1.png);
    }

    .btnContinueContact:hover {
    background-image:url(img/contacticon2.png);
    }
    .btnContinueForum {
    width: 60px;
    height: 60px;
    display: inline;
    font-size: 10px;
    text-decoration: none;
    background-repeat:no-repeat;
    background-image:url(img/forumicon1.png);
    }

    .btnContinueForum:hover {
    background-image:url(img/forumicon2.png);
    }
    </style>

    And here is how I called it using a stylesheet:

    <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
    <a class="btnContinueHome" TITLE="header=[Home] body=[]" href="http://XXXXXXX.com">&nbsp;</a>

    <a class="btnContinueContact" TITLE="header=[Contact] body=[]" href="mailto:XXX@XXXXXXX.com">&nbsp;</a>

    <a class="btnContinueForum" TITLE="header=[Forum] body=[]" href="http://XXXXXXX.com/forum">&nbsp;</a>

    Right now I have it working with the code in the page, but I'd like to use a stylesheet and it's really bothering me that I can't figure out why this won't work. Thanks in advance for any help.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Don't put style tags in the external stylesheet.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Regular Coder BWiz's Avatar
    Join Date
    Mar 2006
    Location
    Sol System
    Posts
    471
    Thanks
    7
    Thanked 21 Times in 21 Posts
    If your referencing images out of an external .css files; and you just copied the CSS from a page (internal css) - you MUST make sure that all the image file paths are relative to that of the external .css file, NOT the .html file.
    BWiz :: Happy Coding!
    2006
    2007 2008 2009
    2010 2011
    Irrational numbers make no sense.

  • #4
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey thanks for the help guys, but that hasn't fixed my problem unfortunately. This is really driving me nuts cause I feel like I must not be getting something basic here. I'll post my entire code in case anyone has the desire to figure this out. This is my CSS I am attempting to use (I had the style tags in, but tried taking them out as suggested):

    .btnContinueHome {
    width: 60px;
    height: 60px;
    display: inline;
    font-size: 10px;
    text-decoration: none;
    background-repeat:no-repeat;
    background-image:url(img/homeicon1.png);
    }

    .btnContinueHome:hover {
    background-image:url(img/homeicon2.png);
    }
    .btnContinueContact {
    width: 60px;
    height: 60px;
    display: inline;
    font-size: 10px;
    text-decoration: none;
    background-repeat:no-repeat;
    background-image:url(img/contacticon1.png);
    }

    .btnContinueContact:hover {
    background-image:url(img/contacticon2.png);
    }
    .btnContinueForum {
    width: 60px;
    height: 60px;
    display: inline;
    font-size: 10px;
    text-decoration: none;
    background-repeat:no-repeat;
    background-image:url(img/forumicon1.png);
    }

    .btnContinueForum:hover {
    background-image:url(img/forumicon2.png);
    }
    This is the header page (php):

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta content="text/html; charset=ISO-8859-1"
    http-equiv="content-type">

    <title>ColdLaunch</title>
    <SCRIPT SRC="js/boxover.js"></SCRIPT>
    <style type="text/css">
    <link rel="stylesheet" type="text/css" href="style.css"></style>
    </head>
    <body>
    <a class="btnContinueHome" TITLE="header=[Home] body=[]" href="http://XXXXXXXX.com">&nbsp;</a>

    <a class="btnContinueContact" TITLE="header=[Contact] body=[]" href="mailto:jmm@XXXXXXXXX.com">&nbsp;</a>

    <a class="btnContinueForum" TITLE="header=[Forum] body=[]" href="http://XXXXXXXXX.com/forum">&nbsp;</a>
    <br>
    <div style="text-align: center;"><br>
    <img style="width: 406px; height: 83px; position: absolute; top: 14px; left: 424px;" alt="Logo" src="img/XXXXXXXXX.png"></div>

    And finally the index (php):

    <? require("header.php") ?>
    <? include("footer.php") ?>

    I have a footer as well. Not sure how it could impact, but this is the code too:

    <hr>Copyright XXXXXXXX XXXXX 2007
    </body>
    </html>

    I would greatly appreciate any advice or suggestions, especially since if this is something basic then I would hate to be coding my pages completely wrong. My style.css file is in the same directory as the header.php, and the img directory is located there as well, so I believe the images are referenced correctly. Thanks in advance again.

  • #5
    Regular Coder BWiz's Avatar
    Join Date
    Mar 2006
    Location
    Sol System
    Posts
    471
    Thanks
    7
    Thanked 21 Times in 21 Posts
    Is your web site live? Can you post a link to it?
    BWiz :: Happy Coding!
    2006
    2007 2008 2009
    2010 2011
    Irrational numbers make no sense.

  • #6
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    Don't put style tags in the external stylesheet.
    Lol, well I managed to solve the problem and would like to give appropriate credit to aerospace eng. I took the style tags out of the external but included them in the header page. Didn't know they would screw things all up, but finally took them out and its working fine. Thanks!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •