17 replies [Last post]
dada78
Offline
Regular
Last seen: 13 years 31 weeks ago
Joined: 2004-11-30
Posts: 16
Points: 0

thanks

rbolwerk
rbolwerk's picture
Offline
Enthusiast
Last seen: 15 years 41 weeks ago
Joined: 2004-11-30
Posts: 71
Points: 0

HTML Validation problems and IE/Mac 5.2 CSS not rendering

Hi Carina,

Since I run IE 6 on the pc I thought I'd check it for u.

I am sorry to say but its indeed a right mess :roll: but in Firefox it looks really great!!

I would start with those 111 errors from the validation, they seem to to be mostly of the same.

I used :
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.carinafuller.com%2Findex.htm&charset=%28detect+automatically%29&doctype=%28detect+automatically%29&ss=1&outline=1&sp=1&No200=1&verbose=1

I would start with getting rid of all the Ampersants in the URL'S and replace them with "&" (without the quotes)

e.g.
<a href="http://www.blogger.com/email-post.g?blogID=9343375&postID=110172172940805176" title="Email Post">

should become:

<a href="http://www.blogger.com/email-post.g?blogID=9343375&amp;postID=110172172940805176" title="Email Post">

When these errors are gone then its much easier to see what else is wrong. I can already see that some tags are not properly opened or closed ...

dada78
Offline
Regular
Last seen: 13 years 31 weeks ago
Joined: 2004-11-30
Posts: 16
Points: 0

Thank you ---&gt; BUT:

Thanks

rbolwerk
rbolwerk's picture
Offline
Enthusiast
Last seen: 15 years 41 weeks ago
Joined: 2004-11-30
Posts: 71
Points: 0

HTML Validation problems and IE/Mac 5.2 CSS not rendering

Hey Dada78 ...

Replace the body style with the one below and it will work like a charm in IE 6.0 pc, check IE Mac because I don't have that.

body{
 margin: 0;
 padding: 0;
 border: 0;
 text-align: center;
 color: #ffffff;
 background: url(http://www.carinafuller.com/img/dropshadow3.gif) repeat-y center top;
 font-family: "Times New Roman", "Trebuchet MS Lucida Grande", lucida, helvetica, sans-serif;
}

It was the dubbel quote in MS"Lucida Laughing out loud

rbolwerk
rbolwerk's picture
Offline
Enthusiast
Last seen: 15 years 41 weeks ago
Joined: 2004-11-30
Posts: 71
Points: 0

HTML Validation problems and IE/Mac 5.2 CSS not rendering

oh ... get rid of the second DOCTYPE definition too

c ya!

dada78
Offline
Regular
Last seen: 13 years 31 weeks ago
Joined: 2004-11-30
Posts: 16
Points: 0

Wow!!!!!

Thanks

ThomM
ThomM's picture
Offline
newbie
upstate New York
Last seen: 18 years 3 days ago
upstate New York
Timezone: GMT-5
Joined: 2004-11-30
Posts: 2
Points: 0

HTML Validation problems and IE/Mac 5.2 CSS not rendering

Hi dada,
Just playing around I got you down to 11 errors, those are caused by elements being out of place ie. h1 tag not in a div. I attached it as a text file to this post.

dada78
Offline
Regular
Last seen: 13 years 31 weeks ago
Joined: 2004-11-30
Posts: 16
Points: 0

Not quite perfect...

Thanks

rbolwerk
rbolwerk's picture
Offline
Enthusiast
Last seen: 15 years 41 weeks ago
Joined: 2004-11-30
Posts: 71
Points: 0

HTML Validation problems and IE/Mac 5.2 CSS not rendering

I have u down to ZERO! I started with the source file from Thom.

It validates 100% and shows well in Firefox and IE 6.0 pc.

There are some comments in the code to help you make the changes.

One thing though ... In IE6 the side bar incl. the picture seem to show completly below the blogs. Its an error from IE not the code. (otherwise it would not validate)

Does the problem also persist in IE mac?

The shadow also works ...

here u go, copy and paste and Bob is your Uncle Smile :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Test</title>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="generator" content="Blogger" />
<link rel="service.post" type="application/atom+xml" title="Test" href="http://www.blogger.com/atom/9393891" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.blogger.com/rsd.pyra?blogID=9393891" />

<meta name="ROBOTS" content="NOINDEX,NOFOLLOW" />
<style type="text/css">
@import url("http://www.blogger.com/css/blog_controls.css");
@import url("http://www.blogger.com/dyn-css/authorization.css?blogID=9393891");
</style>


  <style type="text/css">
/*
-----------------------------------------------
Blogger Template Style
Name:     Son of Moto (Mean Green Blogging Machine variation)
Designer: Jeffrey Zeldman
URL:      www.zeldman.com
Date:     23 Feb 2004
----------------------------------------------- */


	/* Primary layout */

body	{
	margin: 0;
	padding: 0;
	border: 0;
	text-align: center;
	color: #FFFFFF;
	background: url(http://www.carinafuller.com/img/dropshadow3.gif) repeat-y center top;
	font: "Times New Roman", "Trebuchet MS Lucida Grande", lucida, helvetica, sans-serif;
	}

img		{
	border: 0;
	display: block;
	}


	/* Wrapper */

#wrapper	{
	margin: 0 auto;
	padding: 0 0 0 1;
	border: 0;
	width: 700px;
	text-align: left;
	background: #fff url(http://www.blogblog.com/moto_son/innerwrap.gif) top right repeat-y;
	font-size:90%;
	}
	

	/* Header */

#blog-header	{
	color: #ffe;
	background: #BFC191 url(http://www.carinafuller.com/img/green3.gif) repeat-x;
	margin: 0 auto;
	padding: 0 0 0px;
	height: 100px;
	border-top: 0;
	border-right: 0;
	border-left: 0;
	}

