473,396 Members | 1,996 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,396 software developers and data experts.

Hi, my html/css code is appers fine in IE 6 but not in Mozilla Firefox, Please help

Hi, every one on this forum....

I am new to web designing (using HTML/CSS). i designed a web page using HTML, Css with dream weaver. Here is the code i used for the desinging.

it appears well in IE 6 browser but not in Mozilla 4.0 some components are disappears.

This is the whole code i used for designing this page and i also given css files coding.(except images)

i don't know how to upload my files in this site(forum). So i am pasting all my code here please check for any mistakes or any code i have missed to use...

any suggestions also welcome

************HTML Code*******************
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>index</title>
  6. <link href="style.css" rel="stylesheet" type="text/css" />
  7. <link href="consult.css" rel="stylesheet" type="text/css" />
  8. <style type="text/css">
  9. <!--
  10. .style1 {color: #B2CFFB}
  11. .style2 {color: #648BDD}
  12. -->
  13. </style>
  14. </head>
  15.  
  16. <body class="bdy">
  17. <div id="hedr"></div>
  18. <div id="marq"><marquee behavior="scroll" direction="left" width="100%"><img src="imgs/blue.jpg"></marquee></div>
  19.  
  20.   <span class="style1"></span>
  21.   <div id="ddtoptabs">
  22.  
  23.         <ul class="menu2" >
  24.  
  25.  
  26.             <li class="top"><a href="consult.html" class="top_link" title="Aboutus" style="background:#4263B5;color:#FFFFFF"><span>Aboutus</span></a></li>
  27.  
  28.                 <li class="top"><a href="innerpages\clients.html" class="top_link" title="Clients"><span>Clients</span></a></li>
  29.             <li class="top"><a href="innerpages\outsource.html" class="top_link" title="Outsourcing"><span >Out sourcing</span></a></li>    
  30.             <li class="top"><a href="innerpages\jobs.html" class="top_link" title="Jobs"><span >Jobs</span></a>            </li>
  31.             <li class="top"><a href="innerpages\testing.html" class="top_link" title="Testing"><span >Testing</span></a></li>    
  32.         <li class="top"><a href="innerpages\conus.html" class="top_link" title="Contactus"><span >Contactus</span></a></li>        
  33.         </ul>
  34. </div>
  35.  
  36. <div id="cntnt">
  37.   <table border=0 cellspacing="0" cellpadding="0" width="695" class="tblimg">
  38.       <tr>
  39.       <td width="" height="174"   valign="top">
  40.       <span class="para1">About Blue Berry</span>
  41.       <p class="para">
  42.   Blue Berry is engaged in the business of working with organizations, to understand and meet the requirement imperatives of the ever changing and growing Industry, providing them with the competitive advantage with the intellectual capital and cutting-edge technology solutions,we offer Contract/Contract-to-Hire. <br /><br />
  43. </p>
  44. </td>
  45. <td width="151" align="right"><div id="img1"></div></td>
  46. </tr>
  47. <tr>
  48. <td colspan="2">
  49. <p class="para">
  50. Help when you need it <br />
  51. Concentrating on your core business is the top priority, so when technology issues arise they can be distracting and taxing on your internal resources. We provide assistance to augment your resources with the talent you need.<br /><br />
  52.  
  53.  
  54. </p>
  55. </td>
  56.  
  57. </tr>
  58.  
  59.   </table>
  60. </div>
  61.   <div class="footr">
  62.     <table width="100%" border="0" cellpadding="" cellspacing="1"  >
  63.     <tr>
  64.     <td colspan="2" height="17">
  65.       <p class="para">Copyright &copy; 2008. All rights resereved.</p>
  66.     </td>  
  67.     <td height="17" width="66%" align="left" class=""><p class="para">Site designed and developed by <a href="http://www.indusray.in" target="_blank" class="folnk" >IndusRay Software Services</a></p> </td>
  68.     </tr>
  69.     </table>
  70. </div>
  71. </body>
  72. </html>
  73.  
**************consult.css************************* ***
Expand|Select|Wrap|Line Numbers
  1. #cntnt {
  2.     position: absolute;
  3.     height: 408px;
  4.     width: 671px;
  5.     left: 162px;
  6.     top: 236px;
  7.     z-index: -1;
  8.     border:#4263B5 solid 1px;
  9.     padding-left:3px;
  10. }
  11.  
  12.  p.para {
  13.     font-family: Arial, Helvetica, sans-serif;
  14.     font-size: 11px;
  15.     font-style: normal;
  16.     color:#000099;
  17.     word-spacing:5px;
  18.     white-space:normal;
  19.     line-height:20px;
  20.     padding-right:3px;
  21.     text-align: justify;
  22.     }
  23.  
  24. #cntnt .para1 {
  25.     font-family: Arial, Helvetica, sans-serif;
  26.     font-size: 12px;
  27.     font-style: normal;
  28.     font-weight: bold;
  29.     color:#0033CC;
  30. }
  31.  
  32. .footr {
  33.     position: absolute;
  34.     height: 12px;
  35.     width: 698px;
  36.     left: 162px;
  37.     top: 917px;
  38.  
  39.  
  40. }
  41.  
  42. .bdy #cntnt #img1 {
  43.     background-attachment: scroll;
  44.     background-color: #5984AF;
  45.     background-image: url(imgs/coni.jpg);
  46.     background-repeat: no-repeat;
  47.     background-position: left top;
  48.     position: absolute;
  49.     height: 147px;
  50.     width: 144px;
  51.     left: 553px;
  52.     top: 40px;
  53. }
  54.  
