Solved

cross browser wars with tableless design

Posted on 2009-05-13
13
386 Views
Last Modified: 2012-05-06
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

0
Comment
Question by:SunScreenCert
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 6
13 Comments
 
LVL 16

Expert Comment

by:s8web
ID: 24378975
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
 
LVL 2

Author Comment

by:SunScreenCert
ID: 24379597
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
 
LVL 2

Author Comment

by:SunScreenCert
ID: 24379610
hey i attached the images zip, why is not showing up
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 16

Expert Comment

by:s8web
ID: 24379698
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
 
LVL 16

Expert Comment

by:s8web
ID: 24379733
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
 
LVL 2

Author Comment

by:SunScreenCert
ID: 24379936
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
 
LVL 16

Expert Comment

by:s8web
ID: 24384316
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
 
LVL 2

Author Comment

by:SunScreenCert
ID: 24386274
see if you can find the image attached...this is only one image
0
 
LVL 2

Author Comment

by:SunScreenCert
ID: 24386283
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
 
LVL 16

Expert Comment

by:s8web
ID: 24389777
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
 
LVL 2

Author Comment

by:SunScreenCert
ID: 24390997
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
 
LVL 16

Accepted Solution

by:
s8web earned 500 total points
ID: 24395096
"Did you get the point here?"

Perhaps not. Here's a revision.

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



0
 
LVL 2

Author Comment

by:SunScreenCert
ID: 24404007
hey great thanks
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today, still in the boom of Apple, PC's and products, nearly 50% of the computer users use Windows as graphical operating systems. If you are among those users who love windows, but are grappling to keep the system's hard drive optimized, then you s…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

740 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question