#blog-header h1	{
	font-size: 24px;
	text-align: left;
	padding: 60px 20px 0 30px;
	margin: 0;
	font-family: "Times New Roman", "Trebuchet MS";
	font-weight: normal;
	color: #FFFFFF;
	letter-spacing: 1px;
	}
	
#blog-header p	{
	font-size: 110%;
	text-align: left;
	padding: 3px 20px 10px 20px;
	margin: 0;
	line-height:140%;
	}

	
	/* Inner layout */

#content	{
	padding: 0 20px 0 30px;
	}
	
#main	{
	width: 400px;
	float: left;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #eee;
	}

#sidebar	{
	width: 226px;
	float: right;
	}
	
	/* Bottom layout */


#footer	{
	clear: left;
	margin: 0;
	padding: 0 20px;
	border: 0;
	text-align: left;
	border-top: 1px solid #f9f9f9;
	background-color: #fdfdfd;
	}
	
#footer p	{
	text-align: left;
	margin: 0;
	padding: 10px 0;
	font-size: 10px;
	background-color: transparent;
	color: #999;
	font-family: Verdana, Helvetica, sans-serif;
	}


	/* Default links 	*/

a:link, a:visited {
	font-weight : bold; 
	text-decoration : none;
	color: #E8008E; 
	}

a:hover {
	font-weight : bold; 
	text-decoration : underline;
	color: #999999; 
	}

a:active {
	font-weight : bold; 
	text-decoration : none;
	color: #E8008E;
	background: transparent;  
	}

	
	/* Typography */
	
#main p, #sidebar p {
	line-height: 20px;
	margin-top: 5px;
	margin-bottom: 1em;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	margin-right: 20px;
	margin-left: 10px;
	}

h2, h3, h4, h5	{
	margin: 25px 0 0;
	padding: 0;
	}

h2	{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	}

h3.post-title {
	margin-top: 15px;
	color: #6D0138;
	font-family: "Trebuchet MS", Verdana, sans-serif;
	font-size: 12px;
	font-weight: bolder;
	text-transform: capitalize;
	background-color: #FFC5DF;
	width: auto;
	padding-top: 5px;
	padding-bottom: 5px;
	letter-spacing: 1px;
	padding-left: 10px;
	}
	
