Log in

View Full Version : Resolved Display inconsistency between IE and Firefox


gracexl
04-24-2009, 10:05 PM
We use Expression web, XHTML 1.0 Transitional to design our website. The display in IE is what we wanted. However, there are lines missing around the pictures in Firefox. Most importantly, we created a yellow section (Camping Tents Buy one now) at the sidebar on the left to highlight one of our navigation option. It shows correctly in IE, but loses its format(yellow section is missing, the text moved up, and jammed with the upper section) in Firefox. Any help would be greatly appreciated. Here is the website so that you can see the effect.

http://www.pinnacletents.com/

We are using W3C Validator to check cross-browser compatibility, and got a lot of errors. But don’t know how to fix it.
For example, it said:
document type does not allow element "hr" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag for the following code:
<hr align="center" class="style35" style="height: 1px">

We are new to this. Can somebody shed some lights on how to fix it?

Many thanks,

Grace
X96 Web Design
04-25-2009, 11:26 PM
It's because you're using a Microsoft Program (right?). Microsoft only cares about Internet Explorer, so it codes to IE standards, not W3 standards. Therefore, your site only works in IE... Don't you just hate Microsoft?

There's only one way to fix it - code it yourself. Or, you can use a program that actually codes to W3C Standards, not IE standards (Try NVU (http://www.nvu.com/)).

Not much you can do about Microsoft... Sorry....

EDIT: <HR> isn't a real tag unless you're using HTML 4.01 Transitional DOCTYPE tag.
// X96 //
gracexl
04-26-2009, 03:52 AM
Thanks, I live in Vancouver as well, a small world, isn't it? Yes, I do hate any MS software! I complaint all the way during the code writing. I will check out NVU. Now are there any way to convert my code to W3C standards relatively easy? I would hate to rewrite the whole thing!

Also, what is the substitute for HR in XHTML 1.0?
forum_amnesiac
04-26-2009, 07:52 AM
I thought <hr> was supported in XHTML transitional but not in XHTML strict so I tried using it and found that it does work in XHTML strict.

I have only tested it in IE7
jscheuer1
04-26-2009, 08:51 AM
That error on the hr tag is generally from placing the hr somewhere it cannot go, like in a span. The tag itself is valid for XHTML Transitional or Strict.
X96 Web Design
04-26-2009, 08:55 AM
My bad... I just avoid <HR> altogether, no matter what Doctype I'm using! :p

Instead of HR, I use a DIV and CSS:

.hrule {
border-top:1px solid #ccc;
display:block;
height:1px;
margin:5px 0;
padding:0;
}
and:

<div class="hrule">&#160;</div>

// X96 \\
gracexl
04-27-2009, 02:50 AM
Thanks for all the input. How can I keep all the hr and p tag from going place it shouldn't go? I use Expression Web do all the coding. You would think the software would help prevent that from happening, but obviously it doesn't. Now I have to fix it manually. Are there anly tools or resources to help me fix them without poking my eyes out trying to figure out whether hr and p tag is nested in one of the so-called inline element;-)? That would be a huge life saver!
bluewalrus
04-27-2009, 03:59 AM
Valid Mark up:


