12 replies [Last post]
mtouchette
Offline
Regular
Last seen: 17 years 40 weeks ago
Joined: 2004-09-30
Posts: 14
Points: 0

on the following i have two problems. one is that the date div will not float right (nor will it display the red border i added for reference purposes). Also, the hover should have a clue background, and the visitied link should not be purple.

any asstance is welcome Smile

CSS:

/* ----------------------eNewsStyles.css Updated 30 June 2005*/

body {
	width: 90%;
	margin: 5%;
	background: url('images/bodyBkg.gif');
	color: #000333;
	font-family: sans-serif; 
	font-size: 10pt;
}

/* ----------------------main page container -- all pages*/

#wrapper {
	width: 100%;
	background-color: #ffffff;
	align: center;
	padding-top: 12px;
}

/* ----------------------page nameplate elements*/

#nameplate {
	position: relative;
	background: #B1B7CF;
	width: 100%;
	height: 70px;
	border-top: 3px #333666 solid;
	border-bottom: 3px #333666 solid;
}

#deptName {
	z-index: 3;
	position: absolute;
	background-color: #999999;
	width: 100%;
	margin-top: 19px;
	border-top: 1px #ffffff solid;
	border-bottom: 1px #ffffff solid;
}

#title {
	z-index: 4;
	position: absolute;
	width: 100%;
	margin-top: 13px;
}

#nameplate h3 { 
	font-family: serif; 
	font-size: 13pt; 
	color: #ffffff; 
	text-align: left; 
	font-style: italic; 
	line-height: 0pt; 
	padding-top: 69px; 
	padding-left: 6px;
}

#deptName h1 { 
	font-family: sans-serif; 
	font-size: 14pt; 
	color: #ffffff; 
	text-align: left; 
	font-weight: bold; 
	line-height: 14pt; 
	padding-left: 6px;
}

#title h2 {	
	font-family: sans-serif; 
	font-size: 34pt; 
	color: #000033; 
	text-align: right; 
	vertical-align: text-top;
	line-height: 27pt; 
	letter-spacing: -.15em; 
	padding-right: 16px; 
}

/* ----------------------nav element(s)*/

.hBar { 
	font-family: sans-serif; 
	font-size: 12pt; 
	line-height: 10pt; 
	color: #333666;
	vertical-align: -2pt; 
}

#navigation {	
	width: 100%;
	height: 20px;
	padding: 2px 0px 0px 0px;
	border-bottom: 1px #333666 solid;
	text-align: center;
}

#navBar {	
	width: 65%;
	float: left;
	text-align: center;
}
#navigation, #volume, #date, p { 
	font-family: sans-serif; 
	font-size: 8pt; 
	line-height: 10pt; 
	color: #333666; 
}

#volume, #date, p { 
	vertical-align: -2pt; 
}

#volume {
	width: 15%;
	float: left;
	text-align: left;
	padding-left: 6px;
)

#date {
	width: 15%;
	float: right;
	text-align: right;
	border: 1px red solid;
}


#navBar a:link       { font-size: 8pt; text-decoration: none; border: 1px dashed 000033; color: #333666; }
#navBar a		     { font-size: 8pt; text-decoration: none; border: 1px dashed 000033; color: #333666; }
#navBar a:hover      { font-size: 8pt; text-decoration: none; border: 1px dashed 000033; background-color: #b1b7cf; color: #000333; }
#navBar a:active     { font-size: 8pt; text-decoration: none; border: 1px dashed 000033; color: #000333; }

HTML (it has a background image which you will not be able to see):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>TR Monthly Monitor 060105 | Front Cover</title>

<link rel="stylesheet" type="text/css" href="eNewsNameplateZdex.css">

</head>

<body>

<div id="wrapper">

	<div id="nameplate">
	
		<div id="deptName">
		<h1>
		Technology Resources</h1>
		</div deptName>
	
		<div id="title">
		<h2>Monthly Monitor </h2>
		</div title>
	
	<h3>Monthly news and notes from the <font face="Arial">TR</font>enches
	</h3>
	</div nameplate>
	