dl.profile-datablock	{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	margin-right: 0;
	margin-top: 3px;
	margin-bottom: 5px;
	}
dl.profile-datablock dd {
	line-height: 15px;
  }
	
.profile-img {display:inline;}

.profile-img img {
	float:left;
	border:4px solid #eee;
	margin-top: 10;
	margin-right: 10px;
	margin-bottom: 5px;
	}
		
#comments	{
	border: 0;
	border-top: 1px dashed #eed;
	margin: 10px 0 0 0;
	padding: 0;
	}

#comments h3	{
	margin-top: 10px;
	margin-bottom: -10px;
	font-weight: normal;
	font-style: italic;
	text-transform: uppercase;
	letter-spacing: 1px;
	}	

#comments dl dt 	{
	font-weight: bold;
	font-style: italic;
	margin-top: 35px;
	padding: 1px 0 0 18px;
	background: transparent url(http://www.blogblog.com/moto_son/commentbug.gif) top left no-repeat;
	color: #998;
	}

#comments dl dd	{
	padding: 0;
	margin: 0;
	}
.deleted-comment {
  font-style:italic;
  color:gray;
  }
  body,td,th {
	color: #554;
}
a:link {
	color: #9A9881;
	text-decoration: none;
}
a:visited {
	color: #9A9881;
	text-decoration: none;
}
  .style1 {color: #E8008E}
  .sidebardescript {
	padding-top: 10px;
	padding-bottom: 5px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #eee;
       font-family: Verdana, Helvetica, sans-serif;
	font-size: 10px;
}
  #bloggerimg {
	float: right;
	margin-right: 80px;
	margin-top: -30px;
}
  #titlecolor {
	color: #D50670;
}
  .xml-button {
	float: right;
	margin-right: 130px;
}
.guestbook-link {
	padding-top: 10px;
	padding-bottom: 5px;
       font-family: "Times New Roman", "Trebuchet MS", Lucida Grande", lucida, serif;
       color: #D5A4BC;
       border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #FFC5DF;
       background: #FFFFFF;
       }
    #amazon-ad {
    margin-top: 30px;
    margin-left: 20px;
}
  #carina {
    margin-top: 25px;
    margin-left: -6px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #FFC5DF;
}

  </style>