******************style.css****************
Expand|Select|Wrap|Line Numbers
  1. #ddtoptabs {
  2.     position:absolute;
  3.     width:768px;
  4.     margin-left:130px;
  5.     height: 32px;
  6.     z-index: 1;
  7.     left: 32px;
  8.     top: 201px;
  9. }
  10.  
  11. #ddtoptabs .menu2{
  12. margin-left:0px;
  13. padding-left:0px;
  14. white-space:nowrap;
  15. float:left;
  16. font-family:"Monotype Corsiva";
  17. font-weight:normal;
  18. font-size:16px;
  19.  
  20. font-style:normal;
  21.  
  22. border-bottom:#CCCCCC solid 1px;
  23. background-color:#84ADEF;
  24. width:700px;
  25. border-bottom: 1px solid #5984AF;
  26. }
  27.  
  28.  
  29. .menu2 li {
  30. display:inline;
  31. list-style-type:none;
  32.  
  33.  
  34. }
  35.  
  36. .menu2 li a {
  37.  
  38. background:#84ADEF;
  39. color:#3300FF;
  40. text-decoration:none;
  41. float:left;
  42. text-align:center;
  43. padding-top:10px;
  44. padding-right:10px;
  45. padding-left:7px;
  46. padding-bottom:0px;
  47.  
  48. height:23px;
  49. width:98px;
  50. border-left:#0066FF solid 1px;
  51.  
  52.  
  53. }
  54.  
  55. .menu2 li a:hover{
  56. background:#4263B5;
  57. color:#FFFFFF;
  58. }
  59.  
  60.  
  61. #hedr {
  62.     background-attachment: scroll;
  63.     background-image: url(imgs/con1.jpg);
  64.     background-repeat: no-repeat;
  65.     background-position: center top;
  66.     height: 201px;
  67.     width: 700px;
  68.     position: absolute;
  69.     left: 162px;
  70.     top: 2px;
  71. }
  72.  
  73. .bdy {
  74.     background-attachment: scroll;
  75.     /*background-color:#0099FF;*/
  76.     background-image:url("imgs/body-bg.gif");
  77.  
  78.     background-repeat:repeat;
  79.     background-position: left top;
  80. }
  81.  
  82. .footr {
  83. border:#4263B5 solid 1px;
  84. background:#6666CC;
  85. }
  86.  
  87. .footr .para{
  88.     font-family: Arial, Helvetica, sans-serif;
  89.     font-size: 11px;
  90.     font-style: normal;
  91.     color:#FFFFFF;
  92.     word-spacing:5px;
  93.     white-space:normal;
  94.     line-height:20px;
  95.     padding-right:3px;
  96.     text-align: justify;
  97. }
  98.  
  99. .footr .folnk {
  100.     font-family: Arial, Helvetica, sans-serif;
  101.     font-size: 12px;
  102.     font-style: normal;
  103.     font-weight: bold;
  104.     color:#FFFF00;
  105.     text-decoration:none;
  106. }
  107.  
  108. #cntnt {
  109. border:#4263B5 solid 1px;
  110.  
  111. }
  112. .bdy #marq {
  113.     position: absolute;
  114.     height: 56px;
  115.     width: 552px;
  116.     left: 173px;
  117.     top: 85px;
  118. }
