Jump to content

Welcome to Geeks to Go - Register now for FREE

Geeks To Go is a helpful hub, where thousands of volunteer geeks quickly serve friendly answers and support. Check out the forums and get free advice from the experts. Register now to gain access to all of our features, it's FREE and only takes one minute. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more.

Create Account How it Works
Photo

Firefox display of background color/image inconsistent


  • Please log in to reply

#1
promoter

promoter

    Member

  • Member
  • PipPip
  • 31 posts
Whenever I set the background color or image of a table or div, internet explorer displays it correctly. but firefox is inconsistent with what it will display. check out the following links to see what I mean:

http://loppcompanies...state/index.htm
http://loppcompanies...rties/index.htm

However, this page seems to be working fine in both:
http://loppcompanies.com/indexREAL.htm

why do some pages look so jacked in firefox? here is the code for my htm page and following that in the css. I included everything because I wasn't sure what is relavant for fixing the problem.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Lopp Properties</title>
<link href="LoppProperties-style.css" type="text/css" rel="stylesheet" />
</head>

<body>
<div id="mainpage">
<div id="header" align="right">
<div class="headerlinks">/   <a href="../realEstate/index.htm">Lopp Real Estate </a>  /    <a href="../properties/index.htm">Lopp Properties</a>   /   <a href="../management/index.htm">Lopp Management</a>   /
</div>
</div>
<div class="tagline" align="center">Knowledge Integrity Responsiveness Relationship</div>
<div id="outerContainer">
<div id="container" align="center">

<table align="left" width="800" cellpadding="0" cellspacing="0" style="margin-top: 200px;">
	<tr><td width="186" style="border-right: 1px solid #EAE3D8;"> </td>
	<td width="612"><h3>Lopp Properties</h3></td></tr>
	<tr><td height="49" style="border-right: 1px solid #EAE3D8;"> </td>
	<td rowspan="6" class="copy" valign="top">
<p>A development firm is defined by its expert knowledge of the industry, its integrity in all operations, its responsiveness to the changing market and the lasting relationships built with its clients. This is the philosophy that drives Lopp Properties, a full-service property development firm, aimed at delivering long-term success rather than short-term rewards in your property development.</p>

<p>From consultation of development plans, to building construction, to property management, Lopp Properties works with our clients to develop the right mix of services to best meet the needs of the project and the investors.  </p>
<br /><br />
<h4>Services</h4>
<p>Lopp Properties offers its client a full range of services, and will tailor those services specific to the needs of the client.</p>
<ul>
	<li><a href="services.htm">Development for Fee</a></li>
	<li><a href="services.htm">Consultation Services</a></li>
	<li><a href="services.htm">Company-Owned Development</a></li>
	<li><a href="services.htm">Property Management</a></li>
	</ul></td></tr>
	<tr><td style="border-right: 1px solid #EAE3D8;" class="nav" valign="top">
	  <a href="index.htm">Home</a>
	  <a href="services.htm">Services</a>
	  <a href="team.htm">Your Team</a>
	  <a href="media.htm">Media Room</a>
	  <a href="communities.htm">Partnering with <br />Communities</a>
	  <a href="links.htm">Links/Resources</a>
	  <a href="contact.htm">Contact Us</a>	  </td></tr>
	
	<tr>
	  <td style="border-right: 1px solid #EAE3D8;"> </td>
	  </tr>
	<tr>
	  <td style="border-right: 1px solid #EAE3D8;"> </td>
	  </tr>
	<tr>
	  <td style="border-right: 1px solid #EAE3D8;"> </td>
	  </tr>
	<tr>
	  <td style="border-right: 1px solid #EAE3D8;"> </td>
	  </tr>
	<tr>
	  <td style="border-right: 1px solid #EAE3D8;"> </td>
	  <td> </td>
	  </tr>
	<tr>
	  <td style="border-right: 1px solid #EAE3D8;"> </td>
	  <td> </td>
	  </tr>
	<tr>
	  <td style="border-right: 1px solid #EAE3D8;"> </td>
	  <td> </td>
	  </tr>
	<tr><td> </td><td> </td></tr>
</table>

</div>
</div>
<div id="footer" align="center">
<table width="830" cellspacing="0">
	<tr><td style="border-top: 1px solid #1C1C1C;" class="footerText" align="left">825 North Gate Blvd. Suite 201,
New Albany, IN 47150 • 812 949 6160 • 800 576 5677 </td><td style="border-top: 1px solid #1C1C1C;" class="footerText" align="right">Copyright © 2008 Lopp Real Estate</td></tr>

	<tr><td colspan="2" class="footerText" align="left">Site designed by <a href="http://www.promoterinc.com" target="_blank">ProMoter Inc. Marketing Communications</a></td></tr>
</table>
</div></div>
</body>
</html>

Here is the css:
/* CSS Document */

