Site Display on Internet Explorer vs. Mozilla Firefox

[fortune68]

I have just got my new (and first!!) website pretty much finished, and now I discovered that when searched for with Internet Explorer the first page displays differently than on Mozilla Firefox.

I created the site in a sitebuilder and always worked in Mozilla Firefox. In Firefox it looks perfect.

In Internet Explorer, the writing and a picture go slightly out into the blue strip on the side.

Could anybody have a look at it and maybe tell me why that is, and how I can fix this? It is really annoying, because I think most people still use Internet Explorer, and they all will see an im-professional site.

Here is the link: Beach Theme Home Decor

Of course, if you like the site, you are invited to buy something, too (winkwink)!!!

And please tell your friends about the site if you know somebody interested in Beach Home Decor. Ta!

[kgun]

The same happens in Opera 9.26. May be the reason is your use of nested tables and positioning in table cells.

[ran_dizolph]

Yeowza! That's some UGLY markup!

Congrats on your first site though.

Anywho, it's going to be tough to really pinpoint the issue, as you've got so many nested divs, tables, and a span tags going on.

What i would suggest first, is try it with a strict doctype, which will aid in it rendering a little more consistently cross-browser.

Secondly, do a little reading on the Box Model hack, which may get you pointed in the right direction.

Sorry for the 'ugly' comment, but I just call it like I see it. This is a pretty common issue with WYSIWYG programs. Learn to hand-code, and you'll see the light.

Best of luck.

[suzstephens]

For what it's worth, such differences are to be expected and are something that web site designers deal with everyday. That's why I always work on a Mac running Windows so that I can cross check in multiple browsers and on both platforms.

[kcire]

The HTML page looks terrible...This is of course because of the WYSIWYG editor you used, but I couldn't sleep when this would be the result.

Writing your code 'by hand' gives you more flexibility and a cleaner page of code. When I see the following:

<span lang="en-AU"><span lang="en-AU"><span lang="en-AU"><span lang="en-AU"><span lang="en-AU"><span lang="en-AU"><span lang="en-AU"><span lang="en-AU"><span lang="en-AU"><span lang="en-AU"><span lang="en-AU"><span lang="en-AU"><span lang="en-AU"><span lang="en-AU"><span lang="en-AU"><font size="2"><font color="#000000"><font size="2"><font color="#000000"><font size="3" face="Arial" color="#000000">
<table width="714" height="157" cellspacing="3" cellpadding="3" border="0" summary="">

I almost feel sorry for you...

It isn't smart to clean up your page, this will take a lot of time, certainly when this is your first website. I would start to learn writing HTML combined with the magic of CSS.

A good starting point is of course WebProWorld, but there are many more websites of course! A few that are very handy when you are new to HTML and CSS are:
glish.com : CSS layout techniques
Listamatic: one list, many options - Using CSS and a simple list to create radically different list options
And a little more basic explaining:
Guide to Cascading Style Sheets

Hope to have helped a bit and inspired you to clean your code.

[microtekblue]

nice site..

the problem with ie is that it doesnt understand xhtml and css properly..your going to have to tweak around and trial and error to fix this issue.

[advancedmerchant]

Unfortunately, IE (in its various incarnations) is about 75% of browser useage (at least from OUR server logs), so you should verify appearance in IE as you build your pages. Hand coding is best, but there are HTML optimizers out there that can make your pages leaner and meaner if you do not understand code.

[bj]

Run your code through here, but back it up first:

HTML Tidy Online

That should at least clean up MOST of the cruft! And if you're wondering why no one's just giving you the answer, it's because there is no way to troubleshoot a page with invalid code. You need to get your code valid first, THEN we can help you.

You might want to give this code editor a try:

Amaya Home Page

[ami_iss]

At this moment I don't see a lot of problems in Internet Explorer 6 on your main page except that the top banner doesn't stretch across the top. The font sizes seem to be different in Internet Explorer and IE.

This page is wider than the main page and the top banner looks strange:
Seashell Home Decor Accents

Even with hand coding, browsers tend to to what they like. Firefox obeys only text sizing codes it likes, with very odd results, especially when people change the text size preferences. IE6 does not understand some div commands, which can be disastrous.

