473,770 Members | 2,004 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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

21 New Member
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

************HTM L 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.  
**************c onsult.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 2496
David Laakso
397 Recognized Expert Contributor
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
praveenb000
21 New Member
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
praveenb000
21 New Member
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 Recognized Expert Contributor
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
praveenb000
21 New Member
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 Recognized Expert Moderator Expert
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
praveenb000
21 New Member
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
2584
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 width of any sized screen". Sorry but I cannot fathom how to do this! <textarea name="resume" cols="108" rows="29" wrap="physical><?= $resume ?></textarea>
2
1785
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 - CascadeStyleSheet +-HTML----------------------------+ | |
19
2153
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, More Info. When I say 'open', a list with windows applications is opened and I am supposed to choose a program to open that file. If I open the file
10
26875
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
2474
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 crush the left table (ingnoring that there is no breakable spaces). I tried using nowrap already and IE still forces a wrap of the text in the menu... thats why I tried using non-breaking spaces instead of normal ones... so there was nowhere to...
7
9616
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 language="JavaScript"> var cntlName; var eleTarget = document.getElementById('hiding'); function showOrHide(){
1
3153
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 Explorer. It gives the lenth but failing to read the arguments(Shown in bold). It gives the alert Internet Explorer 4 for IE and Netscape 5 for Mozilla firefox for the alert in line 4. Please Suggest as soon as possible how I can read the values of the...
9
5302
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"> //--------------- LOCALIZEABLE GLOBALS --------------- var d=new Date();
1
1459
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 method that is used in Javascript ...Please some one correct it so it works fine with Mozilla as well . I am waiting for the reply function makeRequest(url, parameters) { http_request = false; if (window.XMLHttpRequest) { //...
0
9618
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9906
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 protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
8933
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
7456
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 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 a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
6710
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5354
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
1
4007
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
3609
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2849
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.