cross browser wars with tableless design

Hi,

Please find the code below, can anybody tell me the reason for the cross browser issues with it. Also am i doing everything fine as far as using css is concerned.

Also all suggestions to improve the site would be really useful
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>XLTeachers Bring On Demand tutoring</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="header">
<img src="images/LIMS.jpg" alt="XLTeachers Logo with a globe" 
         width="160" height="91" />
 
<span id="logotext1">XLTEACHERS</span>
<p>
<span id="logotext2">On Demand Tutoring</span>
</p>
   
   
 
<div id="studentlogin">
<p>Login<br>
Username:<span class="input1"><input type="text" name="name"></span><br/>
PassWord:<span class="input2"><input type="password"  name="pass"></span>
</p>
</div>
</div>
	<div id="menu">
	<img src="images/menu_spacer.jpg" width="800" height="20px">
	<ul class="navbar">
 
			<li class="home"><a id="home" title="home" class="active" href="#"><span class="menuitem">Home</span></a></li>
			<li><a id="e-schooling" title="e-schooling" href="eschooling.html" class="inactive"><span class="menuitem">E-Schooling</span></a></li>
			<li><a id="e-tutoring" title="e-tutoring" href="etutoring.html" class="inactive"><span class="menuitem">E-Tutoring</span></a></li>			
			<li><a id="aboutus" title="aboutus" href="AboutUS.html" class="inactive"><span class="menuitem">About Us</span></a></li>
			<li><a id="registration" title="registration" href="Student_Login.jsp" class="inactive"><span class="menuitem">Registration</span></a></li>
			<li><a id="tutoring_packages" title="tutoring_packages" class="inactive" href="Tutoring_Packages.html"><span class="menuitem">Tutoring-Packages</span></a></li>
			<li><a id="contact" title="contact" class="inactive" href="Contact.jsp"><span class="menuitem">Contact Us</span></a></li>
	</ul>
</div>
<marquee>Special Offer <em>20% Discount</em> Register Today</marquee>
<div id="content"><img src="images/kids_reading.gif" alt="kids reading picture" height="360" width="300">
<div id="textcontent">
<h2>Math & Science is Always Fun With Us</h2>
<h3><em>XL</em>Teachers bring in <em>E-tutoring</em> &amp <em>E-Schooling</em></span></h3>
<h4>20% Discount, Special Offer, Register Today</h4>
<p>We at <em>XLTeachers</em> are Math & Science pioneers.We bring the best of the tutors to teach Math and Science from Grade 4 to 12th Grade.
 Our goal is to help the children, build their foundation,deepen
their understanding and enhance their thought-process. We understand the child's strengths and weaknesses and provide required counselling 
which best suits the child's needs. Our standard curriculum helps 
each and every child to perform highly. We make them understand difficult science and Math concepts.<br>
We dont solve your problems,but with us, you solve it yourself. You will enjoy and your enjoyment is what thrills us.</p>
<p>As your child sits through the classes and listens to our tutorial,
you as a parent, will see remarkable difference in the child's performance and attitude.</p> 
 
 
 
</div>
</div>
<div id="registrationbutton">
<p>Why wait,Register for a <em>free trial</em> and you will see the difference yourself.</p> 
<a href="Student_Login.jsp"><img src="New Folder/register_now.gif"  alt="Registration button" width="103" height="34"/></a>
</div>
</div>
</body>
</html>
 
and here is the css code
 
#wrapper { 
  height: 700px; 
  margin: 0 auto; 
  width: 100%; 
  font-family: Trebuchet MS, Verdana, Helvetica, Arial, san-serif; 
}
#header{
	width: 65%;
	height: 10%;
	margin: 0 auto;
	color: blue;
	font-family: Segoe Print;
	font-weight: bold;
}
#header img{
	float:left;
}
#logotext1{
	   font-size: 150%;
         position:absolute;
	   left: 355px;
	   top: 20px;
}
#logotext1:first-letter{
       font-size: 160%;
}
#logotext2{
	   font-size: 90%;
	   position:absolute;
	   left: 365px;
	   top: 60px;
}
#studentlogin{
	float: right;
	height: 100%;
	line-height: 1.4em;
}
#menu {
	list-style-type: none;
	font-size: 100%;
	background: red;
	width: 100%;
	clear: both;
	
}
#menu img{
	width: 100%;
}
#menu_bar{
	background-image: url('images/menu_spacer.jpg');
	background-repeat:repeat-x;
	height:2%;
	z-index: 100;
}
 
