Navigation bar not displaying correctly in IE6

Hello,
I'm having trouble getting my navigation bar to display correctly in IE6!!! I've tried using the zoom: 1 IECC for #header, #header li a etc but can't seem to get it to display in the correct place. I'm fairly new to CSS (that's probably obvious!) and have been working through a tutorial to get this far but unfortunately the design you want never quite matches the tutorial!
http://www.lewistest.webatu.com/
Any help or any other comments about my coding or design would be greatly appreciated!
Thanks,
Tracie

Oops sorry, I've used them before and forgot they did that soon after a site was set-up! My other site is hosted by them with no problem.
If you are able to see the site now the link is still http://www.lewistest.webatu.com/ ... failing that I will post source code etc tomorrow

Similar Messages

Ul horizontal navigation not displaying correctly in IE6

I am designing a web site for my psychology department and ideally it will display correctly across browsers, including older versions. I've used CS Live to test how it displays, and everything looks great EXCEPT IE6. What percentage of people out there are still using that? I'm not sure how concerned to be.
If there is a fix, I'd like to apply it, because the problem is with my top navigation, which will display on about 130 pages of the web site.
Here is what it is supposed to look like
Here is what it looks like in IE6
Here is my posted page:
http://www.psychology.vcu.edu/test/
Here is my code:
SOURCE CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>VCU Psychology Department</title>
<style type="text/css"></style>
<link href="styles/homepage.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" type="image/ico" href="images/favicon.ico"/>
</head>
<body>
<div class="container">
<div class="header">
    <div id="quick_links"><a href="http://www.has.vcu.edu/psy/cpsd" title="Center for Psychological Services and Development" target="_blank">Clinic</a> | <a href="undergraduate/advising.html" title="Academic advising">Advising</a> | <a href="http://vcu.sona-systems.com/" title="Participation in research" target="_blank">SONA</a></div>
    <img src="images/homepage/vcu_psyc_banner.jpg" alt="VCU Psychology Department" width="500" height="60" border="0" usemap="#Map" />
    <map name="Map" id="Map">
      <area shape="rect" coords="19,20,125,62" href="http://www.vcu.edu" target="_blank" alt="VCU homepage" />
      <area shape="rect" coords="129,21,488,60" href="http://www.psychology.vcu.edu" alt="Psychology homepage" />
    </map>
    <ul id="main_nav">
      <li><a href="about/index.html">About Us</a></li>
      <li><a href="undergraduate/index.html">Undergraduate Program</a></li>
      <li><a href="graduate/index.html">Graduate Programs</a></li>
      <li><a href="research/index.html">Research</a></li>
      <li><a href="people/index.html">People</a></li>
      <li><a href="centers/index.html">Centers and Institutes</a></li>
      <li id="main_nav_last"><a href="resources/index.html">Resources</a></li>
    </ul>
    </div>
