18 replies [Last post]
Calman45
Calman45's picture
Offline
Regular
Okanagan Valley, BC
Last seen: 8 years 31 weeks ago
Okanagan Valley, BC
Timezone: GMT-8
Joined: 2013-01-04
Posts: 31
Points: 38

Hi Folks,

I started working on a "refurb" over the last month, as I am new to CSS (all previous web stuff built in table structures). I tried a validator, which threw up a couple of float errors, so I fixed them first, before creating this topic.

Now ... I had a go at rebuilding our home page using CSS, which was going quite well in my HTML editor (preview) .. but once I went live (temp file of course) ... it looked a complete mess. Basically, the div with the text paragraphs should sit on the upper right, but isn't further down the page, with following Divs out of position.

The funny thing was, with Compatibility Mode switched on in IE, all looked fine, as I viewed in editor while coding, but in normal IE mode or other browsers, such as Firefox, Chrome etc, it looks a complete mess!!!!

I am sure it's my lousy beginner's approach, but some direction where I am fundamentally going wrong would be greatly appreciated (please go easy on my 'far from perfect' coding with CSS)

Here in my working file link:
http://www.okanaganforum.com/index2013DIVS.html

All the best,
Cal

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 17 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Welcome to CSSC, Cal

Since you're moving from table layout to more modern methods, you have a relearning hill to climb. Table layout markup can be neither well structured nor semantic. It will be as if you are learning html from scratch; learning the new won't be so bad, it's unlearning the old that will give you tired-head.

First, you're not doing td elements, and the div element is not an equivalent. The div is simply a non-semantic container for grouping other containers, an aggregator, if you will. Likewise it is not a substitute for a spacer.gif. Use margin or padding to provide space.

The Okanagan page layout is simple, a banner, two columns and a footer. You have given few elements semantic value, and the document has no structure other than the order. Look at the pages in my site, paying particular attention to the markup. They should provide you a starting point.

Also, it is imperative that the markup be valid. Browsers are pretty good about guessing what you mean, but you can't really expect consistent results with errors. See W3 html validator.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Calman45
Calman45's picture
Offline
Regular
Okanagan Valley, BC
Last seen: 8 years 31 weeks ago
Okanagan Valley, BC
Timezone: GMT-8
Joined: 2013-01-04
Posts: 31
Points: 38

Hi Gary, Many thanks for your

Hi Gary,

Many thanks for your reply!!! ... really clarifies the changes I need to be aware of.

Since my initial post, I dabbled some more, in particular, I sat back and re-thought how I was going about things. Rather than have Divs jumping our of position, I created two main containers/columns after the header and placed inner nested Divs for the page content.

It seems to work for me now, so I am simply getting my teeth into the workings of CSS and learning the tags and how they react. As you say, I need to put the old school table structure into the back of my mind and see this as a fresh start. Overall, at this early stage, it feels that Divs have far more control in holding things in place, specifically across multi-browser settings.

Look forward to the learning ahead!

All the best,
Cal Smile

Calman45
Calman45's picture
Offline
Regular
Okanagan Valley, BC
Last seen: 8 years 31 weeks ago
Okanagan Valley, BC
Timezone: GMT-8
Joined: 2013-01-04
Posts: 31
Points: 38

... me again! lolOkay, read

... me again! lol

Okay, read up a little on Doctypes.

This is what I originally had in place:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"

I changed mine to the below:
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"

...and massively reduced the errors from several hundred to approx 45!

So logic would suggest I stick with the replacement Doctype (as one of the suggested formats here on CSSC) .. and steadily chip away at fixing the tags I can under this setting?

All the best,
Cal Smile

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 19 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Calman45 wrote: This is what

Calman45 wrote:

This is what I originally had in place:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"

I changed mine to the below:
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"

...and massively reduced the errors from several hundred to approx 45!

A little knowledge is a dangerous thing! In this case you have drawn exactly the wrong conclusion.

You should ALWAYS use the STRICT document type of whatever version of HTML you are using. The errors did not go away, they just were ignored by the validator because you used the transitional document type. THEY ARE STILL IN YOUR CODE AND BROWSERS STILL HAVE TO DEAL WITH THEM!!

Since there are no standards for browsers to follow in rendering invalid code they all do it different ways, and so your cross browser compatibility will go all to heck.

