Okay, I've uploaded my home page template and everything looks great for my Firefox browser...BUT on my Explorer Browser everything is pushed to the left instead of centered. Does anyone know how I can fix this so that it shows up properly on IE? Thanks in advance for any help.

I hope you have a copy of the original template some where. Then you can compare it with your current web page. You only have to compare the first couple of lines. The original template came with a tag as the first line. Your web page is missing this line. The line is necessary for Internet Explorer to display the web page correctly. Firefox doesn't rely on this tag to display correctly, only Internet Explorer.

The cause of the problem is that you are using the on-line Bravenet Visual editor. That editor does a validation of sorts, and deletes structures that it doesn't recognize. The tag is one of the structures it does not recognize. If you put the tag back in using the Text editor, you will see the difference in the display. But when you go back to the Visual editor and save your work, the line will be deleted again.

You seem to be doing pretty well with the templates, but a better approach might be to download a copy of Nvu or Kompozer. This free editor can work with CSS enabled templates. Then you can design on your PC and upload your pages when they are ready. It's a much better way to work than using the on-line editors.

Thank you so much. You were right and have been a great help. I'll have to check out those editors. Thanks again.

I am having the same issue with the earlier versions of IE and my page display. I read your suggestion and my code does have the DOCTYPE tag in it, however it still displays wrong in IE 6. It works fine in IE 8 and Firefox.

Any assistance would be greatly appreciated.

Thanks - Jen

Browser: Internet Explorer 6.0

OS: Windows

The on-line Visual editor still causes the DOCTYPE tag issue. But, your DOCTYPE is intact, so your probably not using the on-line Visual editor. But the DOCTYPE tag is not intended to fix everything.

I don't have IE6. I mostly use Firefox 3.5.2 and, when I have to, IE 7. On some private networks I sometimes use Netscape and Sea Monkey. The only differences I see between the two browsers is some font sizes. Specifically, any place you use the header styles, h1, h2, h3, h4, etc.., the font is much larger in IE than in Firefox. An example is the area in the header that uses "h4" says "Welcome to the new Mayors Youth Empowerment Program (MYEP) website!". In Firefox it looks fine but in IE, the font is too big. The line wraps and is partially hidden. The reason for that is, you don't have any style definitions for the header styles, so it's relying on the browsers default style.

The fix for that specific item is relatively simple. Add a style setting for "h4" to your style sheet. Something like the definition below will keep it the same in IE and Firefox.

But, you may want to set the default sizes for the rest of the header tags. A common error is when a user sets a small default font size for say "h1" and "h2". Than they try to use "h3" and find out the font is bigger than "h1" and "h2". Something like the following could be used to manage the header tags and keep them relative to each other.



The settings above would display like the listing below.

• h1 {font-size: 2em;}


• h2 {font-size: 1.5em;}


• h3 {font-size: 1.1em;}


• h4 {font-size: 1em;}


• h5 {font-size: 0.8em;}


• h6 {font-size: 0.6em;}

If there is some other issue with your web pages, you might want to provide a screen shot so we can have a better understanding.

Browser: Firefox, Netscape, Sea Monkey, Internet Explorer, .....

OS: Solaris (Sparc,x86), Linux, XP

Thanks for the tips on the fonts. I'll be sure to get that fixed.

Here is a link to the screenshots of what I see in IE6. I use Dreamweaver for my editor.

http://www.myep.us/images/Document.rtf

Thanks -Jennifer

Browser: Internet Explorer 6.0

OS: Windows

Sorry I took so long, but I got sidetracked on another posting.

I can see from your screenshot what your talking about. Since I didn't have IE6 myself, I downloaded a trial version of Microsoft Expression Web 3 Super Preview. This allowed me to view your site in Firefox, IE6, and IE7. The examples I provide need to be viewed in IE6 to see the progression of the fixes.

You are really dealing with multiple problems. What took so long was figuring out the minimum change needed to fix the issues. And, fix it so it didn't affect the display in other browsers and browser versions.

The first problem is known as the "IE6 Negative Margin Bug". This bub occurs when:

• There are two consecutive block-level boxes;


• The second one has a negative top margin; and


• There is at least one border on the second box or its ancestors.

Well, the block where your image is located (ID="content") fits those requirements. This is what cuts off the image at the top. You can put the string "IE6 Negative Margin Bug" in a Google search and read about all the frustration it caused. I picked, what I thought, was the simplest fix and added it to a copy of your front page - Negative Margin Fix. That fixed the image. I added it to the HTML file as a conditional style. It's only used if the viewing browser is IE6 or older.

Then I worked on getting the sidebars in the right place. The main content area appeared to be just a little to wide. IE6 apparently allocates a little more room for borders than are really necessary. At first I tried just reducing the various containers in the "content" section. But this meant reducing 6 or 7 style width definitions. This was too much so I just increased the defined page width by three pixels (ID="page") - Sidebar Problem Fix. As with the image fix, I made the change as a conditional style.

The last thing I did was fix the font size on the message below the top image - Font Size Fix.

Below is the code that I added to the web page to fix the Image and Sidebar issues. You can see exactly where I put it by viewing the web page source code.



This is the code I added to fix the font sizes. I also added this to the web page. both of these additions can be moved to the end of your style sheet so it will apply to all of your pages.

Browser: Firefox, Netscape, Sea Monkey, Internet Explorer, .....

OS: Solaris (Sparc,x86), Linux, XP

This statement isn't completely true. The conditional IF statement, listed in my last post, is a HTML construct and can not be moved to the style sheet. To use it, it will need to be included in each page that requires the fixes.

The other styles for H1 to H6 can be moved to the style sheet, as long as you remove the "style" tags wrapped around the styles.

Browser: Firefox, Netscape, Sea Monkey, Internet Explorer, .....

OS: Solaris (Sparc,x86), Linux, XP

I just noticed that the forum dropped one of the style settings. After "zoom" setting there should be a "position" setting to "relative". It's really there but the forum erases it. Below is what the code should look like. Just replace [colon] with an actual "colon" character.

Browser: Firefox, Netscape, Sea Monkey, Internet Explorer, .....

OS: Solaris (Sparc,x86), Linux, XP