<!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 content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Tent Manufacturers - Portable Shelter, Equipment Tents, Camping Tent Manufacturing, Custom Tent Manufacturer</title>
<meta name="Description"
content="Over 30 years of camping tent manufacturing and portable shelter design experience. Click now and let us manufacture the tent you need." />
<meta name="keywords"
content="Tent Manufacturers,Tent Manufacturing,Portable Shelter,Equipment Tents,Camping Tent Manufacturing,Custom Tent Manufacturer" />
<style type="text/css">
.style5 {
border: 1px solid #FFFFFF;
text-align: center;
white-space: normal;
background-color: #74804D;
}
.style10 {
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
border-top: 1px solid #FFFFFF;
border-bottom: 1px none #74804D;
position: static;
max-width: none;
min-width: inherit;
border-collapse: collapse;
}
.style14 {
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
right: auto;
}
.style16 {
color: #FFFFFF;
font-size: small;
}
#sidebar {
float: left;
width: 154px;
background-color: #cdf;
position: relative;
clear: both;
display: inline;
}
#sidebar {
margin: 0;
padding: 0;
border: 0;
}
#sidebar ul {
list-style-type: none;
width: 100%;
display: block;
margin: 0;
padding: 0;
}
#sidebar li {
display: block;
border: 1px solid #cdf;
}
#sidebar a {
font-weight: bold;
text-decoration: none;
color: #04b;
display: block;
padding: 5px;
border-bottom: 1px solid #f9f9f9;
background-color: #EEEECC;
outline-color: #74804D;
}
a {
color: #04b;
text-decoration: underline;
}
.style19 {
font-family: Arial;
margin-left: 0in;
margin-right: 0in;
margin-top: 0in;
margin-bottom: .0001pt;
text-align: left;
color: #FFFFFF;
}
.style23 {
font-size: large;
}
.style24 {
font-family: "CG Omega";
}
.style32 {
font-size: 11.0pt;
font-family: Calibri, sans-serif;
margin-left: 0in;
margin-right: 0in;
margin-top: 0in;
margin-bottom: .0001pt;
text-align: center;
}
.style33 {
font-size: medium;
}
.style34 {
color: #FFFFFF;
}
.style35 {
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
font-weight: normal;
font-size: small;
color: #FFFFFF;
word-spacing: normal;
text-indent: inherit;
border-collapse: separate;
margin-left: 2px;
}
.style53 {
border: medium;
color: #FFFFFF;
font-family: Arial;
right: auto;
text-align: left;
}
.style54 {
border: 1px solid #FFFFFF;
background-color: #74804D;
text-align: center;
}
#sidebar0 {
float: left;
width: 154px;
background-color: #cdf;
position: relative;
clear: both;
display: inline;
}
#sidebar0 {
margin: 0;
padding: 0;
border: 0;
}
.style57 {
text-align: center;
}
.style58 {
background-color: #EEEECC;
}
.style60 {
border: 0 solid #FFFFFF;
text-align: center;
white-space: normal;
background-color: #74804D;
}
.style62 {
font-size: small;
font-family: Arial;
color: #FFFFFF;
margin-left: 0in;
margin-right: 0in;
margin-top: 0in;
margin-bottom: .0001pt;
right: inherit;
text-align: left;
}
.style63 {
text-align: left;
font-family: Arial;
}
.style64 {
font-family: Arial;
color: #FFFFFF;
margin-left: 0in;
margin-right: 0in;
margin-top: 0in;
margin-bottom: .0001pt;
right: inherit;
text-align: left;
}
.style65 {
text-decoration: none;
}
.style66 {
margin-top: 9px;
}
.style67 {
color: #FFFF00;
}
.style68 {
border: 1px solid #FFFFFF;
vertical-align: middle;
}
.style69 {
}
.style70 {
border-style: solid;
border-width: 1px;
border: #FFFFFF;
}
.style71 {
border: 1px solid #FFFFFF;
}
body {
margin-top: auto; font: small Arial, Helvetica, sans-serif; background-color: #78643A; table-layout: fixed; margin-bottom: auto; margin-left: auto; margin-right: auto; bottom: auto; height: auto; left: auto; max-height: none; max-width: none; margin-top: 10px;}
</style>
</head>

<body>

<table cellpadding="4" class="style10" align="center" style="width: 0px; table-layout: fixed; top: 10;">

<!-- MSTableType="layout" -->
<tr>
<td class="style5" style="background: #74804D; width: 162px; height: 160px; ">
<img alt="Pinnacle Tents - Tent Manufacturers Teepee" height="207" longdesc="Pinnacle Tents - Tent Manufacturers Teepee" src="http://www.pinnacletents.com/images/TentManufacturers/TentManufacturing/TentManufacturersTeepee.jpg" width="158" class="style69" /></td>
<td class="style5" style="width: 525px; height: 160px" valign="top">
<img alt="Pinnacle Tents - Tent Manufacturers Logo" height="139" longdesc="Pinnacle Tents - Tent Manufacturers Logo" src="http://www.pinnacletents.com/images/TentManufacturers/TentManufacturing/TentManufacturersPinnacleTentLogo.jpg" width="525" /><hr class="style35" style="height: 1px" /><span class="style16"><span class="style23"><span class="style24">
<strong><em>Custom Tent Manufacturers of Camping Tents, Portable Shelter and
Equipment Tent<span lang="en-ca">s</span></em><span lang="en-ca">
- PINNACLE TENTS</span></strong></span></span></span></td>

<td style="border: #FFFFFF; height: 160px; width: 205px;" class="style54">
<img alt="Pinnacle Tents - Tent Manufacturers Revel Blue" height="176" longdesc="Pinnacle Tents - Tent Manufacturers Revel Blue" src="http://www.pinnacletents.com/images/TentManufacturers/TentManufacturing/TentManufacturersRevelBlue.jpg" width="200" class="style70" />&nbsp;</td>
</tr>
<tr>
<td class="style5" style="background: #74804D; width: 162px; height: 160px; ">
<a href="http://www.camptents.com/SpecPages/SheltersAndCot/OutdoorShelter/PrivacyShelter136.htm" target="_blank">
<img alt="Pinnacle Tents - Tent Manufacturing Privacy Shelter" height="167" longdesc="Pinnacle Tents - Tent Manufacturing Privacy Shelter" src="http://www.pinnacletents.com/images/TentManufacturers/TentManufacturing/TentManufacturingPRIVACYSHELTER.jpg" width="150" class="style68" /></a></td>
<td class="style60" style="border: #FFFFFF; width: 525px; height: 160px">
bluewalrus
04-27-2009, 03:59 AM
<img alt="Pinnacle Tents - Tent Manufacturing Military" height="171" longdesc="Pinnacle Tents - Tent Manufacturing Military" src="http://www.pinnacletents.com/images/TentManufacturers/TentManufacturing/TentManufacturingMilitary.jpg" width="430" class="style70" /></td>

<td style="border: #FFFFFF; height: 160px; width: 205px;" class="style54">
<img alt="Pinnacle Tents - Tent Manufacturing Budweiser Beach" height="151" longdesc="Pinnacle Tents - Tent Manufacturing Budweiser Beach" src="http://www.pinnacletents.com/images/TentManufacturers/TentManufacturing/TentManufacturingBudweiserBeach.jpg" width="200" class="style70" /></td>
</tr>
<tr>
<td></td>
<td class="style5" style="width: 525px; height: 419px; color: #FFFFFF;" rowspan="2" valign="top">
<p class="style32"><span style="font-size: 10.0pt;">
<span class="style14" style="mso-spacerun: yes;"><strong><span class="style33"><span class="style24"><em>Tent Manufacturers - We Manufacture Your
Camping Tent, Portable Shelter or Equipment Tents Concept to
Reality</em></span></span></strong></span></span></p>

<hr class="style34" style="height: 1px" />
<p class="style19" style="right: auto">As one of the
leading tent manufacturers of camping tents, portable
shelters, equipment tents, outfitter's tents, portable
emergency shelters, and custom tents, Pinnacle Tents
will utilize our 30 years of camping tent manufacturing
experience and vast tent manufacturing capabilities to
manufacture your custom tents in volume with exceptional
quality, on time delivery, coupled with attractive
pricing.&nbsp; We accomplish this through a streamlined
high volume tent manufacturing process where we make
large quantities of many different designs unlike other
standard product tent makers.&nbsp; </p>
<p class="style63"><span class="style34">Our loyal
custom tent customers include The Boy Scouts of America,
Girl Scouts, British American Tobacco, US Smokeless
Tobacco, The Red Cross, US Air Force, US Army, US Navy,
Federal Law Enforcement Training Center, Kia Racing,
Jack Daniel's, Snap-On Tools, Department of Forestry, US
Game and Fish Department, Church organizations,
Outfitters, Expedition Companies, a host of other
Fortune 500 companies, and government organizations.</span></p>
<p class="style62">Pinnacle Tents manufactures and
supplies<span style="mso-spacerun: yes">&nbsp; </span>a
wide array of custom and standard camping tents and
portable shelters. We offer private labeling with your
logo or trademark name on all of our custom camping
tents.</p>

<p class="style53">If you are looking for volume tent
manufacturing of:</p>
<ul>
<li>
<p class="style64">Equipment tents</p>
</li>
<li>
<p class="style64">Custom camping tent manufacturing
or portable emergency shelters</p>

</li>
<li>
<p class="style64">Camping tents for an event or as
a corporate gift</p>
</li>
<li>
<p class="style64">Portable shelters for a custom
application</p>
</li>
<li>

<p class="style64">Portable shelters displaying your
logo for your marketing needs
</p>
</li>
<li>
<p class="style64">An improved tent design for your
Outfitter or Expedition Company</p>
</li>
<li>
<p class="style64">One of our standard camping tents
or portable shelter designs</p>

</li>
</ul>
<p class="style64">Send us your requirements now for
tent manufacturing and see how fast and easily your
perfect camping tents or portable shelters are delivered
right to your door.</p>
</td>
<td style="height: 419px; width: 205px;" rowspan="2" class="style54" valign="top">
<br />
<img alt="Pinnacle Tents - Tent Manufacturers GirlScouts" class="style71" height="174" longdesc="Pinnacle Tents - Tent Manufacturers GirlScouts" src="http://www.pinnacletents.com/images/TentManufacturers/TentManufacturing/TentManufacturersGirlScoutsWeb.jpg" width="200" /><br />
<br />

<a href="http://www.camptents.com/SpecPages/Canvas/CanvasTents644.htm" target="_blank">
<img alt="Pinnacle Tents - Tent Manufacturers Canvas Tent" class="style71" height="126" longdesc="Pinnacle Tents - Tent Manufacturers Canvas Tent" src="http://www.pinnacletents.com/images/TentManufacturers/TentManufacturing/TentManufacturersCanvasTent.jpg" width="200" /></a><br />
<br />
<img alt="Pinnacle Tents - Tent Manufacturing" class="style71" height="154" longdesc="Pinnacle Tents - Tent Manufacturers" src="http://www.pinnacletents.com/images/TentManufacturers/TentManufacturing/TentManufacturingKELTYSTYLE.jpg" width="200" /></td>
</tr>
<tr>
<td class="style5" valign="top">
<div id="sidebar" style="left: 0px; top: 0px; width: 164px; height: 310px;" class="style58">
<ul style="height: 314px">
<li>

<a href="http://www.pinnacletents.com/index.htm">
Pinnacle Tents <br /> Home</a></li>
<li>
<a href="http://www.pinnacletents.com/CustomTent/PortableShelter/AboutPinnacleTents.htm">
About <br /> Pinnacle Tents</a></li>
<li>

<a href="http://www.pinnacletents.com/CampingTentManufacturers/CampingTentManufacturer/ShowcasePinnacleTents.htm">
Showcase Tent<span class="style58" lang="en-ca"> </span>&nbsp;Projects</a></li>
<li class="style57">
<a href="http://www.pinnacletents.com/EquipmentTents/PortableEmergencyShelters/PinnacleTentsCatalog.htm">
Pinnacle Tents <br />Catalog</a></li>
<li>

<a href="http://blog.pinnacletents.com/" target="_blank">Pinnacle Tents <br />
Blog</a></li>
<li>
<a href="http://www.pinnacletents.com/CampingTent/TentManufacturing/ContactPinnacleTents.htm">
Contact <br />Pinnacle Tents</a></li>
<li>
<a href="http://www.pinnacletents.com/CampingTentManufacturer/CampingEquipmentTents/RequestforQuotation.htm">

Request for Tent Quotation</a></li>
</ul>
</div>
<br />
<div id="sidebar1" style="background: #FFF000; left: 0px; top: 0px; width: 164px; height: 59px; z-index: 1;" class="style66">
<br />
<strong>
<span lang="en-ca">

<a class="style65" href="http://www.camptents.com/" target="_blank">Camping Tents<br />
Buy One Now</a></span></strong>
</div>
</td>
</tr>
</table>
<div class="style57" style="padding: inherit; margin: auto; background: #78643A; width: 853px; left: auto; position: static; z-index: auto; top: 875px;">

<div style="height: 100px; width: 855px;">
<a href="http://www.pinnacletents.com/index.htm" class="style34"> Pinnacle Tents Home</a> <span class="style34">|</span>

<a href="http://www.pinnacletents.com/CustomTent/PortableShelter/AboutPinnacleTents.htm" class="style34"> About Pinnacle Tents</a> <span class="style34">|</span>
<a href="http://www.pinnacletents.com/CampingTentManufacturers/CampingTentManufacturer/ShowcasePinnacleTents.htm" class="style34"> Showcase Tent Projects</a> <span class="style34">|</span>
<a href="http://www.pinnacletents.com/EquipmentTents/PortableEmergencyShelters/PinnacleTentsCatalog.htm" class="style34"> Pinnacle Tents Catalog</a> <span class="style34">|</span>
<a class="style34" href="http://blog.pinnacletents.com/" target="_blank">Pinnacle Tents Blog</a> <span class="style34">|</span>

<a href="http://www.pinnacletents.com/CampingTent/TentManufacturing/ContactPinnacleTents.htm" class="style34"> Contact Pinnacle Tents</a>
<a class="style34" href="http://www.pinnacletents.com/CampingTentManufacturer/CampingEquipmentTents/RequestforQuotation.htm">Request for Tent Quotation</a> <span class="style34">|</span> <span class="style39">
<a class="style67" href="http://www.camptents.com/" target="_blank">Camping Tents
- Buy One Now</a></span><br class="style67" />
<span class="style34">Copyright &copy; 2009 Pinnacle Tents. All Rights Reserved.</span></div></div>

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>

<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-2306945-3");
pageTracker._trackPageview();
} catch(err) {}</script>