</head>
<body>
	<!-- Begin wrapper -->
	<div id="wrapper">
		<div id="blog-header">
			<h1>
				Test
			</h1>
			<p>
			</p>
		</div>
		<!-- Begin content -->
		<div id="content">
			<!-- Begin main column -->
			<div id="main">
				<h2 class="date-header">
					Tuesday, November 30, 2004
				</h2>
				<!-- Begin .post -->
				<div class="post">
					<a name="110183168281360479">
					</a>
					<h3 class="post-title">
						This is a test
					</h3>
					<div class="post-body">
						<p>
						</p>
					</div>
					<p class="post-footer">
						<em>
							posted by citykind @ 
							<a href="http://carinafuller.com/2004/11/this-is-test_30.htm" title="permanent link">
								8:21 AM
							</a>
						</em>
						<a class="comment-link" href="http://carinafuller.com/2004/11/this-is-test_30.htm#comments">
							0 comments
						</a>
						<span class="item-control admin-477213175 pid-100501845">
							<a style="border:none;" href="http://www.blogger.com/app/post.pyra?blogID=9393891&amp;postID=110183168281360479&amp;quickEdit=true" title="Edit Post">
								<span class="quick-edit-icon">
									&nbsp;
								</span>
							</a>
						</span>
					</p>
				</div>
		    <!-- End .post -->
		    <!-- Begin #comments -->
 				<!-- End #comments -->
		    <!-- Begin .post -->
    		<div class="post">
    			<a name="110183156038460104">
    			</a>
    			<h3 class="post-title">
    				This is a test
    			</h3>
    			<div class="post-body">
    				<p>
    				</p>
    			</div>
    			<p class="post-footer">
    				<em>
    					posted by citykind @ 
    					<a href="http://carinafuller.com/2004/11/this-is-test.htm" title="permanent link">
    						8:18 AM
    					</a>
    				</em>
    				<a class="comment-link" href="http://carinafuller.com/2004/11/this-is-test.htm#comments">
    					0 comments
    				</a>
    				<span class="item-control admin-477213175 pid-100501845">
    					<a style="border:none;" href="http://www.blogger.com/app/post.pyra?blogID=9393891&amp;postID=110183156038460104&amp;quickEdit=true" title="Edit Post">
    						<span class="quick-edit-icon">
    							&nbsp;
    						</span>
    					</a>
    				</span>
    			</p>
    		</div>
    		<!-- End .post -->
		    <!-- Begin #comments -->
				<!-- End #comments -->
			<!-- End main column -->
			</div>
			<div id="sidebar">
		<!-- removed this		<p>  -->
 					<div id="carina">
						<img src="http://www.bionic-fnb.com/img/carina.jpg" width="235" height="235" alt="" />
			<!--	removed this  	</p>  -->
			</div>

    <!-- Begin #profile-container -->
   
   
   
    <!-- End #profile-container -->
  
  
  		<h2 class="sidebar-title">
  			Previous Posts
  		</h2>
  			<div class="sidebardescript">
  				<a href="http://carinafuller.com/2004/11/this-is-test_30.htm">
  					This is a test
  				</a>
  			</div>
  			<div class="sidebardescript">
  				<a href="http://carinafuller.com/2004/11/this-is-test.htm">
  					This is a test
  				</a>
  			</div>
  			<h2 class="sidebar-title">
  				Archives
  			</h2>
  			<div class="sidebardescript">
  				<a href="http://carinafuller.com/2004_11_01_">
  					11/01/2004 - 11/30/2004
  				</a>
  			</div>
  			
  	<!--	</ul> this one has no opening ul -->



				<div class="sidebardescript">
					<a href="http://carinafuller.com/atom.xml" title="Atom feed">
						Site Feed
					</a>
					<a href="http://carinafuller.com/atom.xml" title="Subscribe to my feed">
						<img src="http://www.carinafuller.com/img/xml_button.gif" class="xml-button" alt="" /> <!-- ended like this ...button"/> --> 
					</a>
				</div> 
				<div class="guestbook-link">
					Sign in My Guestbook
				<!--	<a href="http://www.iguest.net/cgi-bin/gb.cgi?user=dada78"> >></a></div>  -->
  				<a href="http://www.iguest.net/cgi-bin/gb.cgi?user=dada78">
  				</a>
  			</div>
    <!--
    <p>This is a paragraph of text that could go in the sidebar.</p>
    -->

  <!-- End sidebar -->

			</div>
		<!-- End content -->
		</div>
		<div id="footer">
			<p>
				<!-- Blog contents copyright  2004 <a href="mailto:[email protected]" title="Write to me.">Your Name Here</a> -->
				Copyright 2004 carina fuller | All rights reserved
			</p>
		</div>
		<div id="bloggerimg">
		
<!-- took this away, its an undefined tag		<id="powered-by">  -->
		
		
		<a href="http://www.blogger.com">
			<img src="http://buttons.blogger.com/bloggerbutton1.gif" alt="Powered by Blogger" />
		</a>
	</div>
<!-- End wrapper -->

</div>



</body>
</html>

[/code]

rbolwerk
rbolwerk's picture
Offline
Enthusiast
Last seen: 15 years 41 weeks ago
Joined: 2004-11-30
Posts: 71
Points: 0

HTML Validation problems and IE/Mac 5.2 CSS not rendering

Quote:
problem/Question 2: Does it matter if you specify the fonts in CSS within "", ie: "Times Roman" or can it be also just Times Roman ?

If there is a space between the words then u must use the quotes.

remco

dada78
Offline
Regular
Last seen: 13 years 31 weeks ago
Joined: 2004-11-30
Posts: 16
Points: 0

Oh my:

You guys must think I am totally retarded, but I took the code and pasted it-but it wasn't showing the css styles in Safari at all. ?
Maybe it's all on my end but it gets kind of tricky because I have to edit the file (current.htm) see attachment above, which has not the code that the browser displays because it uses a databse string or something (who knows what those signs are) ---see explanation here:

