Site doesn't look right in Firefox

Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

smooth

Garrett
Thread Starter
Joined
Sep 26, 2005
Messages
4,029
Hey everybody :D

I recently downloaded Firefox on my laptop at the house (by the way, I love it :D ). I decided to check out the sites I have made at work, and I found out they don't display correctly in firefox.

The url's are:

IFG Agent Recruit
IFG USA

Now, if you view them in Internet Explorer, they display correctly. They are centered, and the menus and everything line up.

However, when I view them in Firefox, everything is left justified, and the navigation menu doesn't look quite right.

I'll attach my stylesheets for both as well.

Any ideas on what is going on here?
 

Attachments

Joined
Aug 7, 2005
Messages
2,183
OK - you are most likely using HTML that doesn't comply with the W3C standards, or IE-only tags.

When looking at the source, I don't see why IE centers it anyway...

HTML:
<!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=iso-8859-1" />
<title>Investors Financial Group - Home</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<table border="0" cellspacing="0" id="mainTable">
  <tr>
    <td width="65%" id="headerLeft"></td>
    <td width="35%" id="headerRight"><a href="http://www.ifgagents.com" target="_blank">    Agent Login</a> | <a href="contact.html">Contact Us</a></td>

  </tr>
  <tr>
    <td colspan="2" id="navBar"><a href="index.html">Home</a> | <a href="products.html">Products </a> | <a href="providers.html">Providers</a> | <a href="about.html">About Us </a><a href="products.html">| </a><a href="http://www.ifgagentrecruit.com" target="_blank">Career Opportunities</a></td>

  </tr>
  <tr>
    <td colspan="2" id="mainContent"><table border="0" cellspacing="0" id="mainContentTable">
      <tr>
        <td width="50%"><div align="center"><img src="images/index/ease.gif" alt="Ease your mind with IFG" width="325" height="163" class="imgBorder" /></div></td>
        <td width="50%"><div align="left"><font face="Arial" size="2">Investors Financial Group, Inc. is a national marketing organization offering customized insurance products to provide financial security for families across the United States. Our company recognizes the need to provide value in the industry and is committed to work with highly rated insurance carriers. You can choose from innovative term products, mortgage protection products, whole life insurance policies, long-term care products, medicare supplement products, disability products, or annuity products.</font></div></td>
      </tr>
      <tr>

        <td colspan="2"><div align="center"><br />
          <img src="images/index/living_text.gif" width="562" height="16" /></div></td>
        </tr>
      <tr>
        <td colspan="2"><div align="center"><font face="Arial" size="2">We offer living benefits that traditional insurance companies can&rsquo;t provide. Imagine being able to purchase life insurance that will provide a monthly income in the event that you become disabled due to sickness or injury. We can provide coverage under your life insurance policy that will pay you a lump in the event that you suffer critical illness such as a stroke, cancer, or heart attack.<br />
          <br />
        </font></div></td>
        </tr>

      <tr>
        <td colspan="2"><div align="center"><img src="images/index/choose.gif" width="682" height="125" border="0" usemap="#Map" /><br />
          <br />
        </div></td>
        </tr>
    </table></td>
  </tr>
  <tr>
    <td colspan="2" id="footer"><a href="index.html">Home</a> | <a href="products.html">Products</a> | <a href="providers.html">Providers</a> | <a href="about.html">About Us</a> | <a href="http://www.ifgagentrecruit.com" target="_blank">Career Opportunities<br />

    </a>Copyright &copy; 2005 Investors Financial Group | <a href="mailto:[email protected]">Contact the Webmaster</a> </td>
  </tr>
</table>
<map name="Map" id="Map">
  <area shape="rect" coords="241,97,315,112" href="products.html" alt="Click Here" />
  <area shape="rect" coords="582,96,656,111" href="http://www.ifgagentrecruit.com" target="_blank" alt="Click Here" />
</map>
</body>

</html>
No "align" attributes, no <center> tag...
Let's take a look at the CSS. Really the only reference is in here:
HTML:
#mainContent {
	[B]vertical-align: middle;[/B]
	text-align: center;
	border-left: 1px solid #000000;
	border-right: 1px solid #000000;
	padding: 5px;
}
Right here:
vertical-align: middle;

I don't know if Firefox supports this CSS element... If I were you, I would just use another method to center it.

As for the menus... They're JavaScript. Note that Firefox doesn't support all JavaScript the way IE does. It might also be the style issues again. I would either get rid of the JS menus or find a pre-built menu script.

Hope it helped. :)
 

smooth

Garrett
Thread Starter
Joined
Sep 26, 2005
Messages
4,029
Hey, thanks for the reply. :D

IE centers my table in that one, because in my style sheet, I've set the text-align to be center for the body tag.

I did that same thing on the recruiting site as well, except the recruiting site is using divs. But the body attribute has the text-align set to center.
 
Joined
Jan 4, 2006
Messages
112
Welcome to Cross Browser Compatibility!

Firefox doesn't center child block elements when you text-align:center any element. IE centers all child elements (block and inline). So if you want to center block elements in FF, you have to set their left and right margins to auto--explicitly. (Personally, I don't understand what they're defaulted to if it's not auto...but that's beside the point).

On your first page, if you do
#wrapper { margin-left: auto; margin-right: auto; }
then it should center the entire page.

You'll have to do the same to any other block child elements that you've text-align:center'ed.
 

smooth

Garrett
Thread Starter
Joined
Sep 26, 2005
Messages
4,029
Awesome fix treydx. :D That worked perfectly on aligning the page correctly.

The only problem I have now is the navigation bar on my Recruiting page. Seems as though the nav div isn't doing correctly.

Anyone have an idea on this?
 
Joined
Apr 30, 2005
Messages
3,012
@ treydx, when you don't set margins, they default to 0 (zero) [i think]

***
(Personally, I don't understand what they're defaulted to if it's not auto...but that's beside the point)
 

smooth

Garrett
Thread Starter
Joined
Sep 26, 2005
Messages
4,029
Okay, I fixed part of the problem with the Navigation bar. :D

I had in my style set the border-bottom, but it messed up due to the other things in the navigation, when viewed in Firefox.

So to fix that, I just made a border-top for my mainContent div instead. :D So that looks better now.

The only problem left that I see is that when viewed in firefox, there is a space between the header and navBar divs, and where there are no links, the div has the background color that is of the page itself. Not sure why it's doing this though.

Any ideas?
 
Joined
Jan 4, 2006
Messages
112
HTML:
<td valign="bottom">
	  	<div align="right">
			<a href="http://www.ifgusa.com" target="_blank">About Us</a> | 
	  		<a href="http://www.ifgagents.com" target="_blank">Agent Login</a> | 
	  		<a href="http://www.ifgagentrecruit.com/contact/contact.asp">Contact Us</a>
	  	</div>
	  </td>
    </table>
</div>
Try setting the bottom margin on that table in your header to 0.
If that doesn't work, you might consider running those two last tags together (i.e. </table></div>) the whitespace between them might be causing the extra line.

See if either of those fixes work.
 
Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 807,865 other people just like you!

Latest posts

Staff online

Top