<div id="navigation">
		<div id="volume">
		Volume 1, Issue 1
		</div volume>
			
	<div id="navBar">
	<b>Cover</b>&nbsp;</a> 
	<span class="hBar">|</span> &nbsp;<a href="eNewsFeature.htm">Feature&nbsp;</a> 
	<span class="hBar">|</span> &nbsp;CIO Update&nbsp;</a> 
	<span class="hBar">|</span> &nbsp;In Brief&nbsp;</a> 
	<span class="hBar">|</span> &nbsp;<a href="inTRenches.htm">In the
	<b>TR</b>enches&nbsp;</a> 
	<span class="hBar">|</span> &nbsp;Calendar
	</div navBar>

		<div id="date">
		September 01, 2005
		</div date>
	</div navigation>
	
</div wrapper>

</body>

</html>

Phrozt
Phrozt's picture
Offline
Regular
Last seen: 18 years 2 days ago
Joined: 2004-07-08
Posts: 39
Points: 0

two issues: float right, a:hover

whoooaa.. you have a lot more problems than that... check that out in firefox Oups

I'll see what I can do

mtouchette
Offline
Regular
Last seen: 17 years 40 weeks ago
Joined: 2004-09-30
Posts: 14
Points: 0

two issues: float right, a:hover

yikes!

indeed i do...and i am clueless as to why? this is much simplified from the original version which i constructed using a myriad of negative margins and "band-aid" padding, etc.

i thought this (using the z-index) would make it all better Sad.

if worse comes to worse, it is for an intranet and my employer (still) refuses to consider browsers other than ie when it comes to their usability "standards"...something about their stats show most of their users are on ie.

but, at l(e)ast i am getting them to migrate to CSS, so there is hope. Smile

thanks for your help.

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 10 weeks 3 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

two issues: float right, a:hover

It would make it a lot easier if you could upload it as a HTML page somwhere, with images, so we could get a better look at what you're trying to achieve.

Better, post an image of what you want it to look like, and we'll show you a better way to do it Wink

Verschwindende wrote:
  • CSS doesn't make pies

mtouchette
Offline
Regular
Last seen: 17 years 40 weeks ago
Joined: 2004-09-30
Posts: 14
Points: 0

two issues: float right, a:hover

here is the image but without the volume and date bracketing the top navigation:

http://www.touchette.net/~test/sampleImage.jpg

here is the full CSS, with the old (negative margins, etc.) napempate styling. the CSs bove is thenew (z-index) version. i have not combined them yet. also, the sanrl of font styles at the end is legacy from an old stylesheet. i've not determined which i shall be using yet so they are all still there.

/* ----------------------eNewsStyles.css Updated 30 June 2005*/

body {
	width: 90%;
	margin: 5%;
	background: url('images/bodyBkg.gif');
	color: #000333;
	font-family: sans-serif; 
	font-size: 10pt;
}

/* ----------------------main page container -- all pages*/

#wrapper {
	width: 100%;
	background-color: #ffffff;
	align: center;
	padding: 12px 0px 30px 0px;
}

/* ----------------------page nameplate elements*/

#nameplate {
	background: #B1B7CF;
	position: relative;
	width: 100%;
	height: 70px;
	border-top: 3px #333666 solid;
	border-bottom: 3px #333666 solid;
}

#nameplate h3 { color: #ffffff; font-family: serif; font-size: 13pt; font-style: italic;
line-height: 1pt; padding-left: 6px;}

#title {
	position: relative;
	margin-top: -38px;
	margin-bottom: 26px;
	width: auto;	
	text-align: right;
}

#title h1 {	font-family:  sans-serif; line-height: 1pt; color: #000033; font-size: 34pt; letter-spacing: -.15em; padding-right: 16px;}

#deptName {
	position: relative;
	float: left;
	width: 100%;
	margin-top: 19px;
	border-top: 1px #ffffff solid;
	border-bottom: 1px #ffffff solid;
	border-bottom: 1px white solid;
	padding: 11px 0px 6px 6px;
	background-color: #999999;
}

#deptName h1 { font-family: sans-serif; font-size: 14pt; line-height: 0pt; font-weight: bold; text-align: left; color: #ffffff; }

/* ----------------------nav element(s)*/


#navigation {	
	width: 99.5%;
	padding: 2px 5px 7px 5px;
	border-bottom: 1px #333666 solid;
	align: center;
}

#navigation p { font-family: arial helvetica 'sans serif'; font-size: 8pt; line-height: 10pt; text-align: center; color: #333666; }

#navigationFooter {	
	width: 99.5%;
	padding: 5px 5px 7px 5px;
	margin-top: 12px;
	border-top: 1px #333666 solid;
	border-bottom: 1px #333666 solid;
}
#footerLogo {
	width: 25px;
	height: 26px;
	border: 0 px;
	padding: 0px;
	margin: 0px;
}
	
