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).

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!

Instead of HR, I use a DIV and CSS:

Code:

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

and:

Code:

<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:

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 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

Code:

				<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

Thread: Display inconsistency between IE and Firefox

Thread Tools

Search Thread

Display inconsistency between IE and Firefox

Bookmarks

Bookmarks

Posting Permissions