[SOLVED] Firefox issue

[sawade]

I am having issues with Firefox.  It is breaking my navi and repositioning one form.  Other than these two things, all other forms etc.  are all styling correctly.

 

Any ideas?

 

My css is long 365 lines:

/* Default CSS for Secure Forms */

/*Start Universal Reset*/

* {
margin: 0;
padding: 0;
}

/*End Universal Reset*/

/*Start Body Styles*/

body {
width: 800px;
margin-left: auto;
margin-right: auto;
background-color: #EEE8CD/* #9AC0CD*/;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
text-align: left;
line-height: 1.7em;
}

#body {
background-color: #C1CDCD;
border: medium #3D627F solid;
}

/*End Body Styles*/

/*Start Header Styles*/

#header {
background: #3D627F url(images/medwww.gif) top right no-repeat;
padding-bottom: 5px;
}

#header p {
text-align: left;
padding: 20px;
}

/*End Header Styles*/

/*Start Navigation Styles*/

#navigation ul {
padding: 0;
padding-bottom: 10px;
margin: 0;
width: 100%;
float: left;
list-style-type: none;
background-color: #3D627F;
color: white;
}

#navigation ul li {
display: inline;
line-height: 18px;
}

#navigation ul li a {
float: left;
padding: 5px 10px 5px 10px;
background-color: #3D627F;
color: white;
text-decoration: none;
border-right: 1px solid #fff;
}

#navigation ul li a:hover {
background-color: #BCD2EE;
color: white;
}

#navigation #active {
padding-left: 10px;
padding-right: 10px;
padding-bottom: 5px;
padding-top: 5px;
float: left;
background-color: #BCD2EE;
font-weight: bold;
}

/*End Navigation Styles*/

/*Start Content Styles*/

#content {
padding: 10px;
}

#content p {
text-indent: 25px;
text-align: left;
line-height: inherit;
padding: 5px;
}

#content .demo {
text-align: right;
}	

h1 {
font-size: 1.5em;
background: url(images/dividebar.gif) bottom right no-repeat;
padding: 10px;
margin: 3px 5px 3px 10px;
text-indent: 10px;
}

h2, h3 {
background: url(images/headerbar.gif) right no-repeat;
text-indent: 10px;
font-variant: small-caps;
letter-spacing: 2px;
padding: 3px;
margin: 3px 5px 3px 10px;
}

h4 {
text-indent: 10px;
font-variant: small-caps;
letter-spacing: 2px;
background-color: #3D627F;
padding: 3px;
}

/*End Content Styles*/

/*Start Column Styles*/

#column {
float: left;
width: 35%;
background-color: #C1CDCD;
border-right: medium dotted #3D627F;
padding: 10px;
margin: 10px;
line-height: inherit;
}

#column p {
text-indent: 15px;
text-align: left;
line-height: inherit;
padding: 5px;
}

#column p img {
text-align: center;
text-indent: 0;
border: 0;
}

li {
list-style-type: circle;
list-style-position: inside;
padding-left: 10px;
}	

address {
font-style: italic;
font-variant: small-caps;
font-weight: bold;
}

/*End Column Styles*/

/*Begin Form Styles*/

#required, em {
text-align: right;
font-style: italic;
color: red;
font-weight: bold;
font-size: x-small;
}

#form table {
width: 770px;
}	

.textbox, .dropdown {
border: 1px solid;
}	

#form h1, h3, h4, p {
text-align: center;
}	

td {
font-variant: small-caps;
}

th {
font-weight: bold;
letter-spacing: 10px;
color: white;
background-color: #3D627F;
padding: 3px;
}

.thheader {
text-align: center;
font-weight: bold;
letter-spacing: 10px;
color: white;
background-color: #3D627F;
padding: 3px;
}

#history td h3, #insurance td h3 {
letter-spacing: normal;
background: none;
font-size: .9em;
color: #666666;
}

#patientcomments {
text-align: center;
border-spacing: 5px;
}

#changes {
text-align: center;
font-weight: bold;
letter-spacing: 2px;
}

#contactus .contact {
letter-spacing: normal;
font-variant: small-caps;
font-weight: bold;
border-bottom: none;
background: none;
color: #000;
text-align: right;
vertical-align: top;
}

.esign {
font-variant: normal;
}

#hipaaprivacy h1 {
background: none;
text-align: center;
border-bottom: medium solid #3D627F;
font-variant: small-caps;
letter-spacing: 3px;
}