#navigationFooter p { font-family: arial helvetica 'sans serif'; font-size: 8pt; line-height: 10pt; text-align: center; color: #333666; }

#navigation a:link       { font-size: 8pt; text-decoration: none; border: 1px dashed 000033; color: #333666; }
#navigation a		     { font-size: 8pt; text-decoration: none; border: 1px dashed 000033; color: #333666; }
#navigation a:hover      { font-size: 8pt; text-decoration: none; border: 1px dashed 000033; background-color: #b1b7cf; color: #000333; }
#navigation a:active     { font-size: 8pt; text-decoration: none; border: 1px dashed 000033; color: #000333; } 

#footer {
	width: 99%;
	border-bottom: 3px #333666 solid;
	padding: 3px 6px 3px 8px;
	background-color: #b1b7cf;
}

#footer p {	font-family:  sans-serif; color: #000000; font-size: 12pt;}	

#volume {
	float: left;
	width: 10%;
)

#date (
	float: right;
	width: 10%;
}


/* ----------------------heml email and cover page elements*/

#coverContent {
	position: relative;
	float: right;
	width: 63%;
	margin-top: 15px ;
	margin-right: 3% ;
	margin-bottom: 15px;
	align: center;
	border: 0px #000000 solid;
}

#coverSidebarBkg {
	position: relative;
	float: left;
	width: 20%;
	margin: 18px 1.50% 6px 3%;
	border: 1px #333666 dashed;
	background-color: #f7f8f9; 
}

#coverSidebarHeadline {
	float: right;
	width: 100%;
	padding: 4px 4px 4px 6px;
	background-color: #999999;
	color: #ffffff;
	font-family: sans-serif;
	font-size: 12pt;
	font-weight: bold;
}


#coverSidebarCopy {
	width: 90%;	
	margin-left: 8%;
	padding-bottom: 12px;
	color: #333666;
	text-align: left;
	font-family: serif;
	font-style: italic;
	font-weight: bold;
	font-size: 12pt;	
}	

#coverIntro {
	width: 100%;	
	margin-top: -10px;
	border-top: 1px #DFE2EB dotted;
	border-bottom: 1px #DFE2EB dotted;
	padding: 4px 4px 4px 4px;
	color: #333666;
	text-align: justify;
	font-family: serif;
	font-style: italic;
	font-size: 10pt;
}	 

#coverIntro p {
	font-family: serif;
	font-size: 11.5pt;
	font-style: italic;
	margin: 5px;
	color: #333366;
} 
	 
/* ----------------------body sidebar and callout divs - all pages*/

#sidebarBkg {
	position: relative;
	float: left;
	width: 20%;
	margin: 10px 0px 6px 0px;
	border-top: 1px #333666 dashed;
	border-right: 1px #333666 dashed;
	border-bottom: 1px #333666 dashed;
	background-color: #f7f8f9; 
}

#sidebarHeadline {
	float: right;
	width: 100%;
	padding: 4px 4px 4px 6px;
	background-color: #999999;
	color: #ffffff;
	font-family: sans-serif;
	font-size: 12pt;
	font-weight: bold;
}


#sidebarCopy {
	width: 85%;	
	margin-left: 8%;
	padding-bottom: 12px;
	color: #333666;
	text-align: left;
	font-family: serif;
	font-style: italic;
	font-weight: bold;
	font-size: 12pt;	
}	 
	 
	
#calloutBkg {
	width: 35%;	
	margin: 3px -9px 6px 12px;
	background-color: #F7F8F9;
	float: right;
	border-top: 1px #333666 dashed;
	border-bottom: 1px #333666 dashed;
	border-left: 1px #333666 dashed;
	text-align: justify;
	font-family: serif;
	font-style: italic;
	font-weight: bold;
	font-size: 13pt;	
}

#calloutCopy {
	width: 88%;	
	margin: 6px 0px 6px 7px;
	color: #333666;
	text-align: right;
	font-family: serif;
	font-style: italic;
	font-weight: bold;
	font-size: 12pt;	
}


/* ----------------------body content div and sub divs - all pages*/

#bodyContent {
	float: right;
	width: 77%;
	margin-top: 9px;
	margin-right: -6px;
	align: center;
	border: 0px #000000 solid;
}

#bodyContent p {
	font-family: 'sans serif';
	font-size: 10pt;
	margin-right: 35px;
	color: #333366;
	text-align: justify;
}

