CSS question

jmmathieu

07-29-2007, 09:16 AM

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"> </a>

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

<a class="btnContinueForum" TITLE="header=[Forum] body=[]" href="http://XXXXXXX.com/forum"> </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.

_Aerospace_Eng_

07-29-2007, 09:19 AM

Don't put style tags in the external stylesheet.

BWiz

07-29-2007, 03:33 PM

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.

jmmathieu

07-29-2007, 05:03 PM

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"> </a>

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

<a class="btnContinueForum" TITLE="header=[Forum] body=[]" href="http://XXXXXXXXX.com/forum"> </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.

BWiz

07-29-2007, 05:17 PM

Is your web site live? Can you post a link to it?

jmmathieu

07-29-2007, 05:53 PM

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!