|
| |
|
|
_gail
Posts: 2876
From: So FL
Status: offline
 |
CSS quandary - 10/23/2002 11:06:45
I' m trying to enhance my understanding of Cascading Style Sheets but have run into a problem. Need some help, please.
I tweaked a perfectly functioning CSS from another project using Style Master software. I used the program to add a border and background color to links. As you can see from the gif I' ve uploaded, the links look and work perfectly when previewed in FrontPage. However, when the page is uploaded nothing is right.
Any clues? I' m clueless.
Thanks, gail
Here' s the code:
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
font-weight: normal;
color: #3b3855;
}
p.one {
font-family: Verdana, Helvetica, sans-serif;
font-size: 7pt;
font-weight: normal;
color: #939394;
}
p.marginandbkgrnd {
margin-top: 1cm;
margin-bottom: 2cm;
margin-right: 2cm;
background-color: #F4F6FD;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 13pt;
font-weight: bold;
color: #0033cc;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 11pt;
font-style: italic;
font-weight: bold;
color: #1470da;
}
/* Styles bulleted and numbered lists */
OL {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
font-weight: normal;
color: #3b3855;
}
UL {
font-family: Verdana, Helvetica, sans-serif;
font-size: 8pt;
color: #3b3855;
font-weight: normal;
}
/* Links */
A:link {
font-family: Verdana, Helvetica, sans-serif;
font-size: 8pt;
text-decoration: none;
color: #006699;
padding: 1pt;
background-color: #e9e9e9;
border: 1pt #0f0000 solid;
}
A:visited {
font-family: Verdana, Helvetica, sans-serif;
font-size: 8pt;
text-decoration: none;
color: #7c8686;
background-color: #e9e9e9;
padding: 1pt;
border: 1pt #0f0000 solid;
}
A:hover {
font-family: Verdana, Helvetica, sans-serif;
font-size: 8pt;
text-decoration: underline;
color: #993366;
background-color: #dfdfdf;
padding: 1pt;
border: 1pt #0f0000 solid;
}
A:active {
font-family: Verdana, Helvetica, sans-serif;
font-size: 8pt;
text-decoration: none;
color: #C6558D;
border: 1pt #0f0000 solid;
}
 Attachment (1)