.navbar{
	width: 70%;
	margin:0 auto;
	text-align: center;
}
 
.navbar li {
		   display: inline-block;
		   border-width: thin;
		   border-color: black;
		   border-right-style: solid;
		   padding: 6px;
		   text-align: center;
	         font-variant:small-caps;
		   font-size: 110%;
		   
		   
		   
		   
}
.navbar li:first-letter{
		font-size: 120%;
}
.navbar a{
            text-decoration: none;
		}
 
.home{
			border-width: thin;
		     border-color: black;
		   border-left-style: solid;
			padding:2px;
		   
}
.menuitem{
	    color:black;
	    
}
#content{
		width: 70%;
		margin: 0 auto;
		
}
#content img{
		width: 35%;
		float: left;
}
#textcontent{
	float: right;
	width: 65%;	      
	line-height: 1.1em;
}
#registrationbutton{
		clear: both;
		text-align: center;
}
em{
	font-weight: bold;
	font-style: normal;
	
	
}
.important{
	font-style: bolder;
}

Open in new window

LVL 2
SunScreenCertAsked:
Who is Participating?
 
s8webConnect With a Mentor Commented:
"Did you get the point here?"

Perhaps not. Here's a revision.

http://www.s8web.com/ee/xl2.zip



0
 
s8webCommented:
There were a few things going on. Is this what you're trying to accomplish? Without the images taking up space, I can't test it thoroughly from my end.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>XLTeachers Bring On Demand tutoring</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<style type="text/css">
#wrapper { 
  height: 700px; 
  margin: 0 auto; 
  width: 100%; 
  font-family: Trebuchet MS, Verdana, Helvetica, Arial, san-serif; 
}
#header{
        width: 65%;
        height: 10%;
        margin: 0 auto;
        color: blue;
        font-family: Segoe Print;
        font-weight: bold;
}
#header img{
        float:left;
}
#logotext1{
           font-size: 150%;
         position:absolute;
           left: 355px;
           top: 20px;
}
#logotext1:first-letter{
       font-size: 160%;
}
#logotext2{
           font-size: 90%;
           position:absolute;
           left: 365px;
           top: 60px;
}
#studentlogin{
        float: right;
        height: 150px;
        line-height: 1.4em;
		margin-bottom:5px;
}
#menu {
        list-style-type: none;
        font-size: 100%;
		height:30px;
		#height:24px;
		padding-top:6px;
		#padding-top:0px;
        background: red;
        width: 100%;
        clear: both;
        
}
#menu img{
        width: 100%;
}
#menu_bar{
        background-image: url('images/menu_spacer.jpg');
        background-repeat:repeat-x;
        height:2%;
        z-index: 100;
}
 
.navbar{
        width: 70%;
        margin:0 auto;
        text-align: center;
}
 
.navbar li {
                   display: inline;
                   border-width: thin;
                   border-color: black;
                   border-right-style: solid;
                   padding: 6px;
                   text-align: center;
                 font-variant:small-caps;
                   font-size: 110%;
                   
                   
                   
                   
}
.navbar li:first-letter{
                font-size: 120%;
}
.navbar a{
            text-decoration: none;
                }
 
.home{
                        border-width: thin;
                     border-color: black;
                   border-left-style: solid;
                        padding:2px;
                   
}
.menuitem{
            color:black;
            
}
#content{
                width: 70%;
                margin: 0 auto;
                
}
#content img{
                width: 35%;
                float: left;
}
#textcontent{
        float: right;
        width: 65%;           
        line-height: 1.1em;
}
#registrationbutton{
                clear: both;
                text-align: center;
}
em{
        font-weight: bold;
        font-style: normal;
        
        
}
.important{
        font-style: bolder;
}
 
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<img src="images/LIMS.jpg" alt="XLTeachers Logo with a globe" 
         width="160" height="91" />
 
<span id="logotext1">XLTEACHERS</span>
<p>
<span id="logotext2">On Demand Tutoring</span>
</p>
   
   
 
