Website Design Forum

**woody2371** · 12-19-2006, 01:25 AM

Hey, my page www.amillionwordsonbullying.com shows up perfectly in IE, but when viewed under mozilla firefox doesnt work. i have put up a temporary redirect for those browsers but for a example vist http://www.amillionwordsonbullying.com/example.html

Cheers
Da Tommo!

**SimpleByDesign** · 12-19-2006, 08:39 AM

After a quick look at your page, the main area causing your trouble is the CSS class 'navigationside' which is attached to your table and not the links. The code below is a quick hack not a full solution to get it to display in both FireFox 2 and IE7.

Check this site for good CSS examples/menus and other useful scripts: http://cssplay.co.uk/

If you alter your code in your example.html page from:

Code:

  <table width="800" border="0" cellspacing="0" cellpadding="0">
    <tr bgcolor="#0033FF">
      <td width="50" height="35" class="navigationuptop"><a href="index.html"class="navigationuptop">Home</a></td>
      <td width="50" height="24" class="navigationuptop"><a href="How it works.html"class="navigationuptop">How it Works </a></td>
      <td width="50" height="24" class="navigationuptop"><a href="How to get in on the action.html"class="navigationuptop">How to get in on the action </a></td>
      <td width="50" height="24" class="navigationuptop"><a href="FAQ.html"class="navigationuptop">FAQ</a></td>
      <td width="50" height="24" class="navigationuptop"><a href="About.html"class="navigationuptop">About</a></td>
      <td width="50" height="24" class="navigationuptop"><a href="contact.html"class="navigationuptop">Contact</a></td>
      <td width="50" height="24" class="navigationuptop"><a href="Progress Report Blog.html"class="navigationuptop">Progress Report/Blog </a></td>
    </tr></table>

To this:

Code:

  <table border="0" cellpadding="0" cellspacing="0" width="800">
    <tbody><tr bgcolor="#D4FF00">
      <td class="" height="35" width="85"><a href="http://www.amillionwordsonbullying.com/index.html" class="navigationuptop">Home</a></td>
      <td class="" height="24" width="85"><a href="http://www.amillionwordsonbullying.com/How%20it%20works.html" class="navigationuptop">How it Works </a></td>
      <td class="" height="24" width="85"><a href="http://www.amillionwordsonbullying.com/How%20to%20get%20in%20on%20the%20action.html" class="navigationuptop">How to get in on the action </a></td>
      <td class="" height="24" width="85"><a href="http://www.amillionwordsonbullying.com/FAQ.html" class="navigationuptop">FAQ</a></td>
      <td class="" height="24" width="85"><a href="http://www.amillionwordsonbullying.com/About.html" class="navigationuptop">About</a></td>
      <td class="" height="24" width="85"><a href="http://www.amillionwordsonbullying.com/contact.html" class="navigationuptop">Contact</a></td>
      <td class="" height="24" width="85"><a href="http://www.amillionwordsonbullying.com/Progress%20Report%20Blog.html" class="navigationuptop">Progress Report/Blog </a></td>
    </tr>
  </tbody></table>

And alter part of your CSS file:

Code:

.navigationside{
    font-family: Verdana, sans-serif;
    font-style: normal;
    font-weight: bold;
    display: block; 
    color: #000000;
    text-decoration: none;
    background-color: #D4FF00;
}

.navigationside:hover{
    font-family: Verdana, sans-serif;
    font-style: normal;
    font-weight: bold;
    color: #94006A;
    text-decoration: underline;
    display: block;
    background-color: #D4FF00;
}

Hope this is of some help.

**woody2371** · 12-20-2006, 11:52 PM

Thanks heaps for the help, we are now working on putting up a complete firefox site based on the coding you gave us.

Thanks again
Da Tommo!