#intro {
	width: 75%;	
	margin-top: -10px;
	margin-left: 4%;
	margin-right: 15%;
	border-top: 1px #DFE2EB dotted;
	border-bottom: 1px #DFE2EB dotted;
	padding: 4px 4px 4px 4px;
	color: #333666;
	text-align: justify;
	font-family: serif;
	font-style: italic;
	font-size: 10pt;
}	 

#intro p {
	font-family: serif;
	font-size: 11.5pt;
	font-style: italic;
	margin: 5px;
	color: #333366;
}

#inTRenches {
	width: 89%;
	padding-right: 1.5%;
	padding-left: 1.5%;
	padding-top: 8px;
	padding-bottom: 20px;
	margin-top: 16px;
	margin-right: 4%;
	margin-left: 4%;
	margin-bottom: 16px;
	align: center;
	border-right: 1px #DFE2EB dotted;
	border-left: 1px #DFE2EB dotted;
}

#inTRenches p {
	font-family: 'sans serif';
	font-size: 10pt;
	margin-right: 35px;
	color: #333366;
	text-align: justify;
}

/* ----------------------two column divs - all pages*/

/* ----------------------footer element(s) -- all pages*/


/* ----------------------misc. graphical element(s) -- all pages -- alter as needed*/

/* ----------------------font styles -- all pages*/

