?
Solved

HTML renders differently on IE/Netscape/Opera

Posted on 2003-11-20
10
Medium Priority
?
404 Views
Last Modified: 2010-04-09
I'm running what should be the latest browsers, IE 6.0.28, Netscape 7.1, and Opera 7.2.  The pages in question begin at http://www.promonmc.com/tradewinds/index.htm.  There are several pages that render differently, but only in a slight horizontal placement of the logo at the top of the pages.  I'll start by pointing out two pages that render differently but there are several.  There will be more questions posted about the difference in horizontal placement of that logo between other pages unless I figure it out first....so this could get lucrative for someone.

The pages I'm wondering about are the index page http://www.promonmc.com/tradewinds/index.htm and http://www.promonmc.com/tradewinds/services.htm.  IE and Netscape work fine, but Opera displaces the logo slightly.  I worked it down to where if you delete the symbols and text for marketing plan and merchandising plan, it renders identically.  What's causing the difference and how can this be corrected?
0
Comment
Question by:Bob3975
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
  • 2
  • +1
10 Comments
 
LVL 11

Expert Comment

by:Zontar
ID: 9790514
Looks the same to me in MSIE 6.0, Opera 7.21, and Mozilla 1.5.

You might replace those vspace attributes on the images with a little CSS padding, though. Actually, come to think of it -- you could get rid of the img tags for the bullets altogether by using an ordered list with list-style-type:image; list-style-image:url('...');

Also you could ditch the extra divs you're using for cetnring and just use <table align="center">

However, I'd consider getting rid of the nested tables -- you ought to be able to do that layout with a single table, with a little planning.
0
 

Author Comment

by:Bob3975
ID: 9790627
I just double checked and it still shifts for me.  Try going to the home page ( http://www.promonmc.com/tradewinds/index.htm  ) and press the top link which goes to Our Services.  You should see a slight shift.  If not it must be something to do with browser settings.

About the coding, I created a mock-up in Frontpage and later ran it through tidy-HTML.  The HTML is solid but admitadly sloppy in the way Frontpage overuses div and tables.
0
 

Author Comment

by:Bob3975
ID: 9790638
oops - You should see that shift in Opera.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 4

Expert Comment

by:Iguanasan
ID: 9790691
Well, your table width = 687 however, the three tables add up to 560.  When you have discrepancies such as this the browser will react differently depending upon what they decided to do with the extra space.  I think if you take the time to make sure *all* your table width's add up correctly then this problem will go away.  I've spent way too much time digging through table mis-alignment problems already; I don't need to do more! ;-)

This is especially true of nested tables as the rendering of one can affect the rendering of another.

Regards, Iguanasan.
0
 

Author Comment

by:Bob3975
ID: 9790851
About table size: I thought the same thing and had tried it before.  Regardless I recoded the tables and all now equal 687.  I put the new tables on the web so you can see them, they still shift.
0
 
LVL 31

Accepted Solution

by:
seanpowell earned 2000 total points
ID: 9790874
They're shifting because your services page has a vertical scrollbar, which your other page doesn't. Opera substracts the width of the new scrollbar and then centers the content. IE considers the full width of the window, scrollbar or not...
0
 

Author Comment

by:Bob3975
ID: 9790924
Sweet!  It was a trick question, one that even tricked me!  (I feel kinda small right now.)
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 9791061
No problem, glad to help...
Thanks
0
 
LVL 11

Expert Comment

by:Zontar
ID: 9791169
Heh, I missed that, but then I was using a 1024X768 window...
0
 
LVL 11

Expert Comment

by:Zontar
ID: 9791181
Oops, meant to add that using fixed-width tables is not the best approach, either... Percentages are usually the way to go.
0

Featured Post

WordPress Tutorial 1: Installation & Setup

WordPress is a very popular option for running your web site and can be used to get your content online quickly for the world to see. This guide will walk you through installing the WordPress server software and the initial setup process.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question