Paragraph & menu showing wrong in FireFox

cbrams9 · #1 (**permalink**) Oct 23rd, 2006, 16:57

Hi All,

I am having a problem trying to get my menu and paragraphs displaying the same as Internet Explorer.

Internet Explorer -

FireFox -

html code -

HTML: Select all

<html>
<head>
<title>sf group | Home </title>
<link href="main.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="/favicon.ico">
 
</head>
<body background="images/gradient.jpg">
<table id='f_t' border="1" align="center"><!-- t1-->
  <tr>
    <td id='f_hc'>
      <a href='index.htm'>
        <img src="images/banner.jpg" border='1' title='sf group - charity website' alt='image missing'>
      </a>
    </td>
  </tr>
  <tr>
    <td id='body_c' align='center'>
      <table width="100%" height="270" border="1" style='border: 0 solid'><!-- t2-->
        <tr>
          <td id='menu_c'>
         <div id="menu5">
                            <p id='home'><a id='t' href="index.htm" title="Home">Home</a></p>
                     <p id='news'><a id='t' href="news.php" title="News">News</a></p>
              <p id='about'><a id='t' href="about.htm" title="About Us">About Us</a></p>
              <p id='application'><a id='t' href="application.htm" title="Application Form">Application Form</a></p>
              <p id='contact'><a id='t' href="contact.htm" title="Contact Us">Contact Us</a></p>
                            <p id='faq'><a id='t' href="faq.htm" title="FAQ's">FAQ's</a></p>
              <p id='info'><a id='t' href="financialinfo.htm" title="Financial Information">Financial Information</a></p>
                   <p id='donations'><a id='t' href="previousdonations.htm" title="Funded Items">Funded Items</a></p>
       <p id='company'><a id='t' href="http://www.sfgroup.com" target="_blank" title="sf group company website">sf group</a></p>
           </div>
           </td>
          <td id='content_c'>
            <table width="100%" height="270" border="1"><!-- t3-->
              <tr>
                <td id='image'>
                  <img src="images/hands.jpg" title='A Helping Hand' alt='image missing' width="102" height="99" align="left">
                </td>
                <td id='txt' valign='top'>
                  Thank you for visiting <b>sf</b> groups charitable fund for disabled people.
    The charity is supported by contributions from the company and its employees. Decisions on funding are
                  made by three trustees and applications are made via the fund manager... <a  href='about.htm'>read more</a>
                 <p>Please feel free to look around the site and send us any queries that you may have.<p/>
                </td>
      </tr>
             <tr>
               <td id='txt' colspan='2'>
                 <hr size="1" noshade>
            <p><b>Our Purpose</b></p>
            <p>Our purpose is to financially
              assist severely disabled people of all ages, individually or in
              groups, to have access to equipment and services which will make
              a positive difference to their quality of life. We realise, through
              the personal experience of some of our friends and relatives, that
              statutory provision does not always cover items and services which
              are very specialised or of a higher specification than normal. Nevertheless,
              we are aware that these can make an important contribution to the
              wellbeing of severely disabled people and we see this as a target
              area for our donations.</p>
            <p><b>Our Approach </b></p>
            <p>sf group is a young company
              and we hope our approach reflects a positive and non patronising
              attitude. We aim to offer ‘a helping hand’ to severely disabled
              people when they need that special something which would make life
              easier. We have tried to make the application procedure simple and
              straightforward and all applications will be followed up personally
              by our Fund Manager. We want our charitable to be progressive
              and proactive!</p>
      <b>Can we help you?</b>
       <p><b>Please refer to our<a href='faq.htm'> FAQ's page </a> before applying to check whether you
       or your organisation fit our criteria.</b></p>
            <hr size="1" noshade>
             </td>
          </tr>
          </table> <!-- t3-->
          </td>
        </tr>
      </table> <!-- t2-->
    </td>
  </tr>
  <tr>
    <td><img src="images/footer.jpg" width="790" height="70"></td>
  </tr>
</table> <!-- t1-->
</body>
</html>

css code -

HTML: Select all

/* =-=-=-=-=-=-=-[main frame table]-=-=-=-=- */
#f_t {
 width: 800;
 border: 1 solid #333333;
     }
#f_hc{
 width: 790;
 border: 1 solid #ffffff;
     }
#body_c {
 width: 790;
 height: 270;
 background: url(images/background.jpg) repeat;
 
     }
#menu_c{
 width: 200;
 height: 125;
 vertical-align: top;
     }
#txt a:link, #txt a:visited {
 color: blue;
     }
 