All code from WYSIWYG tools has to be cleaned up to some extent. Sometimes junk code inserts something that strops search engine spiders so they cannot read your page. Beware.

In general, it is better to do simple things that will probably work everywhere. Your code is very complex for what it does, because that's what the application did.

If you have a serious business, consider hiring a professional to make your site. Then you can yell at them when it doesn't look right.

[vanse]

Originally Posted by advancedmerchant

Unfortunately, IE (in its various incarnations) is about 75% of browser useage (at least from OUR server logs), so you should verify appearance in IE as you build your pages.

Current browser stats from: Browser Statistics
show much less use for IE:

2008 January
IE7 21.2% IE6 32.0% IE5 1.5% Fx 37.2% Moz 1.3% Net 1.9% Opera 1.4%

Total IE 54.7%

The IE figure has been falling steadily month by month from about 80%+ a couple of years ago.

But while IE is still around 50% of all viewers you need to make sure sites are compatible with both IE and Firefox.

[thorfjalar]

Just to clarify, what some people are saying here is that the markup (what you see if you do view > page source (ctrl+U in firefox)) is ugly, not that your site is. It's nicely designed as rendered by firefox.

It may be a bummer advice to get, that you should do the site over again, but it really is the best one.

Another reason besides from cross browser compatability, why it is important to have clean (short) html code, is for the search engine spiders not to get tired reading it, they have like a million pages to go through before breakfast.

If you don't feel like learning to code by hand, you can fast forward by hiring someone on rentacoder.com or elance.com or similar, to recode your whole site in clean html and css. This would be the best option if you don't intend to update the site ofthen.

If you do, then setting it up in wordpress with a custom theme (so it looks like a site not a blog), might be a good option. Shouldn't cost more than $1-200 maximum.

Basically your options in regards to making a website are just like in printing; make it happen fast, be of quality or cheap, choose any two.

[RegDCP]

Despite the mess in your code, it REALLY should be cleaned up, I think if you change your table padding and spacing to 0 you will see a great improvement.

You have

<table width="" cellspacing="3" cellpadding="3" border="0" align="" summary="">

IE and FF handle table padding and spacing much differently which directly affects the display.

Reg

[fortune68]

Originally Posted by kcire

The HTML page looks terrible...This is of course because of the WYSIWYG editor you used, but I couldn't sleep when this would be the result.

Writing your code 'by hand' gives you more flexibility and a cleaner page of code. When I see the following:

<span lang="en-AU"><span lang="en-AU"><span lang="en-AU"><span lang="en-AU"><span lang="en-AU"><span lang="en-AU"><span lang="en-AU"><span lang="en-AU"><span lang="en-AU"><span lang="en-AU"><span lang="en-AU"><span lang="en-AU"><span lang="en-AU"><span lang="en-AU"><span lang="en-AU"><font size="2"><font color="#000000"><font size="2"><font color="#000000"><font size="3" face="Arial" color="#000000">
<table width="714" height="157" cellspacing="3" cellpadding="3" border="0" summary="">

I almost feel sorry for you...

It isn't smart to clean up your page, this will take a lot of time, certainly when this is your first website. I would start to learn writing HTML combined with the magic of CSS.

A good starting point is of course WebProWorld, but there are many more websites of course! A few that are very handy when you are new to HTML and CSS are:
glish.com : CSS layout techniques
Listamatic: one list, many options - Using CSS and a simple list to create radically different list options
And a little more basic explaining:
Guide to Cascading Style Sheets

Hope to have helped a bit and inspired you to clean your code.

Thanks so much, Erick,
I am learning so much, and I am sure now that next time I will have a much better result! I have started cleaning up my code, and I know it will take a long time, but I am sure it will be worth it!
Thanks again for your help.

Petra )

[G[dot]com]

I think that for that code, you should actually be happy that it is readable at all for both browsers more or less correctly! If with that source code the only problem you get is graphs and texts going a little to a side... be grateful!