a:link       { font-size: 8pt; text-decoration: none; border: 1px dashed 000033; color: #333666; }
a		     { font-size: 8pt; text-decoration: none; border: 1px dashed 000033; color: #333666; }
a:hover      { font-size: 8pt; text-decoration: none; border: 1px dashed 000033; background-color: #b1b7cf; color: #333666; }
a:active     { font-size: 8pt; text-decoration: none; border: 1px dashed 000033; color: #000333; } 

/* ------a:link       { text-decoration: none; color: #0000FF; }

a		     { text-decoration: none; color: #0000FF; }

a:hover      { text-decoration: none; color: #FF0000; }

a:active     { text-decoration: none; color: #FF0000; }
--------------*/ 

h1           { color: #333366; font-size: 14pt; font-weight: bold; }

h2           { color: ##000333; font-size: 12pt; font-weight: bold; }

h3           { color: #ffffff; font-size: 10pt; font-weight: bold; }

h4           { color: ##000333; font-size: 10pt; font-style: italic; }

hl3          { font-size: 12pt; color: #B2C3E6; font-weight: bold; }

.hl3         { font-size: 12pt; color: #B2C3E6; font-weight: bold; }

.s1		     { color: #000000; font-size: 10pt; font-weight: bold; }

.s2		     { color: #000000; font-size: 8pt; font-weight: bold; }

.dummy text	 { font-family: symbol; font-size: 24 pt; color: orange; }

.fade        { color: #A3A6A6; font-size:10pt; }

.footer 	 { font-size: 8pt; color: #0000ff;}

.ul,.ol,.li {margin: 0px; padding: 0px; } 

.ulni-nowrap { list-style-position: outside; list-style-type: circle; margin: 3px 0px 3px 16px; } 

.ulni-wrap { list-style-position: outside; list-style-type: disc; margin: 4px 0px 4px 16px !important; } 

.uli-nowrap { list-style-position: outside; list-style-type: circle; margin: 3px 0px 3px 28px; } 

.uli-wrap { list-style-position: outside; list-style-type: circle; margin: 4px 0px 4px 28px; }

.olni-nowrap { list-style-position: outside; list-style-type: circle; margin: 4px 0px 3px 16px; } 

.olni-wrap { list-style-position: outside; list-style-type: circle; margin: 4px 0px 4px 16px; } 

.oli-nowrap { list-style-position: outside; list-style-type: circle; margin: 4px 0px 3px 28px; } 

.oli-wrap { list-style-position: outside; list-style-type: circle; margin: 4px 0px 4px 28px; }

and i just checked the full page in firefox to be greeted with disaster. for the record, i am on a pc using front page (not my choice), and i have the same type of it-no-looky-good problem when i send things home to work in dreamweaver on my mac. why do they display so differently, is my doc type incorrect or incomplete?

i know, it's a mess. if you think this is bad, you should have seen my CSS trails of six months ago ](*,)

thanks again Smile

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 10 weeks 3 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

two issues: float right, a:hover

Yoyur doctype is spot on (good job Laughing out loud), which leads me to believe you've coded it wrong.

Mind you, you used FrontPage Laughing out loud

I'll have a look at it later.

Verschwindende wrote:
  • CSS doesn't make pies

Phrozt
Phrozt's picture
Offline
Regular
Last seen: 18 years 2 days ago
Joined: 2004-07-08
Posts: 39
Points: 0

two issues: float right, a:hover

yeah.. i just redid your code.. that was a lot easier...

also.. link to the BG image I made:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>TR Monthly Monitor 060105 | Front Cover</title>

<link rel="stylesheet" type="text/css" href="eNewsNameplateZdex.css">

</head>

<body>

<div id="wrapper">
	<div id="header">
		<div id="mainHead">
			<div id="mainHeadLt">
			    <h1>Technology Resources</h1>
				<h3>Monthly news and notes from the TRenches</h3>
			</div>
			<div id="mainHeadRt">
				<h2>Monthly Monitor </h2>
			</div>
		</div>
		<div id="navigation">
		   <div id="volume">
		      Volume 1, Issue 1
		   </div>

		   <div id="navBar">
			   <b>Cover</b>&nbsp;</a>
			   | &nbsp;<a href="eNewsFeature.htm">Feature&nbsp;</a>
			   | &nbsp;CIO Update&nbsp;</a>
			   | &nbsp;In Brief&nbsp;</a>
			   | &nbsp;<a href="inTRenches.htm">In the <b>TR</b>enches&nbsp;</a>
			   | &nbsp;Calendar
		   </div navBar>

		   <div id="date">
		      September 01, 2005
		   </div>
	   </div>
	</div>
</div>
</body>
</html>

/* ----------------------eNewsStyles.css Updated 30 June 2005*/ 

body { 
   width: 90%; 
   margin: 5%; 
   background: url('images/bodyBkg.gif'); 
   color: #000333; 
   font-family: sans-serif; 
   font-size: 10pt; 
} 

/* ----------------------main page container -- all pages*/ 

#wrapper { 
   width: 100%; 
   background-color: #fff; 
   align: center;
   padding-top: 12px; 
} 

#header {
	width: 100%;
	clear: both;
}

#mainHead {
	height: 88px;
	background: url(bg_header.gif) repeat-x top left;
	border-top: 3px solid #333666;
	border-bottom: 3px solid #333666;

}

#mainHeadLt {
	float: left;
	padding-left: 1%;
	width: 69%;
}

#mainHeadRt { 
	float: right;
	width: 29%;	
}

h1, h3 { 
	color: #FFF;
	margin: 0;
}

h1 {
	padding-top: 28px;
	font-size: 14pt;
}

h2 {
	padding-top: 13px;
	padding-right: 1%;
	font-size: 34pt;
	margin: 0;
	text-align: right;
}

h3 {
	padding-top: 13px;
	font-style: italic;
	font-size: 13pt;
}

#navigation {
	width: 100%;
	height: 27px;
	line-height: 27px;
	border-bottom: 1px solid #333666;
	font-size: 8pt;
}

#volume {
	float: left;
	padding-left: 1%;
	width: 24%;
}

#navBar {
	width: 50%;
	float: left;
	text-align: center;	
}

#date {
	float: right;
	text-align: right;
	padding-right: 1%;
	width: 24%
}
	
	
#navBar a           { font-size: 8pt; text-decoration: none; border: 1px dashed 000033; color: #333666; } 
#navBar a:hover      { background-color: #b1b7cf; color: #000333; } 
#navBar a:active     { color: #000333; }

Westboarder
Offline
Regular
Last seen: 15 years 43 weeks ago
Joined: 2005-05-23
Posts: 36
Points: 0

two issues: float right, a:hover

It looks like you modified your html in DW, yet you hand coded your CSS, why is that?

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 18 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

two issues: float right, a:hover

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>TR Monthly Monitor 060105 | Front Cover</title>
<style type="text/css">

body {
   margin: 5%;
   background: url(images/bodyBkg.gif);
   color: #000333;
   font: 12px sans-serif;
}

#wrapper {
   background-color: #fff;
}

#nameplate {
   background: #B1B7CF;
   height: 85px;
   border-top: 3px #333666 solid;
   border-bottom: 3px #333666 solid;
}

#nameplate h1 {
   height: 36px;
   margin: 16px 0 0 0;
   color: #fff;
   border-top: 1px #fff solid;
   border-bottom: 1px #fff solid;
   background: #999;
   padding: 2px 10px;
   font-size: 1.5em;
}

#nameplate h1 span {
   color: #003;
   float: right;
   font-size: 2.5em;
   letter-spacing: -.03em;
}

#nameplate p {
   font-size: 1.2em;
   font-style: italic;
   color: #fff;
   margin: 5px 10px;
}