There is no shortcut to success and I'm afraid you must deal with and correct those errors. Sweeping them under the carpet with a transitional document type will not help.

But it's not so bad as you might think. Just start at the top figuring out how the code should be to be valid and correct each instance. You will find that your error count will go down much faster than you expect, because many of the "errors" found by the validator are the consequence of previous errors.

When you code web pages you should check for validity every few lines. It will save you much time and endless headaches. This applies to both HTML and CSS, but it is much more important to get your HTML correct since for CSS a browser will simply ignore invalid code, whereas browsers always try to render HTML no matter how badly formed it is.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Calman45
Calman45's picture
Offline
Regular
Okanagan Valley, BC
Last seen: 8 years 31 weeks ago
Okanagan Valley, BC
Timezone: GMT-8
Joined: 2013-01-04
Posts: 31
Points: 38

Hi Ed, Many thanks for your

Hi Ed,

Many thanks for your extensive reply ... makes complete sense when you sit back and think it all though!!

So, I guess I should replace my original Doctype and start to make some inroads into the errors which the validator produces, right?

I also understand what you say about the vast number of errors, which in some cases, can be tripped by subsequent issues in the style of coding. Sometimes I read the validator's explanation and find myself scratching my head, as it suggests ways to fix, but in some cases, doesn't produce a black and white approach to correcting an invalid tag/routine.

Nevertheless, I shall make a backup copy of this development page and attempt to dramatically reduce the error count, working from top to bottom (fixing a few issues at a time, then re-validate to hopefully reduce the count - rather than increasing it)

Again, thanks for your input, really appreciate your expertise.

All the best,
Cal

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 19 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Calman45 wrote: Hi Ed, Many

Calman45 wrote:

Hi Ed,

Many thanks for your extensive reply ... makes complete sense when you sit back and think it all though!!

So, I guess I should replace my original Doctype and start to make some inroads into the errors which the validator produces, right?

Either that, or throw it away and recreate it with valid HTML using proper semantic tagging practices. Semantic HTML merely means that you use tags that describe the actual content. This has many advantages that I won't go into here as it is covered by many other messages in this forum and elsewhere.

As an example, take your menus. What is a menu, actually? Well in HTML it is a list of hyperlinks. So it should be marked up as a list, as suggested earlier in this thread, because that's what it is.

The basic plan would be to write your HTML first in such a way that it describes the content, and ignoring the final appearance of the page. If you do it that way it then becomes easy to make the page look like you want it to with CSS. And then later, if you want to, you can revamp the entire look of the site without even touching the HTML. And as a bonus your SEO will be automatically better without any need for extraneous "meta" tags in the head of the document.

Well, HTML is not perfect and if you do it this way you might later need to throw in a few aggregating tags to create useful hooks for CSS. But the principal remains.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Calman45
Calman45's picture
Offline
Regular
Okanagan Valley, BC
Last seen: 8 years 31 weeks ago
Okanagan Valley, BC
Timezone: GMT-8
Joined: 2013-01-04
Posts: 31
Points: 38

I read the guide here on

I read the guide here on CSSC, so the real choice was between transitional or strict - where you suggested Strict XHTML was the best way to go.

One quick question I have at the moment, is it 100% advised to replace all tags in lower case, as the validator suggested this is the way strict doctypes prefer to read code? ... the reason I ask, is that I temporary replaced a group of A HREF\s and A STYLE into lower case, but the error count increased. My only thought on this, is possibly due to the bigger picture, where more needs to be fixed, before this particular change echoes in the overall result?

I am still reading other areas and know there is a lot of work ahead. Regardless of others, who advised to go with Transitional Doctypes, I will stick with what I have and attempt to reduce the error count (which I have managed to drop slightly to 282 from around 350 at present)

All the best,
Cal Smile

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 17 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Hi Cal, The reason for using

Hi Cal,

The reason for using all lowercase is twofold. First, while html is case insensitive, xhtml, css, and javascript are not. All elements and their attributes in xhtml are lowercase. It should also be noted that the web runs on Unix type machines, where filenames are case sensitive; Style.css is not the same file as style.css. By consciously defaulting to all lower case, you avoid a lot of opportunities for error.

Regarding the DTD, use <!DOCTYPE html>. It is the preferred DTD for html5 and is backward compatible. It supports both xhtml and html syntax. Do not feel that you must use the new v.5 elements, etc.