It´s not that the site looks unprofessional, it IS unprofessional. And I don´t mean offense here, I am just meaning to say that you should realize that, for the expertise you have and the tools you used, you achieved a respectable result (frontend, visible to the visitor, not looking at the source code).

If you are still maturing your design skills I´d recommend you that you test the websites from your editor in IE, and "risk" that it may not render nice in firefox, and not the opposite (test in firefox, risk with IE, as you did), because still for some time to come, 70% of your visitors will see you through IE.

Good luck!

[fortune68]

Thanks so much for your input, everybody!

I feel like I know now where the problem lies, and because this is my first website I did expect things not to go completely smooth, and now I can start to "clean up my act" and website's HTML!

I am sure my next website will not be as bad (the code, that is!!!)

Cheers
Petra

[darocha]

Hi fortune68,

To fix the layout problem all you have to do is specify the width for the div with the class "Content". Add the "width" property to the .Content class on your style sheet. After that the site will look exactly the same on both browsers.

.Content { width:710px; }

However, even after you fix this you really should clean up your code. It's not that bad but it has a lot o redundant spans and deprecated font tags.

Here are a few guidelines that I'm sure will help you with this task:

1. Remove all font tags from your code.
2. Remove all redundant span and div tags from your code.
3. Since this is a small site, it would be more manageable to keep the style sheet rules on one file. There are duplicated rules on your style sheets. Remember that rules loaded last will override earlier style sheet rules.
4. Validate your code to verify other html errors.

Tip: A technique that I always use is to add borders to all spans and divs on the page to help me quickly spot layout problems with margins, paddings and widths when adjusting layouts.

Here's how:

1. Add the following css rules to the end of your style sheet:

div {border:1px solid red; padding:1px;}
span {border:1px solid green; padding:1px; float:left;}

On your case you can do that for font tags as well. Let's use a different color for that.

font {border:1px solid yellow;}

The 1px padding will add 1px gap between nested divs and spans to better visualize what's going on on the page.
The float:left; is only needed for Firefox to expand those empty spans you have on the page.

2. Look at the page and you will see a lot of divs and spans you never knew existed.

3. After removing all redundant tags, change the padding to 0px on the rules above and check your page again. If everything looks good you can now delete these two rules from your style sheet.

Thanks.

[1stgirl.com]

I tried to restructure Digital Products Center but still looks ugly in Mozilla Firefox.

Despite not a fan of IE, in desperation I ask my visitors to use IE.

[rizzoid]

Don't feel bad about IE's faults. Our small team of programmers design content management sites and getting them to display right in IE6 is one of our main stumbling blocks every time. IE6's misinterpretation of standard CSS and standards-in-general is not just a disappointment, it adds cost to our clients.

Congrats on your first site! For my money, I would take darocha's advice above and edit the style sheet(s).

[Clarrie]

Originally Posted by fortune68

Thanks so much, Erick,
I am learning so much, and I am sure now that next time I will have a much better result! I have started cleaning up my code, and I know it will take a long time, but I am sure it will be worth it!
Thanks again for your help.

Petra )

Hi Ptra

I'd endorse BJ's comment on running it through a validator. If your browser of choice is Firefox, I suggest you take a look at some of the add-ins, as these are really useful for checking code as you go. I'd particularly recommend HTML Validator and Firebug.

[richard-s]

Sitebuilders are very handy for producing a quick web-page but are often poor at handling changes:

When you delete or change something, a WYSIWYG Sitebuilder will often leave unwanted, unnecessary HTML tags.

This can be corrected by simply deleting the page and building it again - boring but effective.

Also, in an attempt to simplify the task, Sitebuilders often do not allow you to edit all of the HTML directly.

Suggestions (in addition to the many good suggestions above):

1. Download & install the (free) "Web Developer" extension to Firefox. Use this tool to validate your page and to help understand the HTML.

2. If possible, make your pages as HTML version 4.01 rather than as XHTML. This is easier to learn and more forgiving. Later, you can progress to the more rigorous XHTML. (But, do use lower-case for HTML tags and use the other simple rules in readiness for XHTML. See w3schools.com)

