Solved

cross browser wars with tableless design

Posted on 2009-05-13
13
376 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
  • 7
  • 6
13 Comments
 
LVL 16

Expert Comment

by:s8web
Comment Utility
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
Comment Utility
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
Comment Utility
hey i attached the images zip, why is not showing up
0
 
LVL 16

Expert Comment

by:s8web
Comment Utility
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
Comment Utility
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
Comment Utility
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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 16

Expert Comment

by:s8web
Comment Utility
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
Comment Utility
see if you can find the image attached...this is only one image
0
 
LVL 2

Author Comment

by:SunScreenCert
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
"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
Comment Utility
hey great thanks
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
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.

744 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now