<div id="studentlogin">
<p>Login<br>
Username:<span class="input1"><input type="text" name="name"></span><br/>
PassWord:<span class="input2"><input type="password"  name="pass"></span>
</p>
</div>
</div>
        <div id="menu">
        
        <ul class="navbar">
 
                        <li class="home"><a id="home" title="home" class="active" href="#"><span class="menuitem">Home</span></a></li>
                        <li><a id="e-schooling" title="e-schooling" href="eschooling.html" class="inactive"><span class="menuitem">E-Schooling</span></a></li>
                        <li><a id="e-tutoring" title="e-tutoring" href="etutoring.html" class="inactive"><span class="menuitem">E-Tutoring</span></a></li>                      
                        <li><a id="aboutus" title="aboutus" href="AboutUS.html" class="inactive"><span class="menuitem">About Us</span></a></li>
                        <li><a id="registration" title="registration" href="Student_Login.jsp" class="inactive"><span class="menuitem">Registration</span></a></li>
                        <li><a id="tutoring_packages" title="tutoring_packages" class="inactive" href="Tutoring_Packages.html"><span class="menuitem">Tutoring-Packages</span></a></li>
                        <li><a id="contact" title="contact" class="inactive" href="Contact.jsp"><span class="menuitem">Contact Us</span></a></li>
        </ul>
</div>
<marquee>Special Offer <em>20% Discount</em> Register Today</marquee>
<div id="content"><img src="images/kids_reading.gif" alt="kids reading picture" height="360" width="300">
<div id="textcontent">
<h2>Math & Science is Always Fun With Us</h2>
<h3><em>XL</em>Teachers bring in <em>E-tutoring</em> &amp <em>E-Schooling</em></h3>
<h4>20% Discount, Special Offer, Register Today</h4>
<p>We at <em>XLTeachers</em> are Math & Science pioneers.We bring the best of the tutors to teach Math and Science from Grade 4 to 12th Grade.
 Our goal is to help the children, build their foundation,deepen
their understanding and enhance their thought-process. We understand the child's strengths and weaknesses and provide required counselling 
which best suits the child's needs. Our standard curriculum helps 
each and every child to perform highly. We make them understand difficult science and Math concepts.<br>
We dont solve your problems,but with us, you solve it yourself. You will enjoy and your enjoyment is what thrills us.</p>
<p>As your child sits through the classes and listens to our tutorial,
you as a parent, will see remarkable difference in the child's performance and attitude.</p> 
 
 
 
</div>
</div>
<div id="registrationbutton">
<p>Why wait,Register for a <em>free trial</em> and you will see the difference yourself.</p> 
<a href="Student_Login.jsp"><img src="New Folder/register_now.gif"  alt="Registration button" width="103" height="34"/></a>
</div>
</div>
</body>
</html>
 
 

Open in new window

0
 
SunScreenCertAuthor Commented:
plz find this image..the code you have sent is an exact copy plz help me with the issues...they are mainly on alignment of menu, images, logo etc
plz find the images attached below
0
Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

 
SunScreenCertAuthor Commented:
hey i attached the images zip, why is not showing up
0
 
s8webCommented:
The code is different, I changed a few lines. Download the attached file, extract it and upload test.html to your webhost, make sure it is in the same directory as your working file, and look at it in a browser. you should see a significant difference. Without the images taking up space, I can't preview it accurately on my end. There are no image files accompanying the code you supplied.
0
 
s8webCommented:
I just noticed that my zip file didn't show up, I guess it's wherever your images went :) Here's a link to the zip file.

http://www.s8web.com/ee/test.zip
0
 
SunScreenCertAuthor Commented:
hi,

thanks for the help but this code has similar issues like the two input text boxes are aligned in firefox but not in IE. Also my  intention is that the menu total size be such that the images. content, logo, and input boxes fall in it....just like we have in etutorworld.net...here though the menu background is 100% but from where the different menus start that is the start of the whole page...please tell me how to achieve this and get rid of these browser wars. Also plz tell me how do i attach  the images if this is not working....
0
 
s8webCommented:
Please attach the images individually and upload, I can help you but I will need to access the images. Zip files seem to be the only format not uploading.
0
 
SunScreenCertAuthor Commented:
see if you can find the image attached...this is only one image
0
 
SunScreenCertAuthor Commented:
nopes even individually it isn't working
can u do one thing...i have just copied images from www.xlteachers.com...just go to that site and copy the images in the first page, the globe and the kids reading image
0
 
s8webCommented:
I started to tweak your code, and things started to snowball. I decided to just start from scratch. Here's a link http://www.s8web.com/ee/xl.zip - this should accomplish what you're after.

I left out the <marquee></marquee>. I left a space for it, but it is deprecated code and will not validate. the page otherwise validates and looks the same across browsers.
0
 
SunScreenCertAuthor Commented:
thanks, there are some things achieved with this code but i want the menu background color red to extend the total width of the screen just as in etutorworld. also i want the menu titles ie. home etc to start from the place the logo image or kids-reading images is starting and end where the content ends. Did you get the point here?
0
 
SunScreenCertAuthor Commented:
hey great thanks
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.