CSS CODE
@charset "utf-8";
body {
background-color: #000;
background-image: url(../images/backgrounds/container_yellow_gr_220.jpg);
background-repeat: repeat-x;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000;
margin: 0px;
line-height: 1.1;
h1, h2, h3, h4, h5, h6, p {
margin: 0px;
padding: 0px;
h1 {
color: #FFA103;
font-size: 20px;
float: left;
padding-top: 10px;
padding-bottom: 7px;
a img {
border: none;
#quick_links {
position: absolute;
top: 20px;
right: 40px;
#quick_links a {
color: #000000;
text-decoration: none;
#quick_links a:hover {
text-decoration: none;
color: #FFA103;
a:link, a:visited {
color: #999999;
text-decoration: none;
a:hover, a:active, a:focus {
text-decoration: none;
color: #FFA103;
.container {
width: 960px;
background-color: #EEF0EC;
background-image: url(../images/backgrounds/container_bg.jpg);
background-repeat: repeat-x;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
.header {
position: relative;
height: 110px;
margin-top: 0px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
ul#main_nav {
list-style-type: none;
width: 920px;
background-color: #EAECE7;
background-image: url(../images/backgrounds/main_nav_grey_gr.jpg);
background-repeat: repeat-x;
padding: 0px;
height: 30px;
margin-top: 20px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
#main_nav li a {
color: #000;
text-decoration: none;
display: block;
margin: 0px;
padding-right: 19px;
padding-left: 19px;
padding-top: 6px;
height: 24px;
font-weight: bold;
#main_nav_last {
width: 110px;
#main_nav li {
float: left;
#main_nav li a:hover, #main_nav li a:active, #main_nav li a:focus {
color: #FFF;
background-color: #000;
display: block;
font-weight: bold;
Thanks for any advice that you may have!

Thanks for the reply!
I did add the float left as suggested, and it did fix the menu for IE6. Here is the current page, which I hope displays correctly in every browser, including IE6, http://www.psychology.vcu.edu/test/.
The problem is that it broke one aspect of the menu for IE7 and others.
The code in blue is what was added to fix IE6.
The code in red is what no longer works. I had added it so that the width of the final list item would extend to the end of the main_nav width.
ul#main_nav {
list-style-type: none;
width: 920px;
background-color: #EAECE7;
background-image: url(../images/backgrounds/main_nav_grey_gr.jpg);
background-repeat: repeat-x;
padding: 0px;
height: 30px;
margin-top: 20px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
#main_nav li a {
float: left;
color: #000;
text-decoration: none;
display: block;
margin: 0px;
padding-right: 19px;
padding-left: 19px;
padding-top: 6px;
height: 24px;
font-weight: bold;
#main_nav_last {
width: 110px;
#main_nav li {
float: left;
#main_nav li a:hover, #main_nav li a:active, #main_nav li a:focus {
color: #FFF;
background-color: #000;
display: block;
font-weight: bold;
If anyone has suggestions on how to optimize this code I'd be grateful. This menu will appear on 120 pages or so, and I want it to be as perfect as possible.
Thank you so much.

On windows 7 only, ie9 and firefox 4 spry bar not displaying correctly?

This website www.colonialstock.com does not display the spry menubar correctly. I need it to go all the way to the right. But when I do a view on IE8 or do the compatibility view on IE9 (which is the same as IE8) it brings the bar too far, making it fall below where it is. I need it to work on both browsers. The same is on firefox 4 and earlier versions. I am guessing this is just a windows 7 issue in all. Also on firefox when i hover on this tab issuer services> annual meeting & proxy the sub sub menu appears farther down than it should it works fine on all ie8/9 versions. Please let me know if you have any solutions.

See here http://forums.adobe.com/message/4002145#4002145
Gramps

Navigation Bar Not Displaying in Opera10

Hello again,
There seems to be an issue with the navigation container in my website, and it is not displaying at all in Opera10. It displays fine and visible in every other browser. I thought maybe Opera 10 requires some extra position settings, and the navigation bar is at the very top of the page behind the header. So I tried to put a z-index value on the container, to see whether or not it is behind the header, and in fact, I still could not see it.
My website has a header image at the very top of the browser, with a horizontal spry drop down menu right underneath it.
Does anybody have any ideas? I am not sure which details to provide with this question, however I can give any details upon request.
Thanks in advance a thousand times!
Cheers,
Mr.V

I have just read the "new to spry forums?" quick info, and I realized that I only have the version 1.4 framework. I will upgrade to 1.6.1 immediately, and the issue could be possibly resolved.
Sorry for the inconvenience. I will note the details from now on.
Mr.V

Navigation bar not rendering correctly in Windows IE

Hi everyone,
This is my first project using iWeb, and I've had some Win users email me a screenshot of the site's navigation bar rendering incorrectly. As the site is loaded, the bars appear blue in background, and according to them, sometimes it turns black, sometimes not. Please check it out and let me know if you have a solution?
www.downriveractorsguild.org
Thanks,
Dave
PS - it seems to be rendering fine in safari and firefox (mac). Also, I did search the forums and didn't find a similar issue in several pages of results.
iMac G5 20'
iMac G5 20

The navigation menu is completely composed of PNG graphics... therefore, sometimes IE has difficulty rendering these properly. Most of the time, the problem is self-limited...iWeb's .js file goes over after everything has loaded and re-renders the PNGs to make them viewable specifically in IE. But sometimes the problem is persistent...and you might see grey boxes behind the menu items probably as your viewers are describing.
I have seen both behaviors with my site.

Url bar not displaying correctly on forwarded domain

I found a problem.... on domain forwarded site - the right side of the url does not update correctly...
the REAL site is:
mysite.com - but we use a 2nd domain - mysite2.com that uses forwarding (w masking) to the 1st - mysite.com (so they are both the same real pages)
(the owner wants it this way)
NO PROBLEM when I use = mysite.com
mysite.com/dir1/dir2/index.php = ALL GOOD - urls display correctly...
but this problem appears when I use mysite2.com (forwarding)
mysite2.com/dir1/dir2/index.php - does NOT UPDATE CORRECTLY
pages go the the right place - but url stays here (last place typed) - mysite2.com/dir1/dir2/index.php
Q: any way to fix the 2nd forwarded domain with a master bit of code of something?
a href links are simple like - update.php (not absolute refs)

Hi Murray - thanks for your help,
1 - the master site is:
http://deboisproductions.com
it has all the links showing properly as you go to varied pages
2 - this is a domain forward with masking (from godaddy goes to #1 deboisproductions.com)
http://deboisentertainment.com/
it has all the links NOT showing properly as you go to varied pages - it stays on deboisentertainment.com

Navigation bar not displaying

I redesigned my website and when I published, the navigation bar didn't display on top of the new homepage. I couldn't access any other pages. It worked perfectly well in the iWeb program. What did I do wrong? (I re-instated my old page - that works fine.)

Where are you uploading the files - MobileMe or another server?
If the latter, how are you uploading them - iWeb FTP or another app?
Is there a black dot where the navigation should be?

Navigation panel not displaying correctly

Hi!
I've had this acrobat 9 pro problem for a few months but it's finally gotten to me - information displayed in the navigation panel (IE - layers, bookmarks, examine document etc) do not display properly. I can't really describe it, so here are some screen grabs. I've tried resetting the navigational pane but to no avail.
Is this an issue that has come up before? How can i resolve it?
Many thanks in advance.

Hi Zootbot,
Please try updating to the patch 9.5.5 and check.
I have seen such an issue on Mac Mavericks but again that's not a supported environment for Acrobat 9
Regards,
Rave

Horizontal Menu Bar - Not displaying correctly in Internet Explorer

My issues are occuring in Internet Explorer 8 and 7, haven't tested earlier versions.
I am currently using DW CS5, Spry 1.6.1
The website (not yet complete) is at www3.sympatico.ca/mitchell.richard/
The menu bar as viewed in Firefox is correct. In Internet Explorer the menu bar is left justified, hides visited links, and lists horizontal menu items in reverse order.
I work for a Women's Shelter in Canada, as the Information Systems Manager. We don't have the funds to hire someone to build a website and it was decided and I quote "You know computers, you can buld the website". I couldn't get them to understand the analogy that just because a Neurosurgeon can use a scalpel he isn't a Cardiothoracic Surgeon... needless to say, I am floudering on this menu bar. Any help would be greatly appreciated.
Below is the source for my menubar
CSS
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 12pt;
    cursor: default;
    width: inherit;
    font: calibri;
    font-family: Calibri;
    font-weight: bold;
    background-color: #4F91CD;
    /* [disabled]height: 27px; */
    /* [disabled]border-bottom: 1px solid #A7C9E5; */
    /* [disabled]border-top: 1px solid #A7C9E5; */
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
    z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 6
.em;
    float: right;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    z-index: 1020;
    cursor: default;
    width: 8.2em;
    position: absolute;
    left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
    width: 8.2em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
    position: absolute;
    margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
    left: auto;
    top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    background-color: #4F91CD;
    padding: 0.2em 0.75em;
    color: #FFF;
    text-decoration: none;
    border-bottom: 1px solid #A7C9E5;
    border-top: 1px solid #A7C9E5;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    background-color: #A7C9E5;
    color: #FFF;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
    background-color: #A7C9E5;
    color: #FFF;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
    /* [disabled]background-image: url(SpryMenuBarDown.gif); */
    background-repeat: no-repeat;
    background-position: 95% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
    /* [disabled]background-image: url(SpryMenuBarRight.gif); */
    background-repeat: no-repeat;
    background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
    /* [disabled]background-image: url(SpryMenuBarDownHover.gif); */
    background-repeat: no-repeat;
    background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
    /* [disabled]background-image: url(SpryMenuBarRightHover.gif); */
    background-repeat: no-repeat;
    background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal ifram=e
    position: absolute;
    z-index: 1010;
    filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
    ul.MenuBarHorizontal li.MenuBarItemIE
        display: inline;
        f\loat: left;
        background: #FFF;
HTML
<tr>
    <td colspan="10" class="navbarrepeat"><ul id="navbar" class="MenuBarHorizontal">
      <li><a href="contact_us.html">Contact Us</a>        </li>
      <li><a href="helpful_links.html" class="MenuBarItemSubmenu">Resources</a>
        <ul>
          <li><a href="helpful_links.html">Helpful Links</a></li>
          <li><a href="community_agencies.html">Community Agencies</a></li>
          <li><a href="of_interest.html">Of Interest</a></li>
</ul>
      </li>
      <li><a href="checklist.html" class="MenuBarItemSubmenu">Safety</a>
        <ul>
          <li><a href="safety_checklist.html">Safety Checklist</a></li>
          <li><a href="things_to_bring.html">Things to Bring</a></li>
          <li><a href="child_safety_plan.html">Child Safety Plan</a></li>
</ul>
      </li>
      <li><a href="signs.html" class="MenuBarItemSubmenu">Abuse</a>
        <ul>
          <li><a href="what_is_abuse.html">What is Abuse?</a></li>
          <li><a href="signs.html">Signs of Abuse</a></li>
          <li><a href="characteristics.html">Characteristics</a></li>
          <li><a href="why_women_stay.html">Why Women Stay</a></li>
          <li><a href="donate.html">Survivors Speak</a></li>
        </ul>
      </li>
      <li><a href="donate.html" class="MenuBarItemSubmenu">Support Us</a>
        <ul>
          <li><a href="donate.html">Donate</a></li>
          <li><a href="events.html">Events</a></li>
          <li><a href="volunteering.html">Volunteering</a></li>
          <li><a href="statistics.html">Statistics</a></li>
</ul>
      </li>
      <li><a href="join_us.html">Join Us</a>        </li>
      <li><a href="our_story.html" class="MenuBarItemSubmenu">About Us</a>
        <ul>
          <li><a href="residential.html">Our Services</a></li>
          <li><a href="our_mission.html">Our Mission</a></li>
          <li><a href="our_story.html">Our Story</a></li>
          <li><a href="board_of_directors.html">Board of Directors</a></li>
        </ul>
      </li>
    </ul></td>
    <td><img src="images/spacer.gif" width="1" height="26" alt=""></td>
</tr>

/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
     margin: 0;
     padding: 0;
     list-style-type: none;
     font-size: 100%;
     position: relative;
     text-align: left;
     cursor: pointer;
     width: 6
.em;
     float: right;
The red coloured line causes your menu to be displayed the wrong way round in FF. IE shows the menu as you have listed it with Contact Us as the first item.
Advice:
change the float to left so that the listed items start on the left hand side
change the listed items in the order that you want them to appear.

Menu Bar Not Displaying Correctly

Hi,
I am building a website locally and have developed the menu bar in Fireworks. When I preview the page in IE I get a strange strip running across the top of the bar, but it displays fine in Firefox. I have posted this in the Fireworks discussion without much luck, can anyone help?

Thanks for the response, but as mentioned I am still building the page locally, there is no URL yet so I can't post a link.
When I import the Fireworks HTML, the top line of code is:
<table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" width="1001">
I wonder if the display field needs to be different?

Navigation bar not displaying current site

sometimes it shows the current site address, sometimes it just says enter an address as if you just opened a new tab.

Start Firefox in <u>[[Safe Mode|Safe Mode]]</u> to check if one of the extensions (Firefox/Tools > Add-ons > Extensions) or if hardware acceleration is causing the problem (switch to the DEFAULT theme: Firefox/Tools > Add-ons > Appearance).
*Do NOT click the Reset button on the Safe Mode start window.
*https://support.mozilla.org/kb/Safe+Mode
*https://support.mozilla.org/kb/Troubleshooting+extensions+and+themes

Link URL containing feed: is not displayed correctly in the status bar

When a link contains feed: in the URL, it is not displayed correctly in the status bar.
The actual URL is
a href="feed:http://www.....com/feed/"
but the URL shown in the status bar is
feed://http//www.....com/feed/
IE8 shows the correct URL in the status bar. Not sure if this is a problem, but thought I would report it.

Such a feed works for me even if it is displayed differently then you expect on the status bar.
<pre><nowiki>data:text/html,<a href="feed:https://support.mozilla.com/en-US/questions/758020/feed">feed</a></nowiki></pre>

Oops - spry menu bar 2.0 does not display correctly when loaded

Oops - obviously I'm new at this. I think I got my graphics loaded now.
Dear Sirs:
I notice bzz31 had a pretty complicated post, so perhaps someone can help me with my complicated problem that has been vexing me for months. I tried the Spry Menu Bar 1.0, but it was impossible for me to edit, and I was delighted to see Spry Menu Bar 2.0 come out. However the 2.0 version has been frustrating me as well.
I can get my menu bar to display properly in Live View, as shown below.
However when I load everything onto the server, the menu bar does not display correctly, as shown below:
I don't quite understand the code "file:///" but I interpret it to mean that the Spry-UI-1.7 folder is in the topmost folder of MacPro5-Docs, which is my hard drive. Here's the code I'm having trouble with:
Here's my computer directory, shown below:
Since my index file is two folders down from Spry-UI-1.7, I loaded the files onto the server similarly, as shown in the next three pictures:
(The picture below is the same as the one just above, but now you can see the path from index to Spry-UI-1.7.)
I would be most appreciative if someone can help me.
Thank you.

Have a look at the following links
<script src="file:///MacProG5-Docs/Spry-UI-1.7/includes/SpryDOMUtils.js" type="text/javascript"></script>
<script src="file:///MacProG5-Docs/Spry-UI-1.7/includes/SpryDOMEffects.js" type="text/javascript"></script>
<script src="file:///MacProG5-Docs/Spry-UI-1.7/includes/SpryWidget.js" type="text/javascript"></script>
<script src="file:///MacProG5-Docs/Spry-UI-1.7/includes/SpryMenu.js" type="text/javascript"></script>
<script src="file:///MacProG5-Docs/Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarKeyNavigationPlugin.js" type="text/javascript"></script>
<script src="file:///MacProG5-Docs/Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarIEWorkaroundsPlugin.js" type="text/javascript"></script>
<link href="file:///MacProG5-Docs/Spry-UI-1.7/css/Menu/basic/SpryMenuBasic.css" rel="stylesheet" type="text/css" />
Each of the above points to a file on your local system and cannot be found by the remote server.
Replace the red coloured parts with http://www.twhsbands.org/ will remedy the situation.
You also have some remnants of the other SpryMenuBar that should be removed from your markup.
Gramps
Wel, so much for the red coloured parts, they did not show up.
The red coloured parts read file:///MacProG5-Docs/

Search box not displaying correctly in Safari

How can the search bar on the Apple site not display correctly in Safari? I find this odd that Apple would allow this. It displays like 2 search boxes overlapping each other. It still functions correctly but it is a little embarrassing since I am always bashing windows pro browser display.

Hi
Welcome to Apple Discussions
Might be a corrupted cache or cookies issue. First, go to Safari Preferences>Security>Show Cookies. Type Apple in the Spotlight panel. Highlight/remove the cookies. Then, go to the Safari Menu>Empty Cache. Try the Apple site.
If the double search panel still appears, go to the Finder: Your User Account>Library>Caches. There, move to the trash the com.apple.safari file. Restart Safari and try the Apple site again.
Post back

Dreamweaver tables not displaying correctly in internet explorer browser, please help!!!!

Could someone please help me with this issue i've been having for almost a year now and can't find any information on getting this fixed, for some reason the features specs and required tables rows are not displaying correctly, the image is out of aligned when viewing the results using the internet explorer browser only, the firefox browser works just as needed but when i try to view the same code in IE the tables are not aligned properly and the text is not margined correctly either, i tried playing around with the css style that i have and no results. Please help me fix this issue so that my page would display in internet explorer just like under Firefox. Below are the pictures of the problem i'm having.
This picture shows how i want it displayed on the internet explorer and firefox browser:
Here is results in firefox browser:
Here is results in internet explorer browser:
As you can see the tables are all messed up, text is not centered properly even if i coded it right.
Here is the coding for this page:
PLEASE HELP ME OUT WITH THIS PROBLEM, I NEED TO FIGURE OUT HOW TO MAKE INTERNET EXPLORER TO DISPLAY THE INFORMATION CORRECTLY JUST LIKE FIREFOX?
<style type="text/css">

</style>
<body>
<table width="935" border="0">
<tr>
<td><img src="http://www.ehobbyplanet.com/eBay/Layout/eHobbyShortHeader.jpg" width="928" height="165" /></td>
</tr>
<tr>
<td height="44" align="center" valign="middle" class="title">HPI 1/5 Baja 5T Gas Truck RTR<td></td>
</tr>
<tr>
<td height="31" align="center" valign="middle" class="number">HPI Item #10620<td width="10"></td>
</tr>
</table>
<table width="925" height="326" border="0">
<tr>
<td width="16"> </td>
<td width="549"><img src="http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-1md.jpg" width="549" height="429" id="mainPic"/></td>
<td width="35"> </td>
<td width="1559"><p><img src="http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-1sm.jpg" width="116" height="85" onClick="changePic('Image-1')"/> <img src="http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-2sm.jpg" width="116" height="85" onClick="changePic('Image-2')"/></p>
<p><img src="http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-3sm.jpg" width="116" height="85" onClick="changePic('Image-3')"/> <img src="http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-4sm.jpg" width="116" height="85" onClick="changePic('Image-4')"/></p>
<p><img src="http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-5sm.jpg" width="116" height="85" onClick="changePic('Image-5')"/> <img src="http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-6sm.jpg" width="116" height="85" onClick="changePic('Image-6')"/></p>
<p><img src="http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-7sm.jpg" width="116" height="85" onClick="changePic('Image-7')"/> <img src="http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-8sm.jpg" width="116" height="85" onClick="changePic('Image-8')"/></p>
<p class="text">Click to enlarge picture</p></td>
</tr>
</table>
<table width="928" height="124" border="0">
<tr>
<td height="320" class="description"><p>HPI Racing is proud to present the Baja 5T, a <strong>ready-to-run</strong> (RTR) 1/5th scale off-road truck that expands on the award-winning Baja 5B family. With the Baja 5T you get aggressive desert truck looks, high performance new features, and compatibility with many of the existing Baja 5B spare parts and option parts, wrapped up in a RTR package that gets you running in just a few minutes.</p>
<p>Includes: HPI Baja 5T RTR Truck with 1.6 cu in gasoline engine, 27MHz FM Radio, two water resistant servos, 3.4oz (100cc) 2-cycle oil, 2oz (60cc) shock oil, 1oz (30cc) diff oil, 1oz (30cc) air filter oil, tube of gear grease, 3000mAh receiver pack, wall charger, body with wing, extra air filter, wrenches, decal sheet and illustrated instruction manual.</p></td>
</tr>
</table>
<table width="928" border="0">
<tr>
<td width="290"> </td>
<td width="17"> </td>
<td width="292"> </td>
<td width="17"> </td>
<td width="290"> </td>
</tr>
<tr>
<td align="center" class="features">Features:</td>
<td align="center"> </td>
<td align="center"><span class="features">Specifications:</span></td>
<td align="center"> </td>
<td align="center"><span class="features">Required:</span></td>
</tr>
<tr>
<td height="526" class="featurebackground"><ul>
<li>Ventilated Disc Brake System</li>
<li>Heavy Duty Rear Dogbones</li>
<li>Moulded Nylon Rear Spoiler</li>
<li>Aluminum Alloy Diff Case</li>
<li>Dirt Guards</li>
<li>Full Metal Ball Bearings</li>
<li>Front & Rear Sway Bars</li>
<li>Modified Rear Shock Tower</li>
<li>Heavy Duty Inner Foam</li>
<li>Revised Gearing</li>
<li>High Flow Muffler</li>
<li>SFL-10MG2 Metal Gear Steering Servo</li>
<li>Heavy Duty Beadlocks</li>
<li>8000 RPM Clutch</li>
<li>Anodized Aluminum Parts</li>
<li>Double Wishbone Suspension</li>
<li>Adjustable Suspension</li>
<li>Baja 5T-1 Truck Body</li>
<li>Extended Roll Cage</li>
<li>Outlaw Truck Wheels / Desert Buster Tires</li>
<li>Fuelie 26 Engine (26cc)</li>
<li>All Metal Transmission Gears</li>
<li>High Quality Radio Gear</li>
</ul>
<td> </td>
<td class="featurebackground"><ul>
<li>Drive System: 2WD viscous Diff</li>
<li>Tires (front & rear): Truck Wheels / Desert Buster</li>
</ul>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p></td>
<td> </td>
<td class="featurebackground">
<ul>
<li class="featurebackground">Unleaded Gasoline: 87-93 octane, mix gasoline with two cycle oil at 25:1 ratio</li>
<li class="featurebackground">Transmitter Batteries: 8x AA</li>
<li class="featurebackground">Screwdriver: Flat blade, 3/16" (4-5mm) wide</li>
</ul>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p></td>
</tr>
</table>
<table width="928" height="621" border="0">
<tr>
<td> </td>
</tr>
<tr>
<td height="135" background="http://www.ehobbyplanet.com/eBay/Layout/ePaymentMethod.jpg" class="policy"><p>We accept Visa, Mastercard and Discover Card and PayPal. If your unable to send payment using these methods please contact us at [email protected]. All payments need to be sent within 5 days.
</p>
<p> </p></td>
</tr>
<tr>
<td height="21"> </td>
</tr>
<tr>
<td height="220" background="http://www.ehobbyplanet.com/eBay/Layout/eNormalShipping.jpg" class="policy"><p>All our orders are shipped out within 72 business hours unless stated. We ship everything out using the best packaging material to insure safe deliveries using shipping companies such as USPS Postal Office and UPS services (Shipping times will vary depending on the service you choose). Tracking information will be automatically sent via email after an order has been shipped out. We Definitely Combine Shipping for multiple items, if for some reason our eBay checkout isn’t combining your items please wait for a custom eBay invoice which will have your order combined into one, reducing the shipping price. For international customers, please note: "that Import duties, taxes, and charges are not included in the item price or shipping charges. These charges are the buyer's responsibility. Check with your country's customs office to find out what these additional costs will be before you bid or buy".</p>
<p>Please Note for International Customers Only: Due to the large size of this item there are several countries that have a size limitation which we are not able to ship to, if by any means your order goes through to us and it falls in the country size restrictions and your order cannot be shipped out we have the right to cancel your order (before cancelling the order we will contact the customer via email).</p></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td height="104" background="http://www.ehobbyplanet.com/eBay/Layout/eInsurance.jpg" class="policy">We offer insurance which is optional during checkout for both Domestic and International customers which will cover the full amount paid by customer, if insurance isn't purchased we are not responsible for packages that are missing during transit. If you use the USPS First Class Mail International shipping service please allow 10 - 25 business days for the delivery of your package.</td>
</tr>
<tr>
<td height="21"> </td>
</tr>
<tr>
<td height="135" background="http://www.ehobbyplanet.com/eBay/Layout/eReturns.jpg" class="policy">We want you to be completely happy with your purchases. So we do everything we can to assure you get the exact merchandise you order, delivered on time. If by any means your unsatisfied with your purchase we will be happy to accept returns for an exchange or a refund within 14 days. If shipping the item back, customer is responsible for freight charges to us. We offer refunds & exchanges if your not satisfied with your purchase. The returned product needs to be in the same condition it was shipped out in, unused and in it’s original packaging. If by any chance there has been an issue with your order and you want to request a return please email us at [email protected].</td>
</tr>
</table>
</body>
<script type="text/javascript">
if(document.images) {
tempImage = new Image();
tempImage.src = "http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-1md.jpg";
tempImage.src = "http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-2md.jpg";
tempImage.src = "http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-3md.jpg";
tempImage.src = "http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-4md.jpg";
tempImage.src = "http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-5md.jpg";
tempImage.src = "http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-6md.jpg";
tempImage.src = "http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-7md.jpg";
tempImage.src = "http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-8md.jpg";
function changePic(newName) {
newPicURL = "http://www.ehobbyplanet.com/Items/RC/HPI/10620/"+newName+"md.jpg";
mainPic.src = newPicURL;
</script>
Here is my contact information:
Paul
[email protected]

Try this without the border images and it will work in all browsers with increased text size. That's assuming eBay supports embedded CSS styles (which I'm not convinced they do). Inline styles are safer IMHO.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.title {
background-image: url(http://www.ehobbyplanet.com/eBay/Layout/Title.jpg);
background-position: center center;
font-size: 24px;
font-weight: bold;
color: #FFF;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
vertical-align: middle;
h2 {font-size:1.7em; color:#000; margin-top:0em; margin-bottom: 2px;}
ul,li {
font-size:14px;
list-style:disc;
line-height:1.5;
font-family: "Times New Roman", Times, serif;
.description {
font-family: "Times New Roman";
font-size: 16px;
line-height: 1.2;
font-weight: bold;
color: #000;
text-align: left;
vertical-align: middle;
border: 4px solid red;
padding: 0 20px 20px 20px;
.text {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 14px;
font-weight: bold;
color: #F00;
text-indent: 2em;
.features {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-style: italic;
font-weight: bolder;
text-decoration: underline;
color: #666666;
line-height: 3em;
.featurebackground {
padding-right: 10px;
border: 4px solid red;
width: 200px;
vertical-align: top;
padding-top: 1em;
.policy {
border: 4px solid red;
margin-top: -2em;
.fsr_style { font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
background-color: #FFFFFF;
padding-top: 5em;
padding-right: 20px;
border: 4px solid red;
.number {
.policy {
font-family: "Times New Roman", Times, serif;
font-weight: normal;
font-size: 14px;
padding: 0 20px 20px 20px;
</style>
</head>
<body>
<table width="935" border="0">
<tr>
<td><img src="http://www.ehobbyplanet.com/eBay/Layout/eHobbyShortHeader.jpg" width="928" height="165" /></td>
</tr>
<tr>
<td height="44" align="center" valign="middle" class="title">HPI 1/5 Baja 5T Gas Truck RTR</td><td></td>
</tr>
<tr>
<td align="center" valign="middle" class="number">HPI Item #10620</td><td width="10"></td>
</tr>
</table>
<table width="925" border="0">
<tr>
<td width="16"> </td>
<td width="549"><img src="http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-1md.jpg" width="549" height="429" id="mainPic"/></td>
<td width="35"> </td>
<td width="1559"><p><img src="http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-1sm.jpg" width="116" height="85" onclick="changePic('Image-1')"/> <img src="http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-2sm.jpg" width="116" height="85" onclick="changePic('Image-2')"/></p>
<p><img src="http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-3sm.jpg" width="116" height="85" onclick="changePic('Image-3')"/> <img src="http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-4sm.jpg" width="116" height="85" onclick="changePic('Image-4')"/></p>
<p><img src="http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-5sm.jpg" width="116" height="85" onclick="changePic('Image-5')"/> <img src="http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-6sm.jpg" width="116" height="85" onclick="changePic('Image-6')"/></p>
<p><img src="http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-7sm.jpg" width="116" height="85" onclick="changePic('Image-7')"/> <img src="http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-8sm.jpg" width="116" height="85" onclick="changePic('Image-8')"/></p>
<p class="text">Click to enlarge picture</p></td>
</tr>
</table>
<table width="928" border="0">
<tr>
<td class="description"><h2>Description</h2>
<p>HPI Racing is proud to present the Baja 5T, a <strong>ready-to-run</strong> (RTR) 1/5th scale off-road truck that expands on the award-winning Baja 5B family. With the Baja 5T you get aggressive desert truck looks, high performance new features, and compatibility with many of the existing Baja 5B spare parts and option parts, wrapped up in a RTR package that gets you running in just a few minutes.</p>
<p>Includes: HPI Baja 5T RTR Truck with 1.6 cu in gasoline engine, 27MHz FM Radio, two water resistant servos, 3.4oz (100cc) 2-cycle oil, 2oz (60cc) shock oil, 1oz (30cc) diff oil, 1oz (30cc) air filter oil, tube of gear grease, 3000mAh receiver pack, wall charger, body with wing, extra air filter, wrenches, decal sheet and illustrated instruction manual.</p></td>
</tr>
</table>
<table width="928" border="0">
<tr>
<td width="290"> </td>
<td width="17"> </td>
<td width="292"> </td>
<td width="17"> </td>
<td width="290"> </td>
</tr>
<tr>
<td align="center"><span class="features">Features:</span></td>
<td align="center"> </td>
<td align="center"><span class="features">Specifications:</span></td>
<td align="center"> </td>
<td align="center"><span class="features">Required:</span></td>
</tr>
<tr>
<td class="featurebackground"><ul>
<li>Ventilated Disc Brake System</li>
<li>Heavy Duty Rear Dogbones</li>
<li>Moulded Nylon Rear Spoiler</li>
<li>Aluminum Alloy Diff Case</li>
<li>Dirt Guards</li>
<li>Full Metal Ball Bearings</li>
<li>Front & Rear Sway Bars</li>
<li>Modified Rear Shock Tower</li>
<li>Heavy Duty Inner Foam</li>
<li>Revised Gearing</li>
<li>High Flow Muffler</li>
<li>SFL-10MG2 Metal Gear Steering Servo</li>
<li>Heavy Duty Beadlocks</li>
<li>8000 RPM Clutch</li>
<li>Anodized Aluminum Parts</li>
<li>Double Wishbone Suspension</li>
<li>Adjustable Suspension</li>
<li>Baja 5T-1 Truck Body</li>
<li>Extended Roll Cage</li>
<li>Outlaw Truck Wheels / Desert Buster Tires</li>
<li>Fuelie 26 Engine (26cc)</li>
<li>All Metal Transmission Gears</li>
<li>High Quality Radio Gear</li>
</ul>
</td>
<td> </td>
<td class="featurebackground"><ul>
<li>Drive System: 2WD viscous Diff</li>
<li>Tires (front & rear): Truck Wheels / Desert Buster</li>
</ul>
</td>
<td> </td>
<td class="featurebackground">
<ul>
<li>Unleaded Gasoline: 87-93 octane, mix gasoline with two cycle oil at 25:1 ratio</li>
<li>Transmitter Batteries: 8x AA</li>
<li>Screwdriver: Flat blade, 3/16" (4-5mm) wide</li>
</ul>
</td>
</tr>
</table>
<table width="928" border="0">
<tr>
<td> </td>
</tr>
<tr>
<td class="policy"><h2>Payment Method </h2>
<p>We accept Visa, Mastercard and Discover Card and PayPal. If your unable to send payment using these methods please contact us at [email protected]. All payments need to be sent within 5 days.
</p></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td class="policy"><h2>Shipping & Handling </h2>
<p>All our orders are shipped out within 72 business hours unless stated. We ship everything out using the best packaging material to insure safe deliveries using shipping companies such as USPS Postal Office and UPS services (Shipping times will vary depending on the service you choose). Tracking information will be automatically sent via email after an order has been shipped out. We Definitely Combine Shipping for multiple items, if for some reason our eBay checkout isn’t combining your items please wait for a custom eBay invoice which will have your order combined into one, reducing the shipping price. For international customers, please note: "that Import duties, taxes, and charges are not included in the item price or shipping charges. These charges are the buyer's responsibility. Check with your country's customs office to find out what these additional costs will be before you bid or buy".</p>
<p>Please Note for International Customers Only: Due to the large size of this item there are several countries that have a size limitation which we are not able to ship to, if by any means your order goes through to us and it falls in the country size restrictions and your order cannot be shipped out we have the right to cancel your order (before cancelling the order we will contact the customer via email).</p></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td class="policy"><h2>Insurance</h2>
<p>We offer insurance which is optional during checkout for both Domestic and International customers which will cover the full amount paid by customer, if insurance isn't purchased we are not responsible for packages that are missing during transit. If you use the USPS First Class Mail International shipping service please allow 10 - 25 business days for the delivery of your package.</p></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td class="policy"><h2>Returns</h2>
<p>We want you to be completely happy with your purchases. So we do everything we can to assure you get the exact merchandise you order, delivered on time. If by any means your unsatisfied with your purchase we will be happy to accept returns for an exchange or a refund within 14 days. If shipping the item back, customer is responsible for freight charges to us. We offer refunds & exchanges if your not satisfied with your purchase. The returned product needs to be in the same condition it was shipped out in, unused and in it’s original packaging. If by any chance there has been an issue with your order and you want to request a return please email us at [email protected].</p></td>
</tr>
</table>
</body>
</html>
<script type="text/javascript">
if(document.images) {
tempImage = new Image();
tempImage.src = "http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-1md.jpg";
tempImage.src = "http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-2md.jpg";
tempImage.src = "http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-3md.jpg";
tempImage.src = "http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-4md.jpg";
tempImage.src = "http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-5md.jpg";
tempImage.src = "http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-6md.jpg";
tempImage.src = "http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-7md.jpg";
tempImage.src = "http://www.ehobbyplanet.com/Items/RC/HPI/10620/Image-8md.jpg";
function changePic(newName) {
newPicURL = "http://www.ehobbyplanet.com/Items/RC/HPI/10620/"+newName+"md.jpg";
mainPic.src = newPicURL;
</script>
That's the best solution I can offer.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb

Navigation bar not displaying correctly in IE6

Similar Messages

Maybe you are looking for