Why does my title alignment change on each webpage?

Question

When I put my site up online, my pages aren't consistent and the whole layout flickers back and forth a few pixels, and it looks like the whole title is jumping. I've tried everything, such as copy and pasting the complete header into each page and it still does it. It's the most obvious on the title bar. see http://kateharperdesigns.com/

Answer 1

The site works perfectly for me (running Opera 9.52).

From looking at your webpage's source code the problem seems to be this:

margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */

padding: 0;

text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */

You are setting both the margin to zero and using text-align: center. Which do almost exactly the same thing.

I assume you are using an older version of Internet Explorer, I suspect it is trying to implement both tags at the same time; but the origin it uses for left aligning is slightly different to the origin it uses for padding. Try removing the text-align:center tag.

Answer 2

In Firefox, there was no jumping that I could see.  Just some suggestions:

1) URLs like "src="Images/Other Images/Title_web.gif" are incorrect.  Do NOT leave white space in your links as some browsers don't know how to read them.  If you must use spaces, and you really don't, do it like this:

src="Images/Other% 20 Images/Title_web.gif

Remove the spaces for correct code as % 20, without spaces, is the code for a space.

2) One broken image:

http://kateharperdesigns.com/Images/Othe...

3) Please use the validation service for each of your pages and correct the coding problems:

http://validator.w3.org/

Very good set of pages as the errors were very, very few,  Really hated to see you using tables for page layout.  Table tags are for presentation of tabular data and the current HTML 4.01 Standards lean towards use of DIVs/CSS.

Ron