473,372 Members | 900 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,372 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 3009
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

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

Similar topics

3
by: Jens Kristensen | last post by:
I have a problem displaying a divbox containing a html-textarea - everything works fine with "normal" characters. However, when the textarea contains special chars like <P> or ' , the box fails to...
8
by: slim | last post by:
hi again all, i am still working on the website as mentioned in earlier threads and have hit another snag... http://awash.demon.co.uk/index.php http://awash.demon.co.uk/vd.css the php is...
7
by: Dario de Judicibus | last post by:
System: Windows XP SP1 + all latest patches (no SP2) Browser: IE 6.0.2800.1106.xpsp2.040919-1003 Problem: browser does not show, or partially shows, borders and background color of <DIV> as...
9
by: Julia Briggs | last post by:
How do I construct a <iframe> or equivalent for FireFox/NS browsers, inside a screen centered <div> tag? Can it be done?
28
by: Kent Feiler | last post by:
1. Here's some html from a W3C recommendations page. <P>aaaaaaaaa<DIV>bbbbbbbbb</DIV><DIV>cccccccc<P>dddddddd</DIV> 2.Although I didn't think it would make any difference, I tried it with the...
2
kraves
by: kraves | last post by:
This is my first venture into simple browser detection. I have a little image script that needs different centering code between Firefox and IE. So this is what I have (it works except as...
2
by: shivendravikramsingh | last post by:
hello friend,i m using this code<div id="get" style="visibility:hidden"><? include "time_title.php" ?></div> in a php page,i want when page load the inclued page time_tiltle.php should not shown,when...
2
by: paul | last post by:
I have a JS function to change the width of a <divthat works great in Firefox, but not at all in IE7. In IE an error message occurs: Line: 92 Char: 5 Error: Invalid Argument Code: 0 Firefox...
8
prino
by: prino | last post by:
Hi all, I've written code (in REXX) that takes files in legacy languages (PL/I, COBOL, z/OS assembler, etc) and converts them into HTML in a format similar to what's displayed in the z/OS ISPF...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...
0
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

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.