************************
Thanks in advance
Aug 23 '08 #1
7 2477
David Laakso
397 Expert 256MB
A few suggestions...
You may want to consider a tableless layout. You have no tabular data, consequently the table is not needed. Layouts are best structured using floats rather than absolute positioning.

If you're up for it, this is an excellent tutorial for producing a nice two column tabless CSS layout that will work well cross-browser [1]. Develop to compliant browsers: Opera, Firefox, and Safari-- with frequent check-backs to IE/6 and IE/7. It is the IE browsers that will get stuff wrong, not the compliant browsers.

Think of the w3c markup [2] and CSS [3] validation services as your best friends.

[1] http://www.456bereastreet.com/lab/de...slayout/2-col/
[2] http://validator.w3.org/
[3] http://jigsaw.w3.org/css-validator/

BTW, if you are on a public server, simply state your question and provide the site URI in your post-- anyone on this forum will be able to open the source document and the css file.
Aug 23 '08 #2
Hi,
David Laakso, Thanks for your valuable suggestions.

you told me to follow

[1]. Develop to compliant browsers: Opera, Firefox, and Safari-- with frequent check-backs to IE/6 and IE/7. It is the IE browsers that will get stuff wrong, not the compliant browsers.

[2]. use w3c markup validation services

[3]. use CSS validation services
for best results.

I will follow your suggestions.
Aug 25 '08 #3
A few suggestions...
You may want to consider a tableless layout. You have no tabular data, consequently the table is not needed. Layouts are best structured using floats rather than absolute positioning.

If you're up for it, this is an excellent tutorial for producing a nice two column tabless CSS layout that will work well cross-browser [1]. Develop to compliant browsers: Opera, Firefox, and Safari-- with frequent check-backs to IE/6 and IE/7. It is the IE browsers that will get stuff wrong, not the compliant browsers.

Think of the w3c markup [2] and CSS [3] validation services as your best friends.

[1] http://www.456bereastreet.com/lab/de...slayout/2-col/
[2] http://validator.w3.org/
[3] http://jigsaw.w3.org/css-validator/

BTW, if you are on a public server, simply state your question and provide the site URI in your post-- anyone on this forum will be able to open the source document and the css file.

August 25th, 2008

Hi,
David Laakso, Thanks for your valuable suggestions.

you told me to follow

[1]. Develop to compliant browsers: Opera, Firefox, and Safari-- with frequent check-backs to IE/6 and IE/7. It is the IE browsers that will get stuff wrong, not the compliant browsers.

[2]. use w3c markup validation services

[3]. use CSS validation services
for best results.

I will follow your suggestions.


August 27th, 2008

Hi,

David Laakso, I replied you on the date as above(on 25/8/2008) for the suggestions you give me. I don't know whether you have seen that reply or not.
so i'm sending that reply again.

And I'm thanking you again for those valuable suggestions.

you told that

"Layouts are best structured using floats rather than absolute positioning."


I applied the same.

That works fine. and now i can see my webpage in both IE6 and Mozilla FF very well.

and the Links you give me to refer are indeed very helpful to me.