3. Remove the redundant HTML tags, either by careful hand editing or simply by deleting the web-page and rebuilding it.

4. Consider learning about HTML / XHTML and using a "more powerful" web editing tool. There are many good online tutorials etc. including the w3schools.com web-site.

5. Don't worry: That page looks nice: Most visitors will not notice that the images are slightly off-centre. The web is different to the printed page: Different web-browsers and different PCs will always display web-pages differently. (My web-browsers change most fonts, sizes and colours to suit my needs.)

Richard

[gelcreative]

Hey darocha

Your advice about adding borders around spans and divs is really useful. It really helps to see the code more visually - its like putting on a good pair of glasses!!

I shall definately use your technique in the future - its not easy working *blind*.

Thanks for the advice.

Jane

[noel_x99]

To help avoid problems as you are developing the site, add the IE Tab addon to FF. (It uses the IE enginet to show the page as IE would. ) I usually display the page I'm working on in two tabs in FF - one set to FF and one set to IE. If there's a problem, you see it immediately - and you have a sense of what caused the problem.

I use a WYSIWYG editor, but I never trust the display. Every change I make is tested in FF & IE as I work. I work on two monitors, so that makes it pretty easy.

[joezstuff]

Hey I feel for you,
I use both and have had a similar problem.
I used front page and it helped, you more a less just put what you want and it writes it's own tags html Tags etc.
I just moved up to Web Express (same thing just a little newer) and I'm going through the video now, It's a little bit to comprehend but you can take it one step at a time.it actually shows you how to do it.

I'm don't even scratch the surface of these other people they are awesome but I just want to let you know from a beginner now for 3 years..ha ha

you learns as you go. But I had a similar problem and I went back to the video and fixed it.

most of the time these guys are great in helping but I know how it is when they talk over your head it gets frustrating when you first start.
But keep coming to this site you will learn soooo much. These guys are the greatest. That's how I'm learning.
Joe

[lumby]

Hello Fortune 68
I also use Firefox and have had a similar problem in the past
I have found a Firefox add-on to enable me to switch between Firefox and Explorer very easily to check for coding problems.
the add-on called IE Tab is at https://addons.mozilla.org/en-US/firefox/addon/1419

[kgun]

Originally Posted by 1stgirl.com

I tried to restructure Digital Products Center but still looks ugly in Mozilla Firefox.

Despite not a fan of IE, in desperation I ask my visitors to use IE.

1. Is IE a W3C DOM Compliant browser?
2. What about Vector Graphics in IE (the Canvas object?)
3. Try this feature sniffing in FF, IE 6.+ and Opera:

var canvase = document.getElementById("graphicsID");

if typeof canvas.getContext != "undefined") {

var context=canvas.getContext("2d");

.....

}

IE does not support the Canvas object (Coordinate Systems, Transformations and Units - SVG 1.1 - 20030114), while FF and Opera is building 3d methods. Most probably this is the future of (already the reality of) Scalable Vector Graphics with client side scripting.

Generally, I recommend using CSS to style your site. Resources:

1. W3Schools Online Web Tutorials Css Tutorials
2. Practical Books for Web Developers and Designers CSS books with free example chapters.
3. The three layers of the web. Simply javascript: The Three Layers of the Web [JavaScript & AJAX Tutorials]
4. DigitalStart.net: The starting point for English speaking surfers and webmasters Read about the 4 layers (3 above + the security) of the web, when you have time.

[darocha]

Hi 1stgirl.com,

Your fix is also easy to do:

Locate the line below on your code. It's just above the table with id="4". Then remove the height and increase the width to 250px.

Change this:
<div style="float: right; width: 150px; height: 100px;">

To:
<div style="float: right; width: 250px;">

IE expands divs heights if the content inside of it is larger than the specified height, Firefox always keeps its height and width even if the content inside of it is larger.

Thanks.

[fortune68]

Hi Richard,

I'm sorry, but I don't understand what "validating your code" is, and I also don't know what a style sheet is. I am struggling through some of the advice given in this thread and I know I have to learn A LOT still, but maybe you could just very briefly tell me about those 2 things. Thanks!

Petra.

[kula]

