3 replies [Last post]
Anonymous
Anonymous's picture
Guru
calgary,alberta
calgary,alberta

I've been working on updating my website and in the process I'm trying to make it much easier to update in the future. What Im finding, is that my CSS settings are not being interpreted uniformly across different platforms... ie IE (no pun intended) and Mozilla... Infact. the seem to act almost opposite of each other... I'll try and make the simplest example of my website that I can.

This is a personal website that will include my resume, weblinks, downloads of my software, etc.

1) each page will be made by using copies of the same template, except that their "data" is inserted using SSI.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
		<title>Page Title</title>
		<link href="css/standard.css" rel="stylesheet" type="text/css">
	</head>

	<body bgcolor="#ffffff" leftmargin="0" marginwidth="0" topmargin="0" marginheight="0">
		<table width="600" usegridx usegridy showgridx showgridy gridx="16" gridy="16" border="0" cellpadding="0" cellspacing="0">
			<tr height="82" width="600">
				<td width="600" height="82" colspan="2" valign="top" align="left" class="headerOrange"><img src="images/pages/header1a.gif" width="600" height="82" border="0"></td>
			</tr>
			<tr height="60">
				<td width="100" valign="top" align="left" class="compactwhite"><!--#include file="navbar1.html"--></td>
				<td width="500" valign="top" align="left"  class="compactwhite"><!--#include file="pagedata/resume.html"--></td>
			</tr>
		</table>
	</body>
</html>

2) now I can create the individual "data" pages, and have one copy of the template for each date page with it's own page title and SSI for the corresponding page... Simple right?...

... To be continued

Anonymous
Anonymous's picture
Guru

template usage

Here is my actual CSS file that I'm attempting to use, and is giving me mixed results...

<!-- ############################################ -->
<!--  Default universal html preferences -->
<!-- ############################################ -->

body {
  background-color : #ffffff;	
}


<!-- ############################################ -->
<!--  This stuff is for the template tables used for assembling the gifs -->
<!-- ############################################ -->

table td.headerOrange {
	background-color: #ff9b07;
	padding:0.0px;
	margin: 0in;
}

table td.compactwhite {
	background-color: #ffffff;
	padding:0.0px;
	margin: 0in;
}

table td.compactblack {
	background-color: #000000;
	padding:0.0px;
	margin: 0in;
}

table td p.compactwhite {
	color:#000000;
	font-family:serif;
	margin:0in;
	margin-left:1.0in;
	margin-bottom:.0001pt;
	text-align: left;
}



<!-- ############################################ -->
<!--  Standard orange header cell with black text & dark orange bars -->
<!-- ############################################ -->

table td.stdHead {
	padding: 5px;
	text-align: center;
	background-color: #FFD28E;
	border-top: solid #FF9B07 1.5pt;
	border-bottom: solid #FF9B07 1.5pt;
}

table td p.stdHead {
	color:#000000;
	font-size:15px;
	font-family:sans-serif;
	font-weight:bold;
	text-decoration:none;
	margin:0.1in;
}


<!-- ############################################ -->
<!--  Standard grey body cell with black text -->
<!-- ############################################ -->

table td.stdBody {
	text-align: justify;
	background-color: #eeeeee;
	padding: 5px;
}

table td p.stdBody {
	color:#000000;
	font-family:serif;
	font-size:12px;
	margin:0.2in;
	text-align: justify;
}

.stdBody A {
	color:#ffffff;
	font-family:serif;
	text-decoration:none;
}

.stdBody A:Visited {
	color:#999999;
	font-family:serif;
	text-decoration:none;
}

.stdBody A:Hover {
	color:#FF9900;
	font-family:serif;
	text-decoration:underline;
}


<!-- ############################################ -->
<!--  Compact grey body cell with black text -->
<!-- ############################################ -->

table td.compactBody {
	text-align: justify;
	background-color: #eeeeee;
	padding: 5px;
}

table td p.compactBody {
	color:#000000;
	font-family:serif;
	font-size:12px;
	margin:0.01in;
	margin-left:0.1in;
	margin-right:0.1in;
	text-align: justify;
}