(the site i'm doing is till not uploaded to public server. when uploaded i will give link. So that i can know some valuable suggestions from, the people like you in this forum.)

Finally I have a doubt

I am always using div tag Layouts for designing web pages.

is there any problem using div tags like that.

Is it better to change div tag to table tag instead.

I don't know the which is the best way to use & apply in wabpages.

So,

Please, give me any suggestions to follow.


(sorry, if any grammatic mistakes)
Thank you
Aug 27 '08 #4
David Laakso
397 Expert 256MB
Since the layout you presented had no tabular data, the suggestion was to follow the "465 berea street" tableless CSS two-column layout
tutorial (see link to it in previous reply above).

If you still have no tabular information to deliver, no tables (or table tags) are needed or necessary. Stick with and construct the entire page entirely using only divisions throughout as in the tutorial.
Aug 27 '08 #5
Since the layout you presented had no tabular data, the suggestion was to follow the "465 berea street" tableless CSS two-column layout
tutorial (see link to it in previous reply above).

If you still have no tabular information to deliver, no tables (or table tags) are needed or necessary. Stick with and construct the entire page entirely using only divisions throughout as in the tutorial.

Thanks, David Laakso

The thing i mentioned in previous message (using tables instead of divs' layouts);

my friend(here) told me that "use only tables for every thing, don't use div tags in your entire web page for all layouts(for header, maincontent, footer, sidemenu), for best results". So, I asked you that question.

As iam new to the webpage designing, I just want to confirm which one is correct or which one is wrong or using either (div or table) are correct.


i think i'm clear to explain(if not clear, please excuseme and l leave it.)

sorry, if any grammatic or misspells.

Thank you.
Aug 29 '08 #6
Dormilich
8,658 Expert Mod 8TB
my friend(here) told me that "use only tables for every thing, don't use div tags in your entire web page for all layouts(for header, maincontent, footer, sidemenu), for best results". So, I asked you that question.
I would agree with David Laasko, for this approach usually results in markup that is far better to read and understand (and has usually smaller filesize). If your friend has his opinion, why not.
Remember, it's you who has to write, maintain, update or redesign your code. Try it out, make your experience, you'll see the benefit.

regards

PS have a look at CSS Zen Garden, the designers there do incredibly different layouts with just the same html file.
Aug 29 '08 #7
I would agree with David Laasko, for this approach usually results in markup that is far better to read and understand (and has usually smaller filesize). If your friend has his opinion, why not.
Remember, it's you who has to write, maintain, update or redesign your code. Try it out, make your experience, you'll see the benefit.

regards

PS have a look at CSS Zen Garden, the designers there do incredibly different layouts with just the same html file.

Thanks Dormillich,

Thanks David Laasko.

Thanks to forum.
Aug 30 '08 #8

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

Similar topics

12
by: Phil Powell | last post by:
The customer made a wild request: they want on their admin panel a textarea that will display an existing resume. This textarea, however, must have a dynamic width, one that "fills the screen...
2
by: Econ | last post by:
XML as part of HTML in different browsers In one folder are few files - XML - file with data - HTML - file with static text - XSL - file for transformation XML data into HTML - CSS -...
19
by: Razvan | last post by:
Hi ! I have a big problem with my web site www.mihaiu.name. Sometimes when I visit my page with IE6 the browser ask me to download the index.html file ! The options are open, save, cancel,...
10
by: john T | last post by:
Is there anyway to vertically center a html table using css in such a way it does not alter the html table. When I tryied it just screws up.
22
by: Trammel | last post by:
Hi, I am here to request support from anyone that has idea's on cross-browser HTML (Mainly Firefox and IE). My personal website http://trammel.no-ip.info works fine on Firefox but IE decides to...
7
by: Coder | last post by:
Hi I have the following code in java script, it is not giving proper output in FIREFOX but running fine in IE... can anybody help me out to make this run in FIREFOX . <script...
1
by: ajaysoniji | last post by:
Hi, I am using this code to read the option values from a select option. I am getting the reference of that select option in arg1. Its working fine with mozilla firefox but not with Internet...
9
by: javakid | last post by:
Hi Following form validatioin code is working fine on IE but not working on Mozilla Firefox V2. Can any body suggest? Regards <script ="JAVASCRIPT" type="text/javascript">...
1
by: hamidawais | last post by:
Hi All I have a simple Ajax example that populates a combo box from the DB . The example is working fine on Internet explorer but it gives no result on Mozilla FireFox Given below is the...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
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...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

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.