As long as I'm at the podium bloviating, try to adopt a formatting style that is easy on the human eyeball, Mark I. My own preference is to indent nested elements 2 or 3 spaces, and separate sibling elements with a blank line. Element attributes should also be indented, one to a line. Example:

<p class="ads">
  <iframe src="http://example.com/"
          width="120"
          height="240"
          scrolling="no"
          marginwidth="0"
          marginheight="0"
          frameborder="0"></iframe>
</p>
Notice I said "spaces". Do not tab unless your editor converts those tabs to spaces on save.

CSS should also be formatted. It is a Good Thing™ to alphabetize the properties; you'd be amazed at the number of times you'll have conflicting property values without that simple trick. Example:

@import "/common.css";
 
h1, h2, h3, h4, h5, h6 {
  color: #696;
  }
 
pre { 
  background-color: #ada;
  border: 1px solid #060;
  margin: 1.25em 0 0;
  padding: 5px;
  }

With good formatting, it is much easier to find the code section you're looking for and easier to spot missing or redundant tags.

Enough preachin' for now.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 17 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Cal wrote:. the reason I

Cal wrote:

. the reason I ask, is that I temporary replaced a group of A HREF\s and A STYLE into lower case, but the error count increased.

If you didn't also change the closing tags, it left you with open elements. In the case of the anchor element, it may not contain another 'a' element nor a block element, so potential for multiple cascading errors.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Calman45
Calman45's picture
Offline
Regular
Okanagan Valley, BC
Last seen: 8 years 31 weeks ago
Okanagan Valley, BC
Timezone: GMT-8
Joined: 2013-01-04
Posts: 31
Points: 38

... well friends, I sat

... well friends, I sat myself down, referenced the validator against my code, read some articles here on CSSC and other resources around the net. After a good solid hour, I am pleased to say the error count has now "genuinely" dropped from 219/8 to 70/3. Of course, there is more work to be done, but I feel like I really put a dent into things tonight and look forward to at least identifying half of the remaining errors/warnings.

I'd like to thank you both for your quality input, as it's really opened my eyes to CSS and modern HTML techniques. From here on in, planning, careful execution and frequent validation passes will certainly be on the cards.

The Doctype still seems a little bit of a grey area to me, but at least I've learned a few things in the last 48hrs.

All the best,
Cal Smile

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 17 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

DTD

The doctype has two functions:

  1. Tell the browser to run in either standards mode or quirks, and
  2. tell the validator which rules to use for validating the syntax.

The first makes browsers, especially IE—less so the other UAs, run like old versions that didn't follow the standards. There is no sane reason to trigger quirks mode, so simply use the complete DTD. <!doctype html> keeps you in standards mode. (On a side note, MSFT introduced "compatibility mode" to allow old code written for old, crappy browsers to run in IE≥9 and not break. There is, again, no sane reason to use it in new documents.)

The second reason for the DTD is for the author. Telling the validator which set of rules you're writing against keeps you honest.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Calman45
Calman45's picture
Offline
Regular
Okanagan Valley, BC
Last seen: 8 years 31 weeks ago
Okanagan Valley, BC
Timezone: GMT-8
Joined: 2013-01-04
Posts: 31
Points: 38

Many thanks for explaining

Many thanks for explaining that gary, makes a bit more sense now!

Okay, I had a few spare minutes to return to the validator project this morning. One section I am focused on right now, is how flash elements are handled in CSS/XHTML. Basically, the 'standard' export code which Flash produces, flagged up 5-6 validator errors per routine.

So .... I removed the default embed/param lengthy code and replaced with this:

----------------------------------------------------------------------------------------

div id="flash-header"
object type="application/x-shockwave-flash"
data="http://www.okanaganforum.com/admin/flash/2012banner.swf"
width="940" height="206"
param name="movie" value="http://www.okanaganforum.com/admin/flash/2012banner.swf" /
param name="quality" value="high"/
param name="wmode" value="transparent" /
/object
/div

----------------------------------------------------------------------------------------

The good news is, it dropped my error count by 11 .. but now I see a very brief "broken icon/blank container" as I would call it, before the entire page content loads into the browser - then the SWF runs. Is this normal?

All the best,
Cal

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 17 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Flash delay