#hipaaprivacy h3 {
background: none;
text-align: left;
font-variant: normal;
font-weight: bold;
letter-spacing: normal;
}

#hipaaprivacy h5 {
font-size: 1em;
font-weight: bold;
}

#hipaaprivacy address {
margin-left: 250px;
}

#hipaasignature .input {
vertical-align: top;
}

.error {
color: red;
}

#form #submit, #hipaaprivacy #submit {
text-align: center;
}	

/*End Form Styles*/

/*Start Confirm Page Styles*/

#confirmpage h3 {
text-indent: 10px;
font-variant: small-caps;
letter-spacing: 2px;
padding: 3px;
background: none;
}

#confirmpage p {
text-indent: 25px;
text-align: left;
line-height: inherit;
padding: 5px;
}

#confirmpage table {
width: 765px;
}

#confirmpage #confirm th, #emergencycontacts th, #confirm2 th, #insurance th, #confirm3 th {
font-weight: bold;
font-variant: small-caps;
letter-spacing: 0;
text-align: left;
vertical-align: top;
background: none;
color: #000;
}

#confirmpage #confirm td, #emergencycontacts td, #confirm2 td, #insurance td, #confirm3 td {
color: #333;
font-variant: small-caps;
}

#contactusconfirm .contactconfirm {
font-weight: bold;
}

#contactusconfirm .confirmthcontact {
text-align: right;
font-variant: small-caps;
letter-spacing: 0;
background: none;
color: #000;
}

#confirmpage .divider {
border-bottom: thin solid #000;
}

#confirmpage .error {
color: red;
font-weight: bold;
}

/*End Confirm Page Styles*/

/*Begin Footer Styles*/

#footer {
background-color: #3D627F;
font-size: .8em;
line-height: normal;
text-align: center;
padding: 10px;
clear: both;
text-indent: 0;
}

#footer p {
text-align: center;
line-height: inherit;
padding: 5px;
}

/*End Footer Styles*/

 

 

Some crude screenshots:

http://www.medsolutionservices.com/browser.html

[haku]

Showing CSS without HTML is like saying 'something is wrong the shape of my cake - look at this bowl of icing'.

 

Try validating your code on the w3c website - it's almost definitely got some errors in it.

[sawade]

I have validated all my pages.  All pass as XHTML strict 1.0.

 

My contact us form is PHP, as all my forms are.  But firefox is only affecting this one.  I thought maybe it had to do with styling on my divs, but all divs are mirrored on all pages.  I will include my navi html and the html (minus php) for the contact us form.

 

navi:

<div id="navigation">
    
    	<ul>
            <li id="active">Home</li>
            <li><a href="" title="">Page</a></li>
<li><a href="Page.html" title="">Page</a></li>
            <li><a href="Page.html" title="">Page</a></li>
            <li><a href="Page.html" title="">Page</a></li>
<li><a href="contactus.php" title="Our online contact form.">Contact Us</a></li>
	</ul>
    
</div>

 

contact us:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <meta name="keywords" content="" />
<meta name="description" content="This is ...." />
<meta name="author" content="Sarah Wade" />

<title>Web site Title</title>
    
    <link type="text/css" rel="stylesheet" href="style.css" media="screen" />
    
  </head>

<body>

<div id="body">
    
<div id="header">

    <p><img src="images/Tital.gif" alt="" /></p>
    
<div id="navigation">
    
    	<ul>
            <li><a href="index.html" title="">Index</a></li>
            <li><a href="" title="">Page</a></li>
		<li><a href="page.html" title="">Page</a></li>
            <li><a href="page.html" title="">Page</a></li>
            <li><a href="page.html" title="">Page</a></li>
		<li id="active">Contact Us</li>
	</ul>
    
</div>
    
</div>

removed php ...

<div id="content">

<div id="form">

<form method="post" action="">

...

</form>

</div>



</div>

<div id="footer">

<p>Terms of Use   |   Privacy Policy</p>

<p>© 2009, Sarah Wade<br />
      All trademarks and registered trademarks appearing on this site are the property of their respective owners.</p>

</div>

</div>

</body>
</html>

[sawade]

I did see one div layer that was different, so i repositioned it on the contact us page.  But did not change the outcome.  It is still repositioning only this one page.  Each page is fully mirrored, so this is confusing and irritating.  Thanks for any help.