http://help.blogger.com/bin/answer.py?answer=778&query=tags&topic=0&type=f

When I tried to copy and paste your code, I must have forgotten a dot here or there and am again stuck with a no-show/ or low-show for that matter. I am sure your code is excellent but, this blogger template stuff is tricky.

ThomM
ThomM's picture
Offline
newbie
upstate New York
Last seen: 18 years 3 days ago
upstate New York
Timezone: GMT-5
Joined: 2004-11-30
Posts: 2
Points: 0

HTML Validation problems and IE/Mac 5.2 CSS not rendering

From what I have heard and read Safari doesn't have good support for CSS.

rbolwerk
rbolwerk's picture
Offline
Enthusiast
Last seen: 15 years 41 weeks ago
Joined: 2004-11-30
Posts: 71
Points: 0

HTML Validation problems and IE/Mac 5.2 CSS not rendering

I understand what your problem is ... can you please post a version of 'current.htm' with all the database codes/tags in. So the full template which u now use on

The version above is NOT a proper html file, you have used MSWord to edit the file Evil (always use a text editor like Notepad or something BUT NEVER USE MSWORD). MsWord stores all sort of nonsense in the file.

So I want the template file which u use for http://www.carinafuller.com and preferably one which has not been opened in MSWord.

Choi

dada78
Offline
Regular
Last seen: 13 years 31 weeks ago
Joined: 2004-11-30
Posts: 16
Points: 0

Problem solved!

Thanks

rbolwerk
rbolwerk's picture
Offline
Enthusiast
Last seen: 15 years 41 weeks ago
Joined: 2004-11-30
Posts: 71
Points: 0

HTML Validation problems and IE/Mac 5.2 CSS not rendering

You don't need us!! Looks great in Moz and Firefox. Laughing out loud

IE6 is having a problem though ... see attachment.

I'll look at it tomorrow ...

rbolwerk
rbolwerk's picture
Offline
Enthusiast
Last seen: 15 years 41 weeks ago
Joined: 2004-11-30
Posts: 71
Points: 0

HTML Validation problems and IE/Mac 5.2 CSS not rendering

sorry ... the file was too big. In any case the image and Previous Posts etc. is only showing right at the end of the body text.

dada78
Offline
Regular
Last seen: 13 years 31 weeks ago
Joined: 2004-11-30
Posts: 16
Points: 0

Almost perfect

Thanks for the effort and error report!

An additional problem also persists: the white border that is assigned to the wrapper is not showing properly.

Any ideas for fixing appearance in IE 6?

Merci

rbolwerk
rbolwerk's picture
Offline
Enthusiast
Last seen: 15 years 41 weeks ago
Joined: 2004-11-30
Posts: 71
Points: 0

HTML Validation problems and IE/Mac 5.2 CSS not rendering

4.18 am!!! Wow! Smile

Anyway, for your border, I don't really know what you mean. Your post implies that the border works in other browsers yet I don't see the difference.

Nevertyheless, copy the following and replace the old Wrapper class:

	/* Wrapper */

#wrapper	{
	margin: 0 auto;
	padding: 0 0 0 1;

  border-width:1px 1px 1px 1px; /* Top Right Bottom Left */
  border-style:solid solid solid solid; /* other value are 'none | solid | dotted | dashed | double | groove | ridge | inset | outset' */
  border-color:red red red red; 

/*	border-right: 1; */
/*	border-left: 1; */

	width: 700px;
	text-align: left;
	background: url(http://www.blogblog.com/moto_son/innerwrap.gif) top right repeat-y;
	font-size:90%;
	}

For a border to show you must assign a Width, Style and Color value. This code works for FireFox and IE6 and should work for others as well. Your border code has been commented out.

There is a problem though with the top border. Increase it to e.g. 10 and then 50px and you'll see what i mean. This is the same for IE and FireFox. Unless you want a colored Top border I would really not worry about it.

Hope it helps ...