Is this in IE<9? I think it's due to MSFT having been naughty with someone else's patents on auto-loading/starting or some such. What happens is the movie can't stream, and must fully load before starting. There are work-arounds, such as a small wrapper flash object that calls the real movie, or some ugly javascript. I don't see it happening in FF or IE9, but do in IEv.7/8.

If that's the case, don't worry about it. IE7 is obsoleted by two major revisions, and IE10 will make v.8 the same. (Google has announced they will cease support for v.8 when v.10 is released.)

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Calman45
Calman45's picture
Offline
Regular
Okanagan Valley, BC
Last seen: 8 years 31 weeks ago
Okanagan Valley, BC
Timezone: GMT-8
Joined: 2013-01-04
Posts: 31
Points: 38

ARGH!!!!!!!!!!!!!!!!!!!!!!! T

ARGH!!!!!!!!!!!!!!!!!!!!!!!

Typed out a long reply and lost it some how????

Anyway, can't remember the novel version, but basically, I also run IE9, although cross check on FF, Chrome & Opera. You may have looked at my test page, after I reverted to the original code, pumped out by Flash. Until I find a resolution, I will stick with the routine below (even if the Validator kicks up 6 errors per script).

----------------------------------------------------------------------------------------------------------

div id="flash-header"
object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="940" height="206" align="middle"
param name="allowScriptAccess" value="sameDomain" /
param name="movie" value="http://www.okanaganforum.com/admin/flash/2012banner.swf" /param name="quality" value="high" /param name="wmode" value="transparent" /embed src="http://www.okanaganforum.com/admin/flash/2012banner.swf" quality="high" wmode="transparent" width="940" height="206" align="center" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /
/object
/div

----------------------------------------------------------------------------------------------------------

All the best,
Cal

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 17 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Test page

This is the document I used for testing.

<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html; charset=utf-8"
          http-equiv="Content-Type" />
 
    <title>test doc</title>
 
    <style type="text/css">
 
      #flash-banner {
        text-align: center;
        }
 
    </style>
  </head>
 
    <body>
      <div id="flash-banner">
	<object type="application/x-shockwave-flash" 
		data="http://www.okanaganforum.com/admin/flash/2012banner.swf"
		width="940" 
		height="206">
	  <param name="movie" 
		 value="http://www.okanaganforum.com/admin/flash/2012banner.swf" />
 
	  <param name="quality" 
		 value="high" />
 
	  <param name="wmode" 
		 value="transparent" />
 
	  <p>Oops! Flash object didn&apos;t load/run.</p>
	</object>
      </div> <!-- end flash banner -->
  </body>
</html>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Calman45
Calman45's picture
Offline
Regular
Okanagan Valley, BC
Last seen: 8 years 31 weeks ago
Okanagan Valley, BC
Timezone: GMT-8
Joined: 2013-01-04
Posts: 31
Points: 38

Yup! That's what I changed

Yup!

That's what I changed to initially Gary (which reduced the validation errors somewhat) ... but on loading the web page on my end, it produced this loader image below for a brief moment, until all page content was fully loaded. So, may not be right at the moment, but reverted to the Flash created code I had previous to this exercise.

Image1.jpg

The current good news is, I am down to "32/3" ... feel like I have climbed Everest!! lol

All the best,
Cal Smile

Calman45
Calman45's picture
Offline
Regular
Okanagan Valley, BC
Last seen: 8 years 31 weeks ago
Okanagan Valley, BC
Timezone: GMT-8
Joined: 2013-01-04
Posts: 31
Points: 38

... still can't find a

... still can't find a cross-browser compatible resolve for Flash Elements and iFrames (as I know that would probably knock of another 15-20 errors), so for now, I am happy with (Edit: 26/3 - as of 9th Jan), based on my knowledge and learning curve these past few days.

I'd like to thank you both for your time and high level of expertise - as I would still be walking around in circles otherwise.

All the best,
Cal

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 17 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Iframes

The object element is the proper way to import an html document, instead of the iframe. Again, IE may be a deal-breaker. Try it, you may like it.

<object type="text/html"
        data="example.com">
  <p>Oops! The page didn&apos;t load.</p>
</object>

If IE screws up, change the DTD to transitional; that will allow the iframe. It's a sorry work-around, but so was IE.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.