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

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • praveenb000
    New Member
    • Aug 2008
    • 21
    #1

    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

    ************HTM L Code*********** ********
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>index</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="consult.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style1 {color: #B2CFFB}
.style2 {color: #648BDD}
-->
</style>
</head>

<body class="bdy">
<div id="hedr"></div>
<div id="marq"><marquee behavior="scroll" direction="left" width="100%"><img src="imgs/blue.jpg"></marquee></div>

  <span class="style1"></span>
  <div id="ddtoptabs">

		<ul class="menu2" >
	
		
			<li class="top"><a href="consult.html" class="top_link" title="Aboutus" style="background:#4263B5;color:#FFFFFF"><span>Aboutus</span></a></li>
			
				<li class="top"><a href="innerpages\clients.html" class="top_link" title="Clients"><span>Clients</span></a></li>
			<li class="top"><a href="innerpages\outsource.html" class="top_link" title="Outsourcing"><span >Out sourcing</span></a></li>	
			<li class="top"><a href="innerpages\jobs.html" class="top_link" title="Jobs"><span >Jobs</span></a>			</li>
			<li class="top"><a href="innerpages\testing.html" class="top_link" title="Testing"><span >Testing</span></a></li>	
		<li class="top"><a href="innerpages\conus.html" class="top_link" title="Contactus"><span >Contactus</span></a></li>		
		</ul>
</div>

<div id="cntnt">
  <table border=0 cellspacing="0" cellpadding="0" width="695" class="tblimg">
      <tr>
      <td width="" height="174"   valign="top">
	  <span class="para1">About Blue Berry</span>
	  <p class="para">
  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 />
</p>
</td>
<td width="151" align="right"><div id="img1"></div></td>
</tr>
<tr>
<td colspan="2">
<p class="para">
Help when you need it <br />
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 />
 

</p>
</td>

</tr>
    
  </table>
</div>
  <div class="footr">
    <table width="100%" border="0" cellpadding="" cellspacing="1"  >
	<tr>
	<td colspan="2" height="17">
	  <p class="para">Copyright &copy; 2008. All rights resereved.</p>
	</td>  
	<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>
	</tr>
    </table>
</div>
</body>
</html>
    **************c onsult.css***** *************** ********
    Code:
    #cntnt {
	position: absolute;
	height: 408px;
	width: 671px;
	left: 162px;
	top: 236px;
	z-index: -1;
	border:#4263B5 solid 1px;
	padding-left:3px;
}

 p.para {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	color:#000099;
	word-spacing:5px;
	white-space:normal;
	line-height:20px;
	padding-right:3px;
	text-align: justify;
	}
	
#cntnt .para1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	color:#0033CC;
}

.footr {
	position: absolute;
	height: 12px;
	width: 698px;
	left: 162px;
	top: 917px;
	
	
}

.bdy #cntnt #img1 {
	background-attachment: scroll;
	background-color: #5984AF;
	background-image: url(imgs/coni.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	position: absolute;
	height: 147px;
	width: 144px;
	left: 553px;
	top: 40px;
}
    *************** ***style.css*** *************
    Code:
    #ddtoptabs {
	position:absolute;
	width:768px;
	margin-left:130px;
	height: 32px;
	z-index: 1;
	left: 32px;
	top: 201px;
}

#ddtoptabs .menu2{
margin-left:0px;
padding-left:0px;
white-space:nowrap;
float:left;
font-family:"Monotype Corsiva";
font-weight:normal;
font-size:16px;

font-style:normal;

border-bottom:#CCCCCC solid 1px;
background-color:#84ADEF;
width:700px;
border-bottom: 1px solid #5984AF;
}


.menu2 li {
display:inline;
list-style-type:none;


}

.menu2 li a {

background:#84ADEF;
color:#3300FF;
text-decoration:none;
float:left;
text-align:center;
padding-top:10px;
padding-right:10px;
padding-left:7px;
padding-bottom:0px;

height:23px;
width:98px;
border-left:#0066FF solid 1px;


}

.menu2 li a:hover{
background:#4263B5;
color:#FFFFFF;
}


#hedr {
	background-attachment: scroll;
	background-image: url(imgs/con1.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	height: 201px;
	width: 700px;
	position: absolute;
	left: 162px;
	top: 2px;
}

.bdy {
	background-attachment: scroll;
	/*background-color:#0099FF;*/
	background-image:url("imgs/body-bg.gif");
	
	background-repeat:repeat;
	background-position: left top;
}

.footr {
border:#4263B5 solid 1px;
background:#6666CC;
}

.footr .para{
    font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	color:#FFFFFF;
	word-spacing:5px;
	white-space:normal;
	line-height:20px;
	padding-right:3px;
	text-align: justify;
}

.footr .folnk {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	color:#FFFF00;
	text-decoration:none;
}

#cntnt {
border:#4263B5 solid 1px;

}
.bdy #marq {
	position: absolute;
	height: 56px;
	width: 552px;
	left: 173px;
	top: 85px;
}
    *************** *********
    Thanks in advance
    Last edited by eWish; Aug 23 '08, 01:49 PM. Reason: Please use the code tags
    Tags: None
    • David Laakso
      Recognized Expert Contributor
      • Aug 2008
      • 397
      #2
      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.

        Comment

        • praveenb000
          New Member
          • Aug 2008
          • 21
          #3
          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.

            Comment

            • praveenb000
              New Member
              • Aug 2008
              • 21
              #4
              Originally posted by David Laakso
              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

                Comment

                • David Laakso
                  Recognized Expert Contributor
                  • Aug 2008
                  • 397
                  #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.

                    Comment

                    • praveenb000
                      New Member
                      • Aug 2008
                      • 21
                      #6
                      Originally posted by David Laakso
                      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.

                        Comment

                        • Dormilich
                          Recognized Expert Expert
                          • Aug 2008
                          • 8694
                          #7
                          Originally posted by praveenb000
                          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.

                            Comment

                            • praveenb000
                              New Member
                              • Aug 2008
                              • 21
                              #8
                              Originally posted by Dormilich
                              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.

                                Comment

                                Previous template Next
                                Working...