471,599 Members | 1,038 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,599 software developers and data experts.

<div> not displaying correctly in Firefox V1.0.7

3
Hi

I am quite new to CSS and I seem to be having problems lining up two of my <div>. They appear to look hunkey dorey in IE, but when I view them in firefox 1.0.7, the top two are out of whack. Please see link: http://www.jakitidesign.com/holderhighreunion/index.php

Here is my very bodgy css code:
Expand|Select|Wrap|Line Numbers
  1. body {
  2.   font-family:Geneva, Arial, Helvetica, sans-serif;
  3.   font-size:small;
  4.   margin: 0;
  5.   padding: 0;
  6.   text-align: center; /* hack for IE quirk */
  7.   background-color:#ebedf8;
  8. }
  9.  
  10. td {
  11.     font-family: Geneva, Arial, helvetica, sans-serif;
  12.     margin-left:8px;
  13.     padding-left:8px;
  14.     padding-bottom:8px;
  15.     margin-bottom:10px;
  16.     text-align:left;  /* counteracting the IE hack */
  17. }
  18.  
  19. th {
  20.     font-family: Geneva, Arial, helvetica, sans-serif;
  21.     text-align:left;  /* counteracting the IE hack */
  22. }
  23.  
  24. h1 {
  25.     font-family:Arial Narrow;
  26.     font-size:x-large;
  27.     font-stretch:ultra-condensed;
  28.     color:#0e56a4;
  29.     margin-top:8px;
  30.     margin-bottom:8px;
  31.     padding-top:8px;
  32.     padding-bottom:8px;
  33.     text-align:left;  /* counteracting the IE hack */
  34. }
  35.  
  36. .bioName {
  37.     font-family:Arial Narrow;
  38.     font-size:170%; font-weight:200;
  39.     font-stretch: extra-condensed;
  40.     color:#0e56a4;
  41.     text-align:left;
  42.     background-color:#e8edf8;
  43.  
  44. }
  45.  
  46. .formField {
  47.     font-family:Arial Narrow;
  48.     font-size:small;
  49.     font-stretch: extra-condensed;
  50.     color:#0e56a4;
  51.     text-align:right;
  52.     vertical-align:text-top;
  53. }
  54.  
  55. .box2 {
  56.     margin:8px;
  57.     padding:8px;
  58.     spacing:8px;
  59.     border:2px;
  60.     border-color: #e8edf8;
  61.     border-style:dashed;
  62.     background-color:#FFFFFF;
  63. }
  64.  
  65. .footnote {
  66.     font-family:Arial Narrow;
  67.     font-size:x-small;
  68.     font-stretch: extra-condensed;
  69.     text-align:right;
  70. }
  71.  
  72. .emp {
  73.     font-family:Arial Narrow;
  74.     font-size:130%;
  75.     font-stretch: extra-condensed;
  76.     color:#0e56a4;
  77.     font-weight:400;
  78. }
  79.  
  80. #header {
  81.     top:100px;
  82.     left:100px;
  83.     width:840px;
  84.     height:320px;
  85.     background: #FFFFFF url(images/holderHigh_header2.png) no-repeat;
  86. }
  87.  
  88. #navigation {
  89.     top:100px;
  90.     left:100px;
  91.     width:840px;
  92.     height:51px;
  93.     background: #FFFFFF url(images/holderHigh_nav2.png) no-repeat;
  94. }
  95.  
  96. .nav {
  97.     color:#FFFFFF
  98. }
  99.  
  100. .nav a:link {
  101.     COLOR: #FFFFFF; TEXT-DECORATION: none;
  102. }
  103.  
  104. .nav a:hover {
  105.     color:#f9bf01;
  106. }
  107.  
  108. .nav a:visited {
  109.     COLOR: #FFFFFF; TEXT-DECORATION: none;
  110. }
  111.  
  112. #content {
  113.     left:100px;
  114.     width:840px;
  115.     background: #FFFFFF url(images/holderHigh_bg2.png);
  116. }
  117.  
  118. #footer {
  119.     left:100px;
  120.     width:840px;
  121.     height:75px;
  122.     background: #FFFFFF url(images/holderHigh_footer2.png) no-repeat;
  123. }
  124.  
  125. a {
  126.     text-decoration:none;
  127.     color:#FCA900;
  128. }
  129.  
  130. a:hover {
  131.     color:#0e56a4;
  132. }
  133.  
  134. hr {
  135.     border: none 0; 
  136.     border-top: 1px dashed #000;
  137.     border-bottom: 1px dashed #ccc;
  138.     width: 80%;
  139.     height: 2px;
  140.     margin: 10px auto 0 0;
  141.     text-align: center;
  142.     }
  143.  
Any help would be most appreciated!

Thanks heaps
Sep 4 '07 #1
2 2930
drhowarddrfine
7,435 Expert 4TB
I haven't had FF 1.0.7 for months, or is it years?

In any case, it doesn't center in FF 2.0.6 either but it has nothing to do with Firefox. You are using non-standard elements in your HTML and CSS that do not work in any browser but IE, so you shouldn't use them either. Validate your html and css for that list.

In addition, new web sites should always use the strict doctype. See the article about doctypes under Articles above.

To get modern browsers, such as Firefox, to center like you want, add 'margin:0 auto' to #navigation and #header. You should also add that to your content div and remove <center> since that's been deprecated for years.
Sep 4 '07 #2
jakiti
3
I haven't had FF 1.0.7 for months, or is it years?

In any case, it doesn't center in FF 2.0.6 either but it has nothing to do with Firefox. You are using non-standard elements in your HTML and CSS that do not work in any browser but IE, so you shouldn't use them either. Validate your html and css for that list.

In addition, new web sites should always use the strict doctype. See the article about doctypes under Articles above.

To get modern browsers, such as Firefox, to center like you want, add 'margin:0 auto' to #navigation and #header. You should also add that to your content div and remove <center> since that's been deprecated for years.
Thank you so much for your help drhowarddrfine, I really appreciate it. Please know, that I knew the error was not with Firefox and that it was in my code, just didn't put that across properly. I've got much to learn. I will go and read the articles and update my antiquated browsers! Thanks again.
Sep 5 '07 #3

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

3 posts views Thread by Jens Kristensen | last post: by
7 posts views Thread by Dario de Judicibus | last post: by
28 posts views Thread by Kent Feiler | last post: by
2 posts views Thread by shivendravikramsingh | last post: by
2 posts views Thread by paul | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.