</body>

</html>
gracexl
04-27-2009, 04:52 PM
Thanks for correcting the whole page! Now I have a few questions:
1. what tools or software do you use to fix/validate the markup?
2. I noticed that you removed all the directory path of the pictures. The reason we put the pictures in the keyword named directories is to enhance keywords for search engine. Is that NOT effective?
3. we created a yellow section (Camping Tents Buy one now) at the sidebar on the left to highlight one of our navigation option. It shows correctly in IE, but loses its format(yellow section is missing, the text moved up, and jammed with the upper section) in Firefox. We were hoping fixing the markup might resolve the inconsistency, but after checking your validated code, the problem still persists. Can you tell us how to fix this?
Here is the link. http://www.pinnacletents.com/
If you view it in IE and firefox, and notice in IE, at the bottom of the left sidebar, it is yellow background with the wording "Camping Tents Buy One Now". This is what we want to be displayed on all browsers. If you look at it in Firefox, the format is no longer there.

Many thanks,

Grace
bluewalrus
04-28-2009, 01:24 AM
I didn't remove the paths they're still absolute links as far as I can see.

I do it by hand and read the error messages then do a search the same error don't do this unless you know exactly what the occurrence would be though. One error message "end tag for "meta" " End tag means it's not closed missing either / or </tag> for meta it's self closing meaning it's closed within the <meta whatever /> or you could also <meta whatever></meta> that's the not self closing way though . The validator is case sensitive and should be lowercase ROWSPAN=2 and the units should be in "". No idea what this is suppose to be <O:P> but since there's only a space or nothing and then its closed i just deleted them all. <br> should be <br />...

