By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,869 Members | 1,756 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,869 IT Pros & Developers. It's quick & easy.

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

P: 21
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
Share this Question
Share on Google+
7 Replies


Expert 100+
P: 397
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

P: 21
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

P: 21
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

Expert 100+
P: 397
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

P: 21
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
Expert Mod 5K+
P: 8,639
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

P: 21
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

Post your reply

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