Cross-browser compatibility question; looks great in FF, not in IE or Safari.?

Question by rottingzomby: Cross-browser compatibility question; looks great in FF, not in IE or Safari.?
EVERYTHING else works perfectly; it’s just that the pics don’t show. They’re not showing the broken image sign, they just don’t show. Instead, there’s an outline where the image is supposed to go. Any ideas? I’m using Yahoo! Sitebuilder as an HTML editor, but the host isn’t Yahoo!. When done creating a page in Sitebuilder, I preview, select View > Source and copy the HTML and paste it into the code editor of the actual webhost. I then make sure I import all the appropriate images to the correct folder at the webhost. Everything works out great for displaying in Firefox; IE and Safari are another story. Here’s the page so you can look at it in different browsers: www.braff.org/index2.html. Any ideas about why it’s not compatible across different browsers?

Any help would be greatly appreciated.

PS- Yes, I am an HTML idiot; that’s why I use an editor; to compile for me. You may have to “talk down to me” in order for me to get what you’re saying.
EDIT: YES YES YES! Thank you Saj…adding didn’t do anything, but deleting that whole line DID do the trick. Thanks again!

Best answer:

Answer by Saj
If you look at the index2.html file, you will see there’s a line like this:

Try putting after the above line.

The thing is IE gets messed up when “base” tag is used. So, it’s recommended to remove it.

Add your own answer in the comments!

No related content found.

Revisions

There are no revisions for this post.

Tags: , , , , ,

2 Responses to “Cross-browser compatibility question; looks great in FF, not in IE or Safari.?”

  1. joe.attaboy January 4, 2012 at 10:19 AM #

    First, let me tell you that HTML doesn’t “compile.” HTML is written and read as text, and it’s a markup language that’s rendered as written. That being said…

    You’re right about the images not appearing in IE. In FF, everything works.

    The only obvious thing I can see as wrong (based on viewing the source) is that you don’t have your image tags properly closed.

    The Image tag should looks like this:

    I have a feeling that the browsers are rendering the source as XHTML (which is really the correct way to do things these days), and XHTML tags that don’t have a closing tag (like ) have to be closed properly inside the main tag.

    Note above that I have added a space and forward slash before the final bracket. YOU MUST ADD THE SPACE before the slash but DO NOT ADD ONE AFTER!

    Try that and see if it works.

    Also, you might want to consider using a real editor for HTML editing. nVu is free and designed just for this purpose. Link below.

    You might also want to have a look that the XHTML tutorial to see how it works and the minor differences between it and HTML 4.0.

  2. PayneLessDesigns.com January 4, 2012 at 11:06 AM #

    You have a LOT of coding errors which is screwing up a lot of browsers:

    CSS – http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww.braff.org%2Findex2.html

    HTML – http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.braff.org%2Findex2.html

    The 3 HTML errors are the worse because you are not telling the browsers what character encoding to use and worse still, you are not using a document type which is causing every browser to operate in Quirks Mode. In Quirks Mode, they pretty much parse your pages the way the developers of the browser want as the browsers fall back on their default way of parsing a page.

    Always use Firefox to view your pages. It is as close to a CSS2.1 compliant browser as you can get. IE is very, very sloppy about how it reads and parses the code on a page.

    I see NO images on the other pages as there are no links to any. Checked with my web tool which locates broken images and none were found because there are no links to any.

    Ron

Leave a Reply