.compactBody A {
	color:#ffffff;
	font-family:serif;
	text-decoration:none;
}

.compactBody A:Visited {
	color:#999999;
	font-family:serif;
	text-decoration:none;
}

.compactBody A:Hover {
	color:#FF9900;
	font-family:serif;
	text-decoration:underline;
}

table td p.orangeBoldBody {
	color: #FF9B07;
	font-size:12px;
	font-family:sans-serif;
	font-weight:bold;
	text-decoration:none;
	margin:0in;
	margin-left:.1in
}


<!-- ############################################ -->
<!--  Indented grey body cell with black text -->
<!-- ############################################ -->

table td.indentStdBody {
	text-align: justify;
	background-color: #eeeeee;
	padding: 5px;
}

table td p.indentStdBody {
	color:#000000;
	font-family:serif;
	font-size:12px;
	margin:0.1in;
	margin-left:0.6in;
	text-align: justify;
}

.indentStdBody A {
	color:#ffffff;
	font-family:serif;
	text-decoration:none;
}

.indentStdBody A:Visited {
	color:#999999;
	font-family:serif;
	text-decoration:none;
}

.indentStdBody A:Hover {
	color:#FF9900;
	font-family:serif;
	text-decoration:underline;
}


<!-- ############################################ -->
<!--  Standard Nav bar preferences  -->
<!-- ############################################ -->

table td.MenuText {
	padding: 0;
	padding-left: 5px;
	padding-bottom: 2px;
	padding: 5px;
	text-align: left;
	background-color: #FFD28E;
	border-top: solid #FF9B07 1.5pt;
	border-bottom: solid #FF9B07 1.5pt;
}

table td p.MenuText {
	color:#000000;
	font-family:serif;
	font-size : 9pt;
	text-align: left;
	margin: 0.0in;
	margin-left: 0.05in;
	margin-bottom: 0.05in;
}

table td ul li.MenuText {
	list-style-type: square;
	list-style-position: outside;
	list-style-image: url(http://www.shawnroering.com/images/bullet.gif);
}

.MenuText A {
	color:#666666;
	text-decoration:none;
}

.MenuText A:Visited {
	color:#666666;
	text-decoration:none;
}

.MenuText A:Hover {
	color:#ff9b07;
	font-size : 9pt;
	text-decoration:underline;
}

Anonymous
Anonymous's picture
Guru

template usage

And this is a sample of one of the "data" pages that are included into a copy of the template.

<TABLE cellSpacing="0" cellPadding="0" WIDTH="590" ALIGN="center" BORDER="0">
	<tr>
		<td width="10"><spacer type="block" width="1"></td>
		<td width="580" class="stdHead"><p class="stdHead">Greetings</p></td>
	</tr>
	<tr>
		<td width="10"><spacer type="block" width="1"></td>
		<td width="580" class="stdBody"><p class="stdBody">Thank you for visting my website.  Return visitors well find that I have added lots of new information, and infact moved many of my old pages.  I would like to discourage linking directly to individual pages, because I may want to move them from time to time. Please direct links to my website to www.shawnroering.com, and I promise to make finding information as painless as possible.<br> Thank You.</td>
	</tr>
	<tr>
		<td width="10" height="20"><spacer type="block" width="1" height="20"></td>
		<td width="580" height="20"><spacer type="block" width="1" height="20"></td>
	</tr>
</TABLE>

The problem is that my CSS code is being interpreted differently and causing some quite horrid results...

Can anyone provide any advice as to what I can to do fix this problem? am I doing any of this wrong? is there a better way?

I'm resorting to reworking much of my former "data" pages to using nested tables.. (shudder) I'd rather not do that, but I don't know any other way to help garuntee a certain level of quality if the CSS doesn't lay out my text correctly..

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 3 years 41 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

template usage

Huge! Nice one for being complete.

First thing that jumps out is that the CSS comments are wrong. You've used HTML comments, when you should be using:
/* blah blah */
within the CSS file.

Try that... will look deeper just in case though!

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.