Solved

cross browser wars with tableless design

Posted on 2009-05-13
13
388 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
To Patch or not to Patch? That is the question!

Don't get caught out like thousands of others around the world in the recent Ransomware Fiasco!
Discuss..
- Why it's not a good idea to wait before Patching
- Sensible approaches to Patching discussed
- Add your feedback, comments and suggestions

 
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

SendBlaster Pro 4 - Bulk Email Sending Software

SendBlaster 4 Pro - Best Bulk Emailing Sending Software
Automatic Subscribe / Unsubscribe Processing
Great for Newsletters & Mass Mailings
Optional HTML & Text Composition
Integration with Google Features
Built in Spam Score Checking
Free Professional Templates - Feature Packed!

Question has a verified solution.

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

Suggested Solutions

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…

752 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