body {background: #000000 url(../images/Lopp-gradient.jpg) repeat-x; margin: 0 auto;}

#mainpage {padding-bottom: 10%;}

#outerContainer {margin: 0 auto; width: 820px; text-align: left; position: relative; top: 10px; background: #FFF7E9 url(images/propHeader2.gif) no-repeat; border: 1px solid #000;}

#container
	{margin: 0 auto; text-align: left; position: relative; padding: 5px; }
	

/* header */

#header {margin-top: 0; margin-right: 5%; top: 5px; position: relative;}
	
.headerlinks {color: #4F75A4; font: 8pt Verdana, Arial, Helvetica, sans-serif; padding-top: 3px; white-space: nowrap;}

.headerlinks a {font: 8pt Verdana, Arial, Helvetica, sans-serif; text-transform: none; 
	color: #4F75A4; text-decoration: none; padding: 3px 3px; white-space: nowrap;}
	
.headerlinks a:hover {color: #999999;}


/* footer */

#footer {clear: both; bottom: 0px; position: static; top: 100%; margin-top: 125px;}

.footerText {font: 7.5pt Verdana, Arial, Helvetica, sans-serif; color: #2C2C2C; padding-top: 5px;}

.footerText a {color: #2C2C2C; text-decoration: none;}

.footerText a:hover {color: #414141;}


/* main content */

.tagline {color: #4F75A4; font: 15pt Verdana, Arial, Helvetica, sans-serif; text-transform: uppercase; font-style: italic;
	word-spacing: 35px; font-weight: bold; margin: 0 auto; padding-top: 115px;}
	
.copy {font: 8.5pt Verdana, Arial, Helvetica, sans-serif; color: #666666; padding-left: 10px; width: 580px;}

.copy a {color: #003d7d; display: inline; text-decoration: none;}

.copy a:hover {color: #80561b;}

.copy li {list-style-type: none;}

h3 {font: 12pt 'Lucida Sans', 'Lucida Grande', 'Lucida Monotype', Verdana, Arial, Helvetica, sans-serif; color: #80561B; text-transform: uppercase; font-weight: bold; padding-left: 10px;}
	
h4 {font: 10pt 'Lucida Sans', 'Lucida Grande', 'Lucida Monotype', Verdana, Arial, Helvetica, sans-serif; color: #003d7d;
	font-weight: bold;}
	
/* navigation */

.nav {margin-left: 5px;}

.nav a {font: 8.5pt 'Lucida Sans', 'Lucida Grande', 'Lucida Monotype', Verdana, Arial, Helvetica, sans-serif; 
color: #666666; text-transform: uppercase; padding: 5px 0px 5px 10px; display: block; text-decoration: none; border-top: 1px solid #EAE3D8; display: block; left: 5px;}
	
.nav a:hover
	{background-color: #80561b;
	color: #fff7e9;
	text-decoration: none;}

Can anyone make sense of the problem? Thanks so much!
  • 0

Advertisements


#2
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
Before I get too far into answering this, your pages should be designed to Firefox which is a CSS2 compliant browser whereas IE is not. IE displays your page "correctly" (as you see it) because your pages are not properly coded and IE displays improperly coded pages according to its own default styles. Although this may not cure the problem, these coding errors do need to be corrected because of the document type you are using:

HTML Code Errors
CSS Coding Error

Some things like missing the open html tag may be why FF isn't showing your pages correctly. FF adheres to the standards. IE does not. IE displays any page no matter how badly coded.

Ron

Edited by Major Payne, 22 February 2008 - 11:35 AM.

  • 0

#3
promoter

promoter

    Member

  • Topic Starter
  • Member
  • PipPip
  • 31 posts
I didn't even know I had been coding incorrectly this whole time! I looked at the errors and almost every one in the htm side had to do with the meta tags. How would those affect the way something is displayed? Assuming I fix those tags, what do I do to make it display the way I want in firefox? Do I need to change the DOCTYPE? This is what dreamweaver automatically starts the page with when I create a new html page:

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

But I found this on a web forum thread and thought maybe I should use it instead:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

But I don't know if that makes a difference because I don't know what it is.

The results of the validation of my css is that I had one font color value incorrect. It didn't have a problem with the background image properties I set for some of my DIV containers. If it's supposedly valid, why wouldn't backgrounds for some DIVs show up in firefox?

One problem I had in the html is that "background" is not supported for the Table tag. But that is one thing that Firefox does display. Is firefox displaying my error like Internet explorer? I'm so lost!
  • 0

#4
promoter

promoter

    Member

  • Topic Starter
  • Member
  • PipPip
  • 31 posts
All of my problems seemed to be solved when I changed the table alignment within the div#container to 'center'. Now everything appears correct in firefox. I also moved all table background images to DIVs in my css document. I think those are the only things I changed.
  • 0

#5
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
The doc type you changed to is much better as the other really requires stricter coding. This is very good:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Since you got it fixed for FF the way you want it. I'll delete my corrections from HD.

For a table bg color or image, you need to code using inline CSS at least otherwise some browsers will not recognize the coding. You seem to have a mixture of old code, inline styling and using an external CSS stylesheet. I didn't see where you wanted a bg anything for a table anywhere.

Ron
  • 0

#6
promoter

promoter

    Member

  • Topic Starter
  • Member
  • PipPip
  • 31 posts
Oh, that's because all day friday I was working on the site and changing the code. So you probably took a look at it after I fixed things. My CSS now passes the validation test and I think the realEstate index page now does too! Thanks for your help!
  • 0

#7
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
Both look good. Still a few validation errors on this one. HTML Tidy putting up a fuss about the table summary attribute, but that's a Section 508 requirement, not a w3c.org requirement.

Lots of work, but worth it.

Ron
  • 0






Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP