H1 headers - Page 1 - Post ID 6648

User 403674 Photo


Registered User
27 posts

I was wondering if anyone could help me format an H1 header. I inserted h1 and h2 headers but want to format the fonts to match my website. I have that done, but now the html is not compliant. How can I properly use an h1 header for site ranking purposes, but also have it compliant and so that it renders properly in ME/Safari/Firefox?

You can view the code at www.walterbjenkins.com. The home page is the one I am concerned about. Thank you for your time.
User 355448 Photo


Ambassador
3,144 posts

Walter,

Line 16 is an empty H1.

Lines 54 - 56 is an empty style.

Line 64/65 is <h1><div class="Object15"><span class="textstyle3">Hire a
Ghostwriter/Professional Writer</span></div></h1>

You can't have a DIV inside an H tag (or a lot of other tags as well).

Try this:
<div class="Object15"><h1><span class="textstyle3">Hire a
Ghostwriter/Professional Writer</span></h1></div>

That may help.

Personally, I would just style the H1 tag and not worry with the span. If you put this is your style, every H1 would look the same way.

h1 {
font-family:Arial;
font-weight:bold;
font-style:normal;
font-size:18pt;
text-decoration:none;
color:#000000;}

Hope this helps.
User 403674 Photo


Registered User
27 posts

Bill: Thank you for taking the time to respond. I created a style for the h1 & h2 and that resolved the compliance issue and the page renders perfectly in ME. However, in Firefox and Safari the formatting is off. Any ideas on what could be causing that? Again, I really appreciate you taking the time to answer my previous question. Have a great day.
User 355448 Photo


Ambassador
3,144 posts

Walter,

Your Doctype is not a standard Doctype, which can put browsers in quirks mode. Each browser will display differently in quirks mode than other browsers. To get browsers in standards mode, you need to start with a Doctype copied from http://www.w3.org/QA/2002/04/valid-dtd-list.html and then just paste it in place of the Doctype you currently have.

Also look at lines 86, 99, 105, 111, and 180 for one or more "malformed URI reference" which is one way of saying that your links have an invalid character such as a space. The code that starts on line 86 has this in it:
href="About Me.html"

You should rename the page so it does not have a space. You can use the _ which is a 'shift -' key, or just eliminate the space and name the page "AboutMe.html" or insert a dash, etc.

Hope this helps.
User 403674 Photo


Registered User
27 posts

Bill: Thanks again for your help. I switched the doc type but the h1/h2 headers are still not displaying properly in firefox/safari. They both drop down several spaces and gives the document a funky appearance. Would the file names you mention have anything to do with the placement of h1/h2?

I'm starting to think I should take h1/h2 out and be done with it. Thanks again for your help.
User 355448 Photo


Ambassador
3,144 posts

Walter,

I have always had problems with absolute positioning doing what you are describing. I do not know the solution other than to program the page without absolute positioning.

Maybe someone else can take a look and find the solution.
User 403674 Photo


Registered User
27 posts

Bill- thanks again for your help. I'm sure there's a solution out there. I just wish I knew enough about html to do it on my own. Have a great day.
User 355448 Photo


Ambassador
3,144 posts

Walter,

Are you using the CoffeeCup Visual Site Designer or the HTML editor? If you started with Visual Site Designer and modified things using the HTML editor, you may have problems with the code.

The Visual Site Designer has recently been upgraded, and if you are using that program, you need to update to the latest version since it fixes the issues of different browsers displaying differently.

Here is a link to a topic that may also be of help to you:
http://www.coffeecup.com/forums/viewtop … 797#p23797
User 403674 Photo


Registered User
27 posts

Bill: thank you again for your help. I did initially create the site in VSD, but have since rebuilt it in Editor 2008. I do see in the header that it still reflects the creation in VSD. That is from when I cipied the code. I can remove it if necessary. I know nothing about html, so I have a few questions.

Even if I created the site in VSD, shouldn't I be able to modify any/all of the code in Editor? Would there be any hidden code that I couldn't see or wouldn't be allowed to modify? If so, how can I make the change so that I have the proper code in Editor?

Also, I went to VSD. Where can I add h1/h2 tags? Other than that, the site is displaying perfectly in all browsers since I switched to Editor.

Thanks again and have a great day.
User 355448 Photo


Ambassador
3,144 posts

Walter,

Some folks are happy using VSD, but others (like me) prefer to see the inner workings of the code. Those that prefer VSD should be using the latest version and NOT modify using the HTML Editor. If you using VSD to build the site, then shift to the HTML Editor, you cannot go back to VSD since VSD will not recognize the changes you made with the HTML Editor.

The link I posted in the previous message is one of the VSD FAQ messages, but the information is likely the solution. Just add a single line of style and some code to your page content and modify the line style to see what happens. Once you modify the style a few times, you should have Firefox displaying correctly.

Give it a try and let us know what happens.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.