#txt a:hover {
 
 color: purple;
     }
#content_c{
 width: 460;
 text-align: left;
 vertical-align: top;
 
     }
 
#image{
 
 vertical-align: top;
 padding: 25px 0 0px 0px;
     }
 
#txt{
 font-size: 12px;
   font-family: Arial;
 padding: 25px 0 0px 8px;
 text-align: justify;
     }
 
/* =-=-=-=-=-=-=-[Nav Menu]-=-=-=-=-=-=-=- */
 
#menu5 {
 width: 225px;
 border-style: none solid none solid;
 border-color: #D0D0D0;
 border-width: 1px;
 margin: 0px;
     }
#home a:link, #home a:visited {
 color: #070707;
 display: block;
 background: url(images/linkoverstatic.jpg) no-repeat;
     }
#news a:link, #news a:visited {
 color: #070707;
 display: block;
 background: url(images/linkoverstatic.jpg) no-repeat;
     }
#news_sel a:link, #news_sel a:visited {
 color: #070707;
 display: block;
 background: url(images/linkoverpink.jpg) no-repeat;
     }
 
#about a:link, #about a:visited {
 color: #070707;
 display: block;
 background: url(images/linkoverstatic.jpg) no-repeat;
        }
#about_sel a:link, #about_sel a:visited {
 color: #070707;
 display: block;
 background: url(images/linkovergreen.jpg) no-repeat;
        }
#application a:link, #application a:visited {
 color: #070707;
 display: block;
 background: url(images/linkoverstatic.jpg) no-repeat;
      }
#application_sel a:link, #application_sel a:visited {
 color: #070707;
 display: block;
 background: url(images/linkoverpurple.jpg) no-repeat;
      }
#contact a:link, #contact a:visited {
 color: #070707;
 display: block;
 background: url(images/linkoverstatic.jpg) no-repeat;
      }
#contact_sel a:link, #contact_sel a:visited {
 color: #070707;
 display: block;
 background: url(images/linkoverpink.jpg) no-repeat;
      }
#faq a:link, #faq a:visited {
 color: #070707;
 display: block;
 background: url(images/linkoverstatic.jpg) no-repeat;
      }
#faq_sel a:link, #faq_sel a:visited {
 color: #070707;
 display: block;
 background: url(images/linkovergreen.jpg) no-repeat;
      }
#info a:link, #info a:visited {
 color: #070707;
 display: block;
 background: url(images/linkoverstatic.jpg) no-repeat;
      }
#info_sel a:link, #info_sel a:visited {
 color: #070707;
 display: block;
 background: url(images/linkoverpurple.jpg) no-repeat;
      }
 
#donations a:link, #donations a:visited {
 color: #070707;
 display: block;
 background: url(images/linkoverstatic.jpg) no-repeat;
      }
#donations_sel a:link, #donations_sel a:visited {
 color: #070707;
 display: block;
 background: url(images/linkoverpink.jpg) no-repeat;
      }
#company a:link, #company a:visited {
 color: #070707;
 display: block;
 background: url(images/linkoverstatic.jpg) no-repeat;
      }
#company_sel a:link, #company_sel a:visited {
 color: #070707;
 display: block;
 background: url(images/linkovergreen.jpg) no-repeat;
      }
 
#menu5 a {
   height: 5px;
 text-decoration: none;
 padding: 8px 15px 0 10px;
 text-align: left;
 
     } 
 
 
#home a:hover {
 color: #ffffff;
 background: url(images/linkoverpurple.jpg) no-repeat 0 0px;
 
     } 
#news a:hover {
 color: #ffffff;
 background: url(images/linkoverpink.jpg) no-repeat 0 0px;
 
     } 
#about a:hover {
 color: #ffffff;
 background: url(images/linkovergreen.jpg) no-repeat 0 0px;
     }
#application a:hover {
 color: #ffffff;
 background: url(images/linkoverpurple.jpg) no-repeat 0 0px;
     }
#contact a:hover {
 color: #ffffff;
 background: url(images/linkoverpink.jpg) no-repeat 0 0px;
     }
#faq a:hover {
 color: #ffffff;
 background: url(images/linkovergreen.jpg) no-repeat 0 0px;
     }
#info a:hover {
 color: #ffffff;
 background: url(images/linkoverpurple.jpg) no-repeat 0 0px;
     }
#donations a:hover {
 color: #ffffff;
 background: url(images/linkoverpink.jpg) no-repeat 0 0px;
     }
#company a:hover {
 color: #ffffff;
 background: url(images/linkovergreen.jpg) no-repeat 0 0px;
     }
