[jt1990]

Ok, I'm building a website just to practice html coding. So far I've done all my scripting in notepad, and previewing in Firefox 2. Everything went great. Until I tried to view the site in IE7. First off, I'd had a black background and white text. When viewed in IE7, the text was black as well as the background. Then I changed the font to Comic Sans MS and put a picture on the background. Then in IE7 it had black text on the picture, and the font was still Times New Roman. Again, when viewed in Firefox it worked fine. I also tried it in Opera, which also worked fine. Anyone have any idea what's going on???

[Advertisements]

Need link to problem site.

Ron

[Major Payne]

Need link to problem site.

Ron

[jt1990]

www.josiahtwitchell.com

It's not very good, I'm only learning the basics of raw HTML scripting at the moment. And I'm also re-uploading pages fairly regularly, just so you know.

Edited by jt1990, 28 July 2008 - 07:27 PM.

[Major Payne]

You really, really need to reduce the file size of your terrific looking background image: 2633.97 KB (2697185 bytes) Takes way too long to load and you're going to lose a lot of dial-uppers who will not wait.

CSS Errors
HTML Code Errors

These definitely have to be corrected:

No Character Encoding Found and here.

No DocType found I recommend the strict doctype, but it does require tighter HTML coding.

Style tags must be between the head tags. Not between the body tags. Better to remove tags and put page styling on an external CSS. Always use lowercase tags and attributes.

Without a doctype, you are putting browsers in Quirks Mode.

I would set up a wrapper div and a content div and not make your text run all the way across the page. Causes eye fatigue for viewers. It's recommended eyes not have to move more then 11% from left to right to read the content.

Hope this helps.

[jt1990]

Yeah, I'd had it set as a .jpg image, but then I made it semi-transparent to make the text easier to read. Is there another file format that will take transparency but is smaller?

I was figuring I had some sort of HTML error that was messing it up, I just don't have the knowledge/skill to be able to do that properly. Thanks, will definitely check out those links!

[Major Payne]

If you are talking about opacity and not transparency, then you can use most formats. To cut the file size of background, you could convert it to a JPEG and compress it to a more reasonable size. See OPACITY TECHNIQUES. PNG and GIF are pretty much the only two for transparent backgrounds. GIF example.

If you have problems correcting the code errors, give a shout.

Ron

[jt1990]

Ah, thanks. Will do that.

[jt1990]

Ok, looking at the css errors, it says that "darkblue" is not a color style. Then why is my font dark blue? Also, when I took that line out of the css, the font turned black. Is there something I'm missing here? I got my color list from this site, and I've been using tutorials from this site.

[Major Payne]

Named colors are not understood by some browsers and it is best when coding pages to use either the rgb(x,y,z) or hex value (#xxxxxx) for a color. There are a limited number of Safe Hexadecimal Color Codes. Using a named color does not always guarantee you get that color. For example, "Aqua" and "Cyan" produce the same color: #00ffff and "Fuchsia" and "Magenta" produce the same color: #ff00ff.

Taking the line out of the css causes browsers to use the set default text color of black (#000000).

Just because something may work in certain browsers doesn't mean it's correctly coded. Firefox is the only browser that meets most of the CSS2.1 Standards. Internet Explorer (all versions) are very, very sloppy browsers when it comes to parsing code. That's why people, who have no idea about coding, love to use it as it makes badly coded pages look good. Unfortunately, IE does not meet HTML 4.01 Standards and comes no where close to meeting CSS2.1. Both of these standards are due to be upgraded to HTML 5.0 and CSS3.0 eventually.

If you coded properly and more people would adhere to the recommended standards, there would be less conflict between pages and the browsers that display them. Of course, the browser developers have to do their part and make a browser that meets and understands the web standards.

If you like to check your pages on different browsers, you might use this site: http://browsershots.org/

I see you still do not have a proper doctype.

Ron

Edited by Major Payne, 30 July 2008 - 10:50 AM.

[jt1990]

Ok, thanks.

No, I haven't had a chance to fool with doctype yet.

[jt1990]

Fascinating... I just looked at the browsershots site. Would most of those get fixed by a doctype? Also, what type of doctype do I want? You mentioned that IE isn't compatible with HTML 4. Would I be better off going with an earlier version of HTML?

[Major Payne]

IE is compatible with HTML 4.01 but in a very sloppy way. It's why it's a very popular browser for those who use nothing but IE and make web pages. It has its quirks and needs some "hacking" with certain HTML/CSS coding. See "Explorer Exposed".

The HTML 4.01 Transitional (

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR...ml4/loose.dtd">

) is the simplest and easiest doctype as it requires the minimum of meeting code standards. It will allow use of deprecated tags, etc.. I would like to see the HTML 4.01 Strict used as it means you have to code a little tighter. Even better is XHTML 1.0 Transitional.

Putting in a doctype and the character encoding would help with a lot of those browsers only in that they will not be in Quirks Mode and should be parsing your page closer to the way you coded it.

Ron

Edited by Major Payne, 30 July 2008 - 06:48 PM.