#navigation {   
   height: 20px;
   line-height: 24px;
   vertical-align: middle;
   border-bottom: 1px #333666 solid;
   text-align: center;
   padding: 2px 10px;
}

#navigation ul {   
   list-style-type: none;
   margin: 0;
}

#navigation ul li {
   display: inline;
   border-right: 1px solid #333666;
   padding: 0 5px 0 3px;
}

#navigation ul li:last-child {
   border: none;
}

#navigation h3 {
   float: left;
   font-size: 1em;
   margin: 0;
}

#date {
   float: right;
   margin: 0;
}


#navigation a { 
   text-decoration: none;
   color: #333666;
}

#navigation a:hover, #navigation a:active {
   color: #000333;
}

</style>
</head>

<body>

<div id="wrapper">

  <div id="nameplate">
    <h1><span>Monthly Monitor </span>Technology Resources</h1>
    <p>Monthly news and notes from the TRenches</p>
  </div>
   
  <div id="navigation">
    <h3>Volume 1, Issue 1</h3>
    <p id="date">September 01, 2005</p>
    <ul>
      <li class="selected"><a href="/">Cover</a></li>
      <li><a href="eNewsFeature.htm">Feature</a></li>
      <li><a href="#">CIO Update</a></li>
      <li><a href="#">In Brief</a></li>
      <li><a href="inTRenches.htm">In the <span>TR</span>enches</a></li>
      <li><a href="#">Calender</a></li>
    </ul>
  </div>
         
</div>

</body>

</html>

1) you need to define a character set.
2) don't include id names in the closing div tags
3) don't use the font tag - it's been deprecated
4) consider changing the order of the hx tags. h1 should be the title of the page content.
5) don't wrap hx tags in divs - just give the hx the id - or target via child selectors.
6) don't declare font sizes in pts unless for a print stylesheet
7) don't use absolute positioning for something that should be in the document flow

mtouchette
Offline
Regular
Last seen: 17 years 40 weeks ago
Joined: 2004-09-30
Posts: 14
Points: 0

two issues: float right, a:hover

thanks to you both--

westboarder's displays a bit funky on my pc in IE and firefox;

phrozt'z displays fine in ie, but "mohtly Monitor" drops in too low in firefox.

i'm printing both for studious review..with any luck i'll learn something and stop badgering all you kind forum peoples Wink.

i use the div names in the closing tags so i can tell what closes what...is there a functional reason why i should not include them, or is it simply a matter ofless data?

the mid-stream switch to HTML text styling was due to the fact i was out of time for delivering the prototype, and having trouble with the CSS.

the actual eNewsletter will be properly executed in CSS Smile.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 18 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

two issues: float right, a:hover

mtouchette wrote:
thanks to you both--
i use the div names in the closing tags so i can tell what closes what...is there a functional reason why i should not include them, or is it simply a matter ofless data?

you won't validate if you include the id in closing tag. If you want to know what closes what, use html comments <!-- like this one -->

Phrozt
Phrozt's picture
Offline
Regular
Last seen: 18 years 2 days ago
Joined: 2004-07-08
Posts: 39
Points: 0

two issues: float right, a:hover

that's odd.. looks fine in both to me, and I'm on a PC.

If you are having a problem, use html>body h2 { width: wahtever } to fix it. That will single a rule out so that only mozilla applies it.

I tried to keep your general layout, since you were most familiar with it.. but I also agree in switching up your tags. Generally, the text that is displayed the largest is hi, followed by subsequent h#s the smaller the text gets.

Also.. I didn't know if you wanted to center the h1 and h3 tags in their division bars.. but I did anyway heh.

as for taking up my time.. I needed a break from the site I'm working on at work.. I've sunk so many weeks into it.. and now we're on the nit-picky details ;P

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 18 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

two issues: float right, a:hover

mtouchette, I just did a quick mock up for FF/Mac and didn't test on PC, or anything else for that matter. I tried to make it somewhat flexible to allow for user font size adjustment, but I didn't spend too much time on it. I also reduced the html source code. There's a few things in there that just aren't needed. Play around with the CSS and I'd bet you could get it to work.