|
|
|
|
pageoneresults
Posts: 1001
From: Orange, CA USA
Status: offline
|
RE: CSS quandary - 10/23/2002 14:33:47
> PageOne... where are you?
I' m right here! Based on the gifs that _gail posted, I' d have to agree with Bobby that the style sheets are not being referenced properly. Its really hard to tell without having a live URL to preview.
Just to be on the safe side, change your style sheet reference to an absolute URL and make sure the style sheet is where it is supposed to be.
<link rel=stylesheet type=" text/css" href=" http://www.domain.com/rollover3.css" >
I normally set up a sub-directory for style sheets like this...
/css/style.css
That way the only items in my root are the primary pages and nothing else other than a robots.txt file.
Your hover is in the correct sequence, it needs to be before the active element and after the visited.
P.S. After reviewing your style sheet reference, there may be some issues with the stylesheet attribute not being quoted. Try this...
<link href=" http://www.domain.com/rollover3.css" type=" text/css" rel=" stylesheet" >
< Message edited by pageoneresults -- 10/23/2002 2:38:30 PM >
_____________________________
SEO Consultants Directory
Find Search Engine Marketing Companies
| |
|
|
|
Seventh
Posts: 1235
Joined: 8/4/2002
From: The Motor City
Status: offline
|
RE: CSS quandary - 10/23/2002 14:33:57
What' s the url, gail? I' ll figure it out.
But for now try this little addition:
Add quotations.
<link rel=" stylesheet" type=" text/css" href=" rollover3.css" >
< Message edited by seventh -- 10/23/2002 2:43:07 PM >
_____________________________
"go forth and create."
| |
|
|
|
pageoneresults
Posts: 1001
From: Orange, CA USA
Status: offline
|
RE: CSS quandary - 10/23/2002 15:02:14
The style sheets you are referencing are not in the root directory where the style sheet path says they are.
You also need to quote your attributes...
rel=" stylesheet"
<link rel=stylesheet type=" text/css" href=" rollover1.css" >
rollover1.css does not appear to be in the root directory which is what you are referencing. Either you' ve misspelled the file name or it is not in the root.
< Message edited by pageoneresults -- 10/23/2002 3:04:15 PM >
_____________________________
SEO Consultants Directory
Find Search Engine Marketing Companies
| |
|
|
|
pageoneresults
Posts: 1001
From: Orange, CA USA
Status: offline
|
RE: CSS quandary - 10/23/2002 15:31:17
Important Note: The a:hover must be placed after the a:link and a:visited Rules, since otherwise the cascading Rules will hide the color property of the a:hover Rule. Similarly, because a:active is placed after a:hover, the active color will apply when the user both activates and hovers over the a: element. For these four CSS Link Rules to work as intended, they must be in this order within your style sheet:
a:link
a:visited
a:hover
a:active
[url=" http://www.123seo.com/information-tips/css-link-rules.htm" ]CSS Link Rules[/url]
< Message edited by pageoneresults -- 10/23/2002 3:51:44 PM >
_____________________________
SEO Consultants Directory
Find Search Engine Marketing Companies
| |
|
|
|
_gail
Posts: 2876
From: So FL
Status: offline
|
RE: CSS quandary: Solved!!! - 10/23/2002 17:26:40
http://www.gtbconsulting.com/abt.htm
Good gracious. I got the rollovers to work!
When all the suggested changes didn' t work, I decided to try changing the file name from:
rollover3.CSS
to
rollover3.css
Does this make sense, simply changing the extension name from all caps to lower case letters?!
gail
| |
|
|
|
pageoneresults
Posts: 1001
From: Orange, CA USA
Status: offline
|
RE: CSS quandary - 10/23/2002 17:38:04
_gail, changing the extension from lower case .css to uppercase .CSS would not make a difference. I just looked at the source code for that page again and it appears that the attributes are now quoted. That is what solved your problem.
BTW, nice little rollover effect you' ve created with css. How does it work in Opera and Netscape? Did you try NN4.7? You want to make sure that there is a viable alternative just in case the style is not supported in the browser.
< Message edited by pageoneresults -- 10/23/2002 5:40:14 PM >
_____________________________
SEO Consultants Directory
Find Search Engine Marketing Companies
| |
|
|
|
_gail
Posts: 2876
From: So FL
Status: offline
|
RE: CSS quandary - 10/23/2002 17:55:43
quote:
ORIGINAL: pageoneresults
_gail, changing the extension from lower case .css to uppercase .CSS would not make a difference.
Hmmm, then the only other thing I did was ftp to the site and manually delete the css files. Then republished with frontpage. Maybe the files weren' t being over written for some reason after I made changes.
quote:
How does it work in Opera and Netscape? Did you try NN4.7?
Oh boy, are you trying to tell me something?! No, haven' t checked it out with any browsers yet.
What' s the " viable alternative" you reference?
Thanks once again everyone for all your help.
gail
| |
|
|
|
pageoneresults
Posts: 1001
From: Orange, CA USA
Status: offline
|
RE: CSS quandary - 10/23/2002 23:10:09
_gail, you should always check your work in the most popular browsers which at the moment are in order of popularity...
Internet Explorer
Netscape
Mozilla
Opera
Hey, I remember a menu I was building a couple of months ago that I gave up on due to time restraints. I just could not get it to display exactly the same in those browsers that support CSS properly!
[url=" http://www.123seo.com/outfront/css/link-menus.htm" ]CSS Link Menu[/url]
This one works on the same premise as yours but I' ve added other controlling attributes which may help you to format them a little more accurately.
P.S. I added the text-align:right attribute to the hover element which gave it some movement other than the rollover color change. You can do all sorts of neat stuff with various attributes.
< Message edited by pageoneresults -- 10/23/2002 11:11:35 PM >
_____________________________
SEO Consultants Directory
Find Search Engine Marketing Companies
| |
|
|
|
Reflect
Posts: 4769
From: USA
Status: offline
|
RE: CSS quandary - 10/24/2002 7:58:41
Hi Gail,
If on Apache it is case sensitive. Might you be hosted on an Apache server?
If so don' t feel bad as I remember going through the same thing in my first involvment on that platform.
Brian
_____________________________
| |
|
|
|
_gail
Posts: 2876
From: So FL
Status: offline
|
RE: CSS quandary - 10/24/2002 8:32:05
quote:
ORIGINAL: Reflect
If on Apache it is case sensitive. Might you be hosted on an Apache server?
I honestly don' t know. But I do know that I' m going to try to stick with all lowercase letters in code anyway as that' s what I understand is required by xhtml. Good to get in the habit, I suppose.
quote:
If so don' t feel bad
I suppose I' m just on information overload right now. A coder, I' m not. I' m going to take a break from this and spend more time in the graphics forum.
But, before I do, I have a few more questions:
- Is proper ordering important for setting up ALL tags in a css file, or only for a links?
quote:
How does it work in Opera and Netscape? Did you try NN4.7
Haven' t checked in NN4 but the javascript rollover effects do not work in Opera. However, when you click on the graphic, the link itself works.
Question:
- Where do I download older versions of Netscape? I' ve checked out their site and am missing it.
As always, you' ve all provided great help with much detail. Thank you for sharing your expertise. The patience and time you give are sincerely appreciated!
thanks, gail
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