#menu5 a:active {
 color: #ffffff;
 background: url(images/linkoverpink.jpg) no-repeat 0 -64px;
 
     }
 
#menu5 #t{
 font-family: Arial;
 color: 333333;
 font-size: 12;
 padding: 12px;
     }
#menu5 p{
 padding: 10px 0 5px 10px;
 margin: 0;
     }

The menu has more space in between on Explorer, but would like it to be as on FireFox.

Does anyone know why??

Thanks

moojoo · #2 (**permalink**) Oct 23rd, 2006, 17:06

Firefox is handling it correctly. If you want it to match then add more margin to the li's for FF. IE adds extra space between styled list elements and that is a bug.

cbrams9 · #3 (**permalink**) Oct 23rd, 2006, 18:43

Quote:

Originally Posted by moojoo

Firefox is handling it correctly. If you want it to match then add more margin to the li's for FF. IE adds extra space between styled list elements and that is a bug.

When you say add more margin to li's for FF will this make a space like in Internet Explorer? As I want it to have a space between the border and the text.

ukgeoff · #4 (**permalink**) Oct 23rd, 2006, 22:11

As Firefox and other standards compliant browsers will do it correctly, you need to actually work the other way around.

Produce the layout you want in Firefox first then have an ieonly.css stylesheet that is loaded after any other style sheets that adjusts things to get IE looking the same.

moojoo · #5 (**permalink**) Oct 24th, 2006, 13:52

I am confused as to what you want exactly.. There is a difference between the LI spacing etc as I stated above. Do you just want the text in the links to be further from the bottom border?

cbrams9 · #6 (**permalink**) Oct 25th, 2006, 13:29

Quote:

Originally Posted by moojoo

I am confused as to what you want exactly.. There is a difference between the LI spacing etc as I stated above. Do you just want the text in the links to be further from the bottom border?

yeh i want to do that as well, but if you look at the site in FF the paragraph on the right is against the border, unlike Internet Explorer is has a space between the border and the text, this is how I want it to be.

Im currently havin php done for my site, for an Admin site etc...would php itself be enough for security and data verification? or does JS need to be included? When I say enough i mean to go live on the Internet i.e. be hack proof?

So the website can be found on search engines, do I need to put meta tags in?

Thanks

moojoo · #7 (**permalink**) Oct 25th, 2006, 13:32

nothing is "hack proof". But PHP supports many things such as encryption so you will be fine. Also if you will be transmitting sensitive data you may want to make sure you have a secure http directory i.e. https:// vs standard http://.

As for the paragraphs hitting the right border I am ssuming you changed the default margins, padding etc in your css. A simple fix would be to add a right margin to #foo p {}

cbrams9 · #8 (**permalink**) Oct 25th, 2006, 13:48

Quote:

Originally Posted by moojoo

nothing is "hack proof". But PHP supports many things such as encryption so you will be fine. Also if you will be transmitting sensitive data you may want to make sure you have a secure http directory i.e. https:// vs standard http://.

As for the paragraphs hitting the right border I am ssuming you changed the default margins, padding etc in your css. A simple fix would be to add a right margin to #foo p {}

From the code I have pasted above where do you feel I should add that to?

When you say about transmitting sensitive data you may want to make sure you have a secure http directory i.e. https:// vs standard http:// how do you mean? Sorry if its a daft question but I dont have alot of knowlodge about website security. Im having someone do the php security for me as I dont have clue, just so I can tell him what should I say?

Thanks for your help

moojoo · #9 (**permalink**) Oct 25th, 2006, 14:13

Most hosts provide a standard http directory and a secure http directory. The secure directory encrypts transmitted data while the standard http directory does not.

cbrams9 · #10 (**permalink**) Oct 25th, 2006, 14:19

ok cheers moojoo for ur help, just only need to know where to add the code? And im just about sorted thanks!

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Displays wrong in Firefox	JustinStudios	Web Page Design	7	Jun 28th, 2007 19:56
Firefox bug...? What am I doing wrong?	jamesb75	Web Page Design	5	Feb 6th, 2007 13:15
CSS menu displaying wrong in Firefox (fine in IE)	camcc	Web Page Design	10	Oct 21st, 2006 02:05
background image not showing up in Firefox but showing in other browsers!	eskymo	Web Page Design	21	Jan 19th, 2006 23:10
something wrong (ONLY IN FIREFOX)	baseballer2150	Web Page Design	3	Jun 27th, 2005 01:21

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Paragraph & menu showing wrong in FireFox