Doesn't have anything to do with the display difficulties, but if you trim the background image to 1 pixel wide you will cut about 15kb out of the load cycle.

[kula]

btw, style sheets are the files referenced in the link tags in your page head and "validating" your code is submitting it to an analysis of whether it conforms to the html(or xhtml) standard.

style sheets control the way that referenced "id"s and "class"s and "element"s are displayed

[richard-s]

In an effort to "keep it simple," Sitebuilder programs often limit what you can do. So, you may not be able to follow all the suggestions while still using the Sitebuilder rather than a more flexible - more complicated - web editing program.

Style Sheets:

These are small files written using CSS (Cascading Style Sheet) "language" which define the appearance of your web-page. CSS is explained on the W3Schools Online Web Tutorials web-site.

A style sheet would be called something like "beachstyle.css" and be uploaded with your web-site. It can be typed into an ordinary text editor like MS Notepad and then saved with the .css file extension.

Styles can define most aspects of the appearance of the web-page, including font types & sizes, colours, borders, etc. etc.

By using the "link" tag in the "head" part of your web-page, you can tell the visitor's web-browser to use the styles defined in a style sheet. A web-page can use more than one style sheet. The visitor's web-browser "obeys the latest command"!

Using style sheets can simplify the web-page, help make the pages in a web-site more consistent and make changes easier.

Validating Code:

Word Processors provide spell-checkers etc., Web Editing programs provide "Validators." Some expensive web-editing programs have a built-in validator but many people use the (free) online tools.

These are automatic tools which read the HTML in a web-page and report any errors.

Being automatic rather than human, they are not infallible but are very useful.

You can browse to the tool and submit a web-page, but I use the "Web Developer" extension to Firefox which provides many useful tools including submitting web-pages for validation.

This is a report on your web-page.

Remember, errors near the top of a web-page will confuse the validator so that it reports spurious errors further down: Always correct errors starting at the top of the page.

Also, XHTML is more strict than ordinary HTML so is harder to get right - while you're learning.

Richard

[kgun]

Originally Posted by fortune68

Hi Richard,

I'm sorry, but I don't understand what "validating your code" is, and I also don't know what a style sheet is. I am struggling through some of the advice given in this thread and I know I have to learn A LOT still, but maybe you could just very briefly tell me about those 2 things. Thanks!

Petra.

Then I suggest that you start with the HTML and CSS tutorials at W3 Schools that I mentioned in the post above. It is regarded as an authoritative site on web tutorials with more than 30 mill visitors / month.

Since you use FireFox, I also advice you to install Firebug - Web Development Evolved and learn how to use it. You will get acces to it as a green / (red icon with errors on the page) in the lower right corner of the page. You also get access to the tool on the "Tools" menu.

There is a (highly reccomende) SitePoint book (that also explain the SVG canvas object) that I mentioned above

The*Art*& Science*of JavaScript - SitePoint Books

that has a full chapter (4) explaining FireBug

You may get expert help at the Dev Opera community. You may also find good articles there.

Advanced example Using animateMotion in SVG - Opera Developer Community that may be too early now, but relevant for the future.

[jScott_Harris]

I'm a huge advocate of Firefox and IE 7 has ingrained that even more. Firefox has a ton of extensions that can really help, my favorite being Web Developer.

Another is https://addons.mozilla.org/en-US/firefox/addon/1419.

But even with these you're somewhat limited. Check out BrowserCam.com - BrowserCam . they offer a free account where they will render your website on multiple browsers using multiple operating systems. Keeps you from having to have a Mac,Linux and a PC.

Hope this helps.

[chebyrashka]

In regards to the browser stats posted earlier, I wouldn't recommend basing browser usage off of them. That is for the W3schools site, it leans heavily towards designers/developers so FireFox usage will skew. I think you'll see generally FF around 15%.

Generally though it's not that difficult to design for all the browsers and even if FF is whiz bang cool, the majority of users out there are using IE.

2008 January
IE7 21.2% IE6 32.0% IE5 1.5% Fx 37.2% Moz 1.3% Net 1.9% Opera 1.4%

Total IE 54.7%