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 misinterpr