Forum Moderators: not2easy
I am going crazy with this...
I am creating a first page template for another 90+ pages that follow, and I am using the following CSS:
a:link { color:#000080; text-decoration:underline}
a:visited { color:#800080; text-decoration:underline}
a:hover { color:#ff0000; text-decoration:underline}
a:active { color:#334B3A; text-decoration:underline}
```````````````
I find that, with the following DocType DTD insertion:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
(because it is a mixed HTML and CSS page)
After saving like this, and previewing in multiple browsers, it makes all text become red with underline, not just links!
``````````````````
After much trial and error, I removed the DocType line completely, leaving no dtd at all, and it appeared to solve the problem... until I tried Firefox to look at the page.
Now, it appears that all other browsers work correctly, with the exception of Firefox, which still shows all text, as if it were links, by making it red-underlined, upon hover over.
Has anyone else encountered this conflict? I am pulling my hair out, about to embark on proceeding with the page as a template, with a "May not display correctly in Mozilla Firefox" disclaimer, because I am at my wits end...
I am hoping that some of you know more about this, and that it can be an easy fix...
As I learn more, I also hope to contribute more with my own answers to this amazing board...
Please help! Thanks...
Hey, if DOCTYPE has no bearing, why did the removal of that line cause the fix to all browsers except Firefox?
I really appreciate your help. I also tried changing the format a little to break up the lines
to no avail...
If okay, I will post the (pretty small) .css file below. Because I'm a newbie to CSS and copied and pasted, then adapted, I'm wondering if I created some kind of "CSS (connotation) Conflict Catastrophe"... Thx!:
body {
margin:0pt;
}
td {
font:11pt Arial, Helvetica, sans-serif;
color:#666666;
}
a {
color: #993300;
}
a:link {
color:#000080; text-decoration:underline
}
a:visited {
color:#800080; text-decoration:underline
}
a:hover {
color:#ff0000; text-decoration:underline
}
a:active {
color:#334B3A; text-decoration:underline
}
/* Class Styles */
.hwsteps {
font:14pt Arial Bold, Helvetica, sans-serif;
color:#FF6600;
line-height:14pt;
margin-top:0pt;
}
.hwstepssub {
font:9pt Tahoma Bold, Helvetica, sans-serif;
color:#FF6600;
line-height:11pt;
margin-top:0pt;
}
.stepssgmthdr1 {
font:10pt Arial Bold, Helvetica, sans-serif;
color:#033D07;
line-height:12pt;
margin-top:0pt;
}
.stepssgmthdr2 {
font:9pt Arial Bold, Helvetica, sans-serif;
color:#033D07;
line-height:12pt;
margin-top:0pt;
}
.stpnmbers {
font:9pt Arial Bold, Helvetica, sans-serif;
color:#FF6600;
line-height:12pt;
margin-top:0pt;
}
.stptitles {
font:9pt Arial, Helvetica, sans-serif;
color:#0033CC;
line-height:11pt;
margin-top:0pt;
}
.pghdr {
font:14pt Arial Bold, Helvetica, sans-serif;
color:#FF6600;
line-height:16pt;
margin-top:0pt;
}
.pghdrsub {
font:10pt Arial, Helvetica, sans-serif;
color:#000080;
line-height:11pt;
margin-top:0pt;
}
.lastupdText {
font:7pt Arial, Helvetica, sans-serif;
color:#996600;
line-height:14pt;
margin-top:0pt;
}
.qklksText {
font:10pt "Trebuchet MS bold", arial bold, helvetica, sans-serif;
color:#000080;
line-height:14pt;
margin-top:0pt;
}
.qklksLink {
font:9pt Arial, Helvetica, sans-serif;
color:#0033CC;
line-height:13pt;
margin-top:0pt;
}
.WhyHdrText {
font:10pt "Trebuchet MS bold", Arial Bold, Helvetica, sans-serif;
color:#996600;
line-height:12pt;
margin-top:0pt;
}
.bodyText {
font:10pt Arial, Helvetica, sans-serif;
color:#000080;
line-height:12pt;
margin-top:0pt;
}
.addtlNotes {
font:10pt Arial, Helvetica, sans-serif;
color:#000080;
line-height:12pt;
margin-top:0pt;
}
.CopywrtText {
font:9pt Arial, Helvetica, sans-serif;
color:#000080;
line-height:12pt;
margin-top:0pt;
}
.bottmLinks {
font:10pt Arial, Helvetica, sans-serif;
color:#0033CC;
line-height:12pt;
margin-top:0pt;
}
.pageName{
font: 18pt Arial Bold, Helvetica, sans-serif;
color: #5C743D;
line-height:26pt;
letter-spacing:.18em;
}
.subHeader {
font:bold 11pt Arial, Helvetica, sans-serif;
color: #993300;
line-height:22pt;
letter-spacing:.2em;
}
.quote {
font: 20pt Arial, Helvetica, sans-serif;
color: #759DA1;
line-height:30pt;
}
.smallText {
font: 10pt Arial, Helvetica, sans-serif;
color: #666666;
line-height: 22pt;
}
.navText {
font: 11pt Arial, Helvetica, sans-serif;
color: #003366;
line-height:16pt;
letter-spacing:.1em;
text-decoration: none;
}
Are there specific restrictions where my CSS reference line has to be placed?
I have placed:
<link rel="stylesheet" href="shGlobal.css" type="text/css" />
where "shGlobal.css" is the code above.
above the end of </head> but before three Javascripts... Also, do Javascripts conflict with CSS?
Thank you again...
but it did not fix it...
Sounds like there is still a problem in the code. I would put back a DOCTYPE and validate the HTML. Then validate the CSS.
DOCTYPE is primarily for the HTML and you'll be better off validating your HTML pages. Run it through the W3C validator and you will probably find another unclosed </a>.
A little help though pls...
I have never done the validation. Do you happen to know the site link for W3C, and then do I copy all of the HTML code there? And then all of the CSS code there too?
Sorry for being so inexperienced at this, but you are really helping. Thx. again.
You will need to declare a DOCTYPE and Character encoding.
Sample:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
CSS Validator will check your CSS. I only like the URI method and do not use the File Upload for CSS.
You can and should put as much CSS as possible in an external stylesheet.
<link rel="stylesheet" href="shGlobal.css" type="text/css" media="screen" />
You can embed on-page in the head. You can also embed inline within the page. Each has its place and can be perfectly appropriate.
The JavaScipt could conflict with the CSS, but is not where I would start. Validate the code first. Start with the simplest and likeliest problems. If finding an unclosed </a> did not fix the continuation of a link color and underline that is a pretty strong indicator that there is more than one unclosed tag.
Hey, if DOCTYPE has no bearing, why did the removal of that line cause the fix to all browsers except Firefox?Browsers do attempt to work around typos and other "small" problems, but some are more "forgiving" than others depending on the kind of problem encountered. The DOCTYPE, meanwhile, tells the browser, well, what type of document follows, so that it can be interpreted appropriately. Without a DOCTYPE the browser uses its own rules and defaults for interpreting the markup, which vary from author to author and version to version.
This is why code validation is always more reliable than visual inspection in finding errors, though it should not be seen as an end unto itself. Just because a page that displays as intended in your browser doesn't mean it might not have an error that produces negative effects in someone else's.
I am forced to do family focus for now, but will work on this first thing tomorrow and let you know...
Many thanks again...
e.g.:
font: 18pt Arial Bold, Helvetica, sans-serif;
font: 18pt "Arial Bold", Helvetica, sans-serif;
Well, I did all that, and got a lot of missing "ALT" errors, but the CSS validator found no errors (after I put the spaced font names in quotes) and the page looks good.
I think I will simply have to try the page over from scratch unless you might have some further ideas...
I think I will simply have to try the page over from scratch...
I wouldn't get quite so radical yet. Start by commenting out the JavaScript mentioned earlier. Then comment out some bigger blocks of code before and/or after the problem area. If you can isolate the problem to a certain section of code the answer may pop right out. If not, post the needed HTML and CSS in which the problem can be seem and somebody here will help you figure it out.
I've got some learnin' to do Lucy...