"document type does not allow element "td"" means you put a page element within another one that can not be in this case a td outside of a table. a td is a cell within a row (tr) within a table (table).

The last few errors usually get corrected when you fix the first and other errors.

I don't have IE can you take a screen shot of what you want? You should use divs in place of tables.
gracexl
04-28-2009, 04:13 AM
Thanks for the explanation, and taking the time to fix the page manually! Attached please find how IE displays the page. The marked portion is what we want to display in all browser.

Thanks!

Grace
bluewalrus
04-28-2009, 04:28 AM
replace line 352 with
<div id="sidebar1" style="background: #FFF000; left: 46px; position:absolute; top: 715px; width: 164px; height: 59px; z-index: 1;" class="style66">
gracexl
04-28-2009, 05:03 AM
Thanks for the quick response. But when I tried to adjust the left and top so it aligns with the main sidebar, I get to the poin that the display in IE is almost there, and too right in Firefox. I think I read somewhere saying the absolute position won't work on all browsers. How can I fix it?
forum_amnesiac
04-28-2009, 06:26 AM
To check my Markup I use HTML CSE Lite, it is free to download and use and gives a reasonable explanation of what, and where, the problem is.

There are other tools that do this, online as well.
bluewalrus
04-28-2009, 12:53 PM
This doesn't put it against the menu though...


<div id="sidebar1" style="background: #FFF000; float:left; width: 164px; height: 59px; z-index: 1;" class="style66">

The z index has no function though without positioning being set.
gracexl
04-28-2009, 09:36 PM
Thank you so much! You helped me fix it! Now I just need to fix all the other pages. You are so wonderful, and did the impossible for us:)