I am new to using CSS. I have a few problems.
1) For the most part IE looks the way I want it to, but FF does not look right at all.
2) The links will not show up as the color I designate. Can CSS files conflict?
I'm sure my CSS is Ugly at best, and I'm using Coldfusion. I'm slowly trying to learn some newer (for me anyway) stuff like PHP and ASP.
I would appreciate any help I could get with these two issues.
Thanks in advance.
here is the link to the page:
<!-- m --><a class="postlink" href="http://www.mswgraphics.com/pinnaclespokane/test2.cfm">http://www.mswgraphics.com/pinnaclespokane/test2.cfm</a><!-- m -->
here is the link to the css files:
<!-- m --><a class="postlink" href="http://www.mswgraphics.com/pinnaclespokane/includes/city.css">http://www.mswgraphics.com/pinnaclespok ... s/city.css</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.mswgraphics.com/pinnaclespokane/includes/header.css">http://www.mswgraphics.com/pinnaclespok ... header.css</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.mswgraphics.com/pinnaclespokane/includes/footer.css">http://www.mswgraphics.com/pinnaclespok ... footer.css</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.mswgraphics.com/pinnaclespokane/includes/main.cssThat">http://www.mswgraphics.com/pinnaclespok ... in.cssThat</a><!-- m --> is the worst HTML markup I have ever seen. You cannot have multiple <DOCTYPE>, <html>, <head> and<body> tags in one document. And that is just for starters.That is the worst HTML markup I have ever seen. You cannot have multiple <DOCTYPE>, <html>, <head> and<body> tags in one document. And that is just for starters.
Ouch.
But the man is right. You document should look like this:
<!DOCTYPE >
<html>
<head>
</head>
<body>
</body>
</html>
Each of those tags may only appear once. When you start doing weird and wacky things with your markup, all browsers will begin to interpret it in their own way.I appreciate your honesty and being upfront.
here is the actual code:
<HTML>
<HEAD>
<TITLE>Pinnacle Realty, Inc. Spokane, WA</TITLE>
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"includes/city.css" />
<META name="description" content="">
<META name="keywords" content="">
</HEAD>
<BODY>
<div><cfinclude template="includes/menu.htm" /></div>
<div><cfinclude template="includes/header.htm" /></div>
<Q><center><img border="0" src=http://www.webdeveloper.com/forum/archive/index.php/"images/idlease.gif"></center>
<img border="0" src=http://www.webdeveloper.com/forum/archive/index.php/"images/line.gif" width="100%" height="5">
<table>
<tr>
<cfoutput query="listing">
<cfset cityurl="">
<cfif CITY IS "CDA">
<cfset cityurl = "newcdalease.cfm">
</cfif>
<cfif CITY is "Post Falls">
<cfset cityurl = "newpflease.cfm">
</cfif>
<cfif listing.currentrow mod 4 eq 1>
</cfif><td>
<div Q class="size">?br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#cityurl#">#CITY#</a>
<cfif listing.currentrow mod 4 eq 0>
</td>
</cfif></cfoutput>?</div>
</tr>
</table>
<img border="0" src=http://www.webdeveloper.com/forum/archive/index.php/"images/line.gif" width="100%" height="5"><br>
<div Q class="left"><cfinclude template="includes/footer.htm"></div>
</Q>
</BODY>
</HTML>
When you view the source code in IE or FF you see the "includes" as you would see the markup in it's own page. So the code isn't as ugly as you thought until viewed by the "view source". Could this be some of my problem?
Thanks again for your help.OK! So the problem is this: when your page is built including any included files it should then validate. Obviously the includes should only contain markup applicable to the part of the page where they will be included.
I don't know how you are building the pages but roughly what you need to do is make a complete html page that validate then cut it into different sections. The sections that don't change will be placed in your includes template and the sections that are changable will be the ones called by the URL. That way when the page is built it will have perfect markup.I cleaned up the html of the files to be called by the include. I'm still getting a few errors when I validate (not exactly sure why) things look they way they should to me.
But FF still messes up.
any more suggestions would be appreciated.
Thanks.You need to validate first, before trying to fix the way the page displays.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content=
"text/html; charset=us-ascii">
<title>Pinnacle Realty, Inc. Spokane, WA</title>
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"includes/main.css">
<script type="text/javascript" src=http://www.webdeveloper.com/forum/archive/index.php/"includes/menu.js">
</script>
<meta name="description" content="">
<meta name="keywords" content="">
</head>
<body>
<div>
<ul id="menu">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"newlistings.cfm">Listings</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"newabout.cfm">About Us</a></li>
<li>
<div>For Lease</div>
<ul class="subMenu">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"leaseWA.cfm">Washington</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"leaseID.cfm">Idaho</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"leaseMT.cfm">Montana</a></li>
</ul>
</li>
<li>
<div>For Sale</div>
<ul class="subMenu">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"saleWA.cfm">Washington</a></li>
</ul>
</li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"newdemo.cfm">Demographics</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"newagents.cfm">Agents</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"newlinks.cfm">Links</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"newstart.cfm">Home</a></li>
</ul>
</div>
<p class="center"><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/pinnlogosm.gif" alt=
"Pinnacle Realty Inc. : Spokane, Washington"></p>
<p class="city"><img border="0" src=http://www.webdeveloper.com/forum/archive/index.php/"images/idlease.gif" alt=
"Idaho Lease"> <img border="0" src=http://www.webdeveloper.com/forum/archive/index.php/"images/line.gif" alt=""
width="100%" height="5"></p>
<table>
<tr>
<td>
<div>• <a class="orange" href=http://www.webdeveloper.com/forum/archive/index.php/"newcdalease.cfm">CDA</a>
<table>
<tr>
<td>
<div>• <a class="orange" href=http://www.webdeveloper.com/forum/archive/index.php/"newpflease.cfm">Post
Falls</a> •</div>
</td>
</tr>
</table>
<img border="0" src=http://www.webdeveloper.com/forum/archive/index.php/"images/line.gif" alt="" width="100%" height=
"5"><br>
<div>
<p class="foot">NO WARRANTY OR REPRESENTATION, EXPRESS OR IMPLIED
IS MADE BY PINNACLE REALTY, INC., IT’S AGENTS OR IT’S
EMPLOYEES OR MSW GRAPHICS AS TO THE ACCURACY OF THE INFORMATION
CONTAINED HEREIN. THE SAME IS SUBMITTED SUBJECT TO ERRORS,
OMMISSIONS, CHANGE OF PRICE, OR WITHDRAWAL WITHOUT NOTICE AND ANY
SPECIAL LISTING CONDITIONS IMPOSED BY OUR PRINCIPALS. NO ONE
SHOULD RELY ON THE ABOVE INFORMATION, BUT INSTEAD SHOULD CONDUCT
THEIR OWN INVESTIGATION TO INDEPENDENTLY SATISIFY THEMSELVES.</p>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>Ok it's validated and it is still showing up wrong in FF.
any other suggestions?
Thanks for all your help so far I appreciate it.Well now you need to look at your CSS. It is just like any language, just because your grammar is ok that doesn't stop you talking absolute garbage.This: <img width="100%" height="5" border="0" alt="" src=http://www.webdeveloper.com/forum/archive/index.php/"images/line.gif"> doesn't inherit any styling at all.
And this: <a href=http://www.webdeveloper.com/forum/archive/index.php/"newpflease.cfm" class="orange"> only has color and text-decoration styling.
IE is guessing these should have inherited style but that behaviour is not to the standards.Your mistake is using IE as a test tool while creating the pages. You should have used Firefox as the primary test UA.
1) For the most part IE looks the way I want it to, but FF does not look right at all.
2) The links will not show up as the color I designate. Can CSS files conflict?
I'm sure my CSS is Ugly at best, and I'm using Coldfusion. I'm slowly trying to learn some newer (for me anyway) stuff like PHP and ASP.
I would appreciate any help I could get with these two issues.
Thanks in advance.
here is the link to the page:
<!-- m --><a class="postlink" href="http://www.mswgraphics.com/pinnaclespokane/test2.cfm">http://www.mswgraphics.com/pinnaclespokane/test2.cfm</a><!-- m -->
here is the link to the css files:
<!-- m --><a class="postlink" href="http://www.mswgraphics.com/pinnaclespokane/includes/city.css">http://www.mswgraphics.com/pinnaclespok ... s/city.css</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.mswgraphics.com/pinnaclespokane/includes/header.css">http://www.mswgraphics.com/pinnaclespok ... header.css</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.mswgraphics.com/pinnaclespokane/includes/footer.css">http://www.mswgraphics.com/pinnaclespok ... footer.css</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.mswgraphics.com/pinnaclespokane/includes/main.cssThat">http://www.mswgraphics.com/pinnaclespok ... in.cssThat</a><!-- m --> is the worst HTML markup I have ever seen. You cannot have multiple <DOCTYPE>, <html>, <head> and<body> tags in one document. And that is just for starters.That is the worst HTML markup I have ever seen. You cannot have multiple <DOCTYPE>, <html>, <head> and<body> tags in one document. And that is just for starters.
Ouch.
But the man is right. You document should look like this:
<!DOCTYPE >
<html>
<head>
</head>
<body>
</body>
</html>
Each of those tags may only appear once. When you start doing weird and wacky things with your markup, all browsers will begin to interpret it in their own way.I appreciate your honesty and being upfront.
here is the actual code:
<HTML>
<HEAD>
<TITLE>Pinnacle Realty, Inc. Spokane, WA</TITLE>
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"includes/city.css" />
<META name="description" content="">
<META name="keywords" content="">
</HEAD>
<BODY>
<div><cfinclude template="includes/menu.htm" /></div>
<div><cfinclude template="includes/header.htm" /></div>
<Q><center><img border="0" src=http://www.webdeveloper.com/forum/archive/index.php/"images/idlease.gif"></center>
<img border="0" src=http://www.webdeveloper.com/forum/archive/index.php/"images/line.gif" width="100%" height="5">
<table>
<tr>
<cfoutput query="listing">
<cfset cityurl="">
<cfif CITY IS "CDA">
<cfset cityurl = "newcdalease.cfm">
</cfif>
<cfif CITY is "Post Falls">
<cfset cityurl = "newpflease.cfm">
</cfif>
<cfif listing.currentrow mod 4 eq 1>
</cfif><td>
<div Q class="size">?br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#cityurl#">#CITY#</a>
<cfif listing.currentrow mod 4 eq 0>
</td>
</cfif></cfoutput>?</div>
</tr>
</table>
<img border="0" src=http://www.webdeveloper.com/forum/archive/index.php/"images/line.gif" width="100%" height="5"><br>
<div Q class="left"><cfinclude template="includes/footer.htm"></div>
</Q>
</BODY>
</HTML>
When you view the source code in IE or FF you see the "includes" as you would see the markup in it's own page. So the code isn't as ugly as you thought until viewed by the "view source". Could this be some of my problem?
Thanks again for your help.OK! So the problem is this: when your page is built including any included files it should then validate. Obviously the includes should only contain markup applicable to the part of the page where they will be included.
I don't know how you are building the pages but roughly what you need to do is make a complete html page that validate then cut it into different sections. The sections that don't change will be placed in your includes template and the sections that are changable will be the ones called by the URL. That way when the page is built it will have perfect markup.I cleaned up the html of the files to be called by the include. I'm still getting a few errors when I validate (not exactly sure why) things look they way they should to me.
But FF still messes up.
any more suggestions would be appreciated.
Thanks.You need to validate first, before trying to fix the way the page displays.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content=
"text/html; charset=us-ascii">
<title>Pinnacle Realty, Inc. Spokane, WA</title>
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"includes/main.css">
<script type="text/javascript" src=http://www.webdeveloper.com/forum/archive/index.php/"includes/menu.js">
</script>
<meta name="description" content="">
<meta name="keywords" content="">
</head>
<body>
<div>
<ul id="menu">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"newlistings.cfm">Listings</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"newabout.cfm">About Us</a></li>
<li>
<div>For Lease</div>
<ul class="subMenu">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"leaseWA.cfm">Washington</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"leaseID.cfm">Idaho</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"leaseMT.cfm">Montana</a></li>
</ul>
</li>
<li>
<div>For Sale</div>
<ul class="subMenu">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"saleWA.cfm">Washington</a></li>
</ul>
</li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"newdemo.cfm">Demographics</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"newagents.cfm">Agents</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"newlinks.cfm">Links</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"newstart.cfm">Home</a></li>
</ul>
</div>
<p class="center"><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/pinnlogosm.gif" alt=
"Pinnacle Realty Inc. : Spokane, Washington"></p>
<p class="city"><img border="0" src=http://www.webdeveloper.com/forum/archive/index.php/"images/idlease.gif" alt=
"Idaho Lease"> <img border="0" src=http://www.webdeveloper.com/forum/archive/index.php/"images/line.gif" alt=""
width="100%" height="5"></p>
<table>
<tr>
<td>
<div>• <a class="orange" href=http://www.webdeveloper.com/forum/archive/index.php/"newcdalease.cfm">CDA</a>
<table>
<tr>
<td>
<div>• <a class="orange" href=http://www.webdeveloper.com/forum/archive/index.php/"newpflease.cfm">Post
Falls</a> •</div>
</td>
</tr>
</table>
<img border="0" src=http://www.webdeveloper.com/forum/archive/index.php/"images/line.gif" alt="" width="100%" height=
"5"><br>
<div>
<p class="foot">NO WARRANTY OR REPRESENTATION, EXPRESS OR IMPLIED
IS MADE BY PINNACLE REALTY, INC., IT’S AGENTS OR IT’S
EMPLOYEES OR MSW GRAPHICS AS TO THE ACCURACY OF THE INFORMATION
CONTAINED HEREIN. THE SAME IS SUBMITTED SUBJECT TO ERRORS,
OMMISSIONS, CHANGE OF PRICE, OR WITHDRAWAL WITHOUT NOTICE AND ANY
SPECIAL LISTING CONDITIONS IMPOSED BY OUR PRINCIPALS. NO ONE
SHOULD RELY ON THE ABOVE INFORMATION, BUT INSTEAD SHOULD CONDUCT
THEIR OWN INVESTIGATION TO INDEPENDENTLY SATISIFY THEMSELVES.</p>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>Ok it's validated and it is still showing up wrong in FF.
any other suggestions?
Thanks for all your help so far I appreciate it.Well now you need to look at your CSS. It is just like any language, just because your grammar is ok that doesn't stop you talking absolute garbage.This: <img width="100%" height="5" border="0" alt="" src=http://www.webdeveloper.com/forum/archive/index.php/"images/line.gif"> doesn't inherit any styling at all.
And this: <a href=http://www.webdeveloper.com/forum/archive/index.php/"newpflease.cfm" class="orange"> only has color and text-decoration styling.
IE is guessing these should have inherited style but that behaviour is not to the standards.Your mistake is using IE as a test tool while creating the pages